Web DU’09

1. SVG
Web DU · 2009 · Dmitry Baranovskiy

2. Scalable Vector Graphics

3. Declarative Language

4. W3C Standard

5. Graphic Elements

6. rect
circle
ellipse
line
polyline
polygon
path

7. <svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot;>
<rect x=quot;0quot; y=quot;0quot; width=quot;320quot; height=quot;200quot; fill=quot;#cccquot;/>
<ellipse cx=quot;160quot; cy=quot;100quot; rx=quot;50quot; ry=quot;80quot; fill=quot;#fc0quot;/>
<circle cx=quot;160quot; cy=quot;100quot; r=quot;50quot; fill=quot;#000quot;/>
<line x1=quot;160quot; y1=quot;100quot; x2=quot;50quot; y2=quot;80quot; stroke=quot;#fffquot;/>
<polyline points=quot;10, 110, 10, 120, 20, 120, 20, 130, 30, 130,
30, 140quot; stroke=quot;#00fquot; fill=quot;nonequot; stroke-width=quot;5quot;/>
<polygon points=quot;110, 10, 110, 20, 120, 20, 120, 30, 130, 30,
130, 40, 110, 40quot; stroke=quot;#090quot; fill=quot;nonequot; stroke-width=quot;3quot;/>
<path d=quot;M10,10C50,10 20,40 100,50L120,60l0,30
30,0-40,20L10,10zquot; fill=quot;nonequot; stroke=quot;#f00quot; stroke-width=quot;4quot;/>
</svg>

8. Path Syntax

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

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

11. Attributes

12. 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

13. 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

14. CSS Support

15. Masking & Clipping

16. Filters

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

18. Animation

19. <svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot; xmlns:xlink=quot;http://
www.w3.org/1999/xlinkquot;>
<rect x=quot;40quot; y=quot;40quot; width=quot;100quot; height=quot;100quot; fill=quot;#fffquot;>
<animate attributeName=quot;fillquot; from=quot;#fffquot; to=quot;#fc0quot; dur=quot;2.5squot;
repeatCount=quot;indefinitequot;/>
<animateTransform attributeName=quot;transformquot; type=quot;rotatequot; from=quot;0 90
90quot; to=quot;180 90 90quot; dur=quot;5squot; repeatCount=quot;indefinitequot;/>
</rect>
</svg>

20. Scripting

21. 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: quot;Mquot;, x: 10, y: 10}
true

22. 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

23. Support

24. 64% 82%
3.2 4.0

25. 62% 82%
1.0 2.0

26. 60% 68%
3.0 3.6

27. 94%
9.5

28. 0%

29. VML

30. Current Workarounds

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

32. Raphaël
http://RaphaelJS.com/

33. Is it friend or foe?

34. You decide

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