Skip to main content
黯羽轻扬Keep Growing Daily

SVG Basic Knowledge

Free2017-06-03#Front-End#svg guide#svg basic shapes#d3 path#描边动画#填充动画

SVG compatibility and application scenarios, SVG common element usage examples

Preface

Previously mentioned SVG Stroke Animation, can achieve amazing handwritten signature animation effects, of course, theoretically can be used to implement any irregular path fill animation

In scenarios supporting SVG, can consider using powerful SVG stroke animation, can achieve some incredible effects, especially effective in handling irregular stroke and fill animations

1. Compatibility

SVG (Scalable Vector Graphics) is an XML-based markup language used to describe 2D vector graphics

Basic compatibility (Can I use SVG):

Desktop [IE9+]
Mobile [Android4.4+] [Android3-4.3] partial support

SVG animation element compatibility (Can I use SVG animation):

Mobile [Android3+] iOS[6.1+]

Can play freely on mobile early on, such as using animateMotion to implement movement effects along irregular paths

2. Application Scenarios

1. icon

iconfont compatibility is indeed better than SVG, but has some limitations:

  • Only supports font-related CSS rules

  • Browser font optimization (anti-aliasing, etc.), causes icon display differences across browsers

  • Depends on font files, in bad situations (download failure, or user prefers custom fonts), will display boxes, even conflict with emoji

Can only be solid color or gradient, and size positioning affected by line-height, vertical-align, letter-spacing, etc., actual size may have deviation (hard to align)

SVG icon advantages:

  • Vector graphics, scale freely

  • Can control styles of different parts of icon, stroke colors, etc.

  • Precise actual size, occupied space consistent with SVG element size

  • In bad situations, can use png for smooth fallback

For more information about SVG icons, please see:

2. Animation

SVG combined with animation can achieve many magical effects:

  • Irregular stroke animation (handwritten signature)

  • Fill animation (hand-drawn)

  • Irregular path animation (let elements move along irregular paths)

An impressive SVG animation: Animated line drawing in SVG, more SVG animation cases see 30 Awesome SVG Animation For Your Inspiration

3. Charts

Some very popular chart libraries use SVG for implementation, such as d3, google charts, etc.

Compared to canvas charts, SVG charts have innate advantages in transition animations, can achieve very beautiful transition effects, such as D3 Tree

3. SVG Elements

SVG has its own set of element definitions (similar to HTML elements), used to describe 2D graphics. Wrapped with svg tag, can be directly embedded in HTML, for example:

<h3>svg demo</h3>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="30" height="30"></rect>
</svg>
<span>sibling</span>

Displays 30x30px black square, svg element size is 100x100px, svg element defaults to display: inline, so "sibling" text is alongside black square

P.S. width, height, x, y and other attributes without units default to px, can also carry em, ex, in, cm, mm, pt, pc, % and other units

SVG elements are numerous, and overlap with HTML elements, see SVG element reference

1. Shape Elements

Basic shapes are 6 types: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>, additionally <path> can be used to define any shape, including 4 basic shapes

rect

<rect x="50" y="10" width="30" height="30" rx="5" ry="5"></rect>

Where rx, ry are used to define rounded corners, respectively representing ellipse radii in x axis and y axis directions for four corners. Of course, the technique of using rounded corners to draw circles still applies:

<rect x="50" y="10" width="30" height="30" rx="50%" ry="50%"></rect>

x, y represent top-left corner coordinates, coordinate system same as canvas 2d, top-left is (0, 0)

circle

<circle cx="150" cy="25" r="15"></circle>

cx, cy represent circle center position

ellipse

<ellipse cx="200" cy="30" rx="25" ry="20"></ellipse>

rx, ry respectively represent radii in x axis direction and y axis direction

line

<line x1="250" y1="10" x2="300" y2="30" style="stroke: black"></line>

Note, no stroke by default, line invisible, here use stroke to set stroke color

polygon

<polygon points="60,50 100,70 100,110 60,130 20,110 20,70"></polygon>

Given a set of points, draw closed polygon

polyline

<polyline points="150,50 190,70 190,110 150,130 110,110 110,70" style="fill: none; stroke: black"></polyline>

Similar to polygon, polyline doesn't automatically connect start and end

Note, defaults to black fill and no stroke, no difference from above polygon example, here use fill to remove fill color, use stroke to add black stroke

2. path

Universal shape definition, can be used to implement all shapes mentioned above, for example:

<path d="M 10 10 L 100 10 L 100 80 Z" style="fill: orange; stroke: black; stroke-width: 1"></path>

A right triangle with black stroke and orange fill, attribute d represents a series of path descriptions, containing some commands:

Moveto      M lift pen to
Lineto      L draw straight line to
            H draw horizontal line to
            V draw vertical line to
Curveto     C draw cubic Bezier curve to (need to provide 2 control points)
            S connect to previous cubic Bezier curve (only need to provide second control point and end point, first control point is symmetric point of previous curve's second control point)
            Q draw quadratic Bezier curve to (need to provide 1 control point)
            T connect to previous quadratic Bezier curve (only need to provide end point, control point is symmetric point of previous curve's control point)
Arcto       A draw elliptical curve to
ClosePath   Z straight line connect current point and start point

Note, using Z/z to close path, different from manually L start point, because close command connects line segment endpoints together

Specific usage of each command:

M x,y       absolute coordinates
m dx,dy     relative coordinates

L/l         same as above
H/h         same as above
V/v         same as above

C/c c1x,c1y c2x,c2y x,y     control point 1 control point 2 end point
S/s cx,cy x,y               control point 2 end point
Q/q cx,cy x,y               control point end point
T/t x,y                     end point

A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y
  x,y direction radii x axis and horizontal axis clockwise angle [1/0] large/small angle arc [1/0] clockwise/counterclockwise to end point end point

Z/z         no parameters, Z and z no difference

For example:

<!-- Rectangle -->
<path d="M 10 10 H 70 80 V 70 80 H 10 10 z" style="stroke: black"></path>
<!-- Cubic Bezier curve -->
<path d="M 10 10 C 30 40 90 60 30 100 S 50 50 150 10 S 100 130 100 120" style="fill: none; stroke: black"></path>

P.S. For more information about d attribute, please see:

3. Text

<text x="100" y="40" dx="10" dy="10" text-anchor="middle" rotate="10 10" style="font-family: Consola monospace; font-size: 24px; stroke: skyblue; fill: pink;">
    SVG text styling
</text>

x, y, dx, dy used for positioning, former absolute positioning, latter relative offset from self, text-anchor used to position text (relative to x, y left/right/center align)

Note: rotate attribute is very magical, different from style="transform: rotate(10deg);" overall rotation, rotate attribute is for characters (glyphs), can pass in a set of values, act on each character in sequence, so can be used to implement effects similar to italic

P.S. For more information about rotate attribute, please see Chapter 11: Text

4. Styles

Besides CSS-supported style properties, SVG also supports some unique ones, such as stroke, fill, etc., common ones as follows:

fill                fill color, text color also controlled by this attribute
stroke              stroke color
stroke-width        stroke width
stroke-linecap      endpoint style, rounded, right angle, etc., consistent with canvas, butt | round | square
stroke-dasharray    dashed line style

Can also apply styles to SVG elements through CSS selectors, for example:

<style>.line {stroke: red;}</style>
<svg>
    <line class="line" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

But style element in SVG is different from HTML, above method equivalent to:

<svg>
    <style><![CDATA[
    .newLine {stroke: red;}
    ]]></style>
    <line class="newLine" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

Wrapping style rules with CDATA is to avoid XML parsing errors:

Note how the CSS style sheet is placed within a CDATA construct (i.e., ). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

(From Styling-SVG 1.1(Second Edition))

5. marker

marker markers can attach to graphic elements, such as using marker to add arrows:

<defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
</defs>

<path d="M 10 10 C 50 80 40 20 120 50" fill="none" stroke="black" stroke-width="1" marker-end="url(#Triangle)"></path>

Define reusable elements through defs, reference previously defined marker elements through id, url(#Triangle) is called Functional IRI reference

Here defined an arrow, and added to end point of path curve, optional positions are:

marker-start    start point
marker-mid      each intermediate point
marker-end      end point

marker attribute meanings as follows:

viewBox             coordinate system area
refX/Y              reference point, this point coincides with endpoint when drawing
markerUnits         define coordinate system units userSpaceOnUse current coordinate system units | strokeWidth line width (default)
markerWidth/Height  marker width/height, default value is 3
orient              drawing direction, value is auto or angle value

Default markerUnits="strokeWidth" adaptively adjusts marker size according to graphic line width, if markerUnits="userSpaceOnUse", specifies marker units as current coordinate system units, won't adjust relative to graphic line width

Default orient="auto" automatically calculates orientation angle, arrows on curve point in slope direction, very refined and natural

P.S. For more information about marker, please see 11 Painting: Filling, Stroking and Marker Symbols

6. Filters

Change rendering effects by applying filter, make display effect better. Usage similar to marker:

<defs>
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
</defs>

<path d="M 10 20 C 50 80 40 20 120 60" fill="none" stroke="black" stroke-width="1" filter="url(#blur)"></path>

Define Gaussian blur filter (frosted glass effect) through feGaussianBlur element, and set blur level parameter stdDeviation, in used to set object to apply filter, here SourceGraphic represents original image, can also only apply to alpha channel or background image (snapshot of entire area where filter is applied)

Additionally supports shadow, lighting, color and other filters, specific information please see SVG element reference

7. Gradients

Supports linear gradients and radial gradients, usage similar to marker, for example:

<defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#000"/>
        <stop offset="100%" stop-color="#fff"/>
    </linearGradient>
    <radialGradient id="radial">
        <stop offset="10%" stop-color="#eee"/>
        <stop offset="95%" stop-color="#ccc"/>
    </radialGradient>
</defs>

<rect x="0" y="0" width="100%" height="50%" fill="url(#linear)"></rect>
<rect x="0" y="50%" width="100%" height="50%" fill="url(#radial)"></rect>

Respectively defined pure black to pure white vertical linear gradient, center bright surroundings gradually dark radial gradient

4. Online Demo

All examples mentioned above: http://www.ayqy.net/temp/svg/svg.html

Comments

No comments yet. Be the first to share your thoughts.

Leave a comment