SVG
Web DU · 2009 · Dmitry Baranovskiy

Scalable Vector Graphics

Declarative Language

W3C Standard

Graphic Elements

rect
circle
ellipse
line
polyline
polygon
path

<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">
<rect x=\"0\" y=\"0\" width=\"320\" height=\"200\" fill=\"#ccc\"/>
<ellipse cx=\"160\" cy=\"100\" rx=\"50\" ry=\"80\" fill=\"#fc0\"/>
<circle cx=\"160\" cy=\"100\" r=\"50\" fill=\"#000\"/>
<line x1=\"160\" y1=\"100\" x2=\"50\" y2=\"80\" stroke=\"#fff\"/>
<polyline points=\"10, 110, 10, 120, 20, 120, 20, 130, 30, 130,
30, 140\" stroke=\"#00f\" fill=\"none\" stroke-width=\"5\"/>
<polygon points=\"110, 10, 110, 20, 120, 20, 120, 30, 130, 30,
130, 40, 110, 40\" stroke=\"#090\" fill=\"none\" stroke-width=\"3\"/>
<path d=\"M10,10C50,10 20,40 100,50L120,60l0,30
30,0-40,20L10,10z\" fill=\"none\" stroke=\"#f00\" stroke-width=\"4\"/>
</svg>

Path Syntax

M10,10C50,10 20,40
100,50L120,60l0,30
30,0-40,20z

M10,10C50,10 20,40
100,50L120,60l0,30
30,0-40,20z

Attributes

alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
color-interpolation
color-interpolation-filters
color-profile
color-rendering
cursor
direction
display
dominant-baseline
enable-background
fill
fill-opacity
fill-rule

pointer-events
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
text-decoration
text-rendering
unicode-bidi
visibility
word-spacing
writing-mode

CSS Support

Masking & Clipping

Filters

feBlend feMorphology
feColorMatrix feOffset
feComponentTransfer feSpecularLighting
feComposite feTile
feConvolveMatrix feTurbulence
feDiffuseLighting feDistantLight
feDisplacementMap fePointLight
feFlood feSpotLight
feGaussianBlur feFuncR
feImage feFuncG
feMerge feFuncB
feMergeNode feFuncA

Animation

<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://
www.w3.org/1999/xlink\">
<rect x=\"40\" y=\"40\" width=\"100\" height=\"100\" fill=\"#fff\">
<animate attributeName=\"fill\" from=\"#fff\" to=\"#fc0\" dur=\"2.5s\"
repeatCount=\"indefinite\"/>
<animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 90
90\" to=\"180 90 90\" dur=\"5s\" repeatCount=\"indefinite\"/>
</rect>
</svg>

Scripting

var path;
// lets assume we took this path from SVG document
path.getBBox();
path.getTotalLength();
path.getPointAtLength(100);
path.pathSegList.getItem(0);
SVG.checkIntersection(path, rect);
{x: 10, y: 10, width: 100, height: 100}
370.584
{x: 97.936, y: 49.734}
{pathSegType: 2, pathSeqTypeAsLetter: \"M\", x: 10, y: 10}
true

var text; // lets assume we took this text from SVG
text.getBBox();
text.getNumberOfChars();
text.getComputedTextLength();
text.getStartPositionOfChar(8);
text.getEndPositionOfChar(8);
text.getExtentOfChar(12);
text.getCharNumAtPosition(SVG.createSVGPoint());
{x: 10, y: 10, width: 100, height: 100}
14
153
{x: 179, y: 30}
{x: 193, y: 30}
{x: 225, y: 12, width: 17, height: 22}
9

Support

64% 82%
3.2 4.0

62% 82%
1.0 2.0

60% 68%
3.0 3.6

94%
9.5

0%

VML

Current Workarounds

Dojo
http://dojotoolkit.org/projects/dojox/

Raphaël
http://RaphaelJS.com/

Is it friend or foe?

You decide

ank You
http://dmitry.baranovskiy.com/
dmitry@baranovskiy.com