SVG

Web DU · 2009 · Dmitry Baranovskiy
Scalable Vector Graphics
Declarative Language
W3C Standard
Graphic Elements
rect
  circle
 ellipse
   line
polyline
polygon
  path
<svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot;>

    <rect x=quot;0quot; y=quot;0quot; width=quot;3...
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
               ...
pointer-events
  shape-rendering
      stop-color
    stop-opacity
        stroke
 stroke-dasharray
stroke-dashoffset
   s...
CSS Support
Masking & Clipping
Filters
feBlend               feMorphology
feColorMatrix         feOffset
feComponentTransfer   feSpecularLighting
feComposite     ...
Animation
<svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot; xmlns:xlink=quot;http://
www.w3.org/1999/xlinkquot;>...
Scripting
var
path;
//
lets
assume
we
took
this
path
from
SVG
document
path.getBBox();
path.getTotalLength();
path.getPointAtLength(...
var
text;
//
lets
assume
we
took
this
text
from
SVG
text.getBBox();
text.getNumberOfChars();
text.getComputedTextLength();...
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
Upcoming SlideShare
Loading in …5
×

SVG

3,561 views

Published on

Web DU’09

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,561
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
89
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

SVG

  1. 1. SVG Web DU · 2009 · Dmitry Baranovskiy
  2. 2. Scalable Vector Graphics
  3. 3. Declarative Language
  4. 4. W3C Standard
  5. 5. Graphic Elements
  6. 6. rect circle ellipse line polyline polygon path
  7. 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. 8. Path Syntax
  9. 9. M10,10C50,10
20,40 100,50L120,60l0,30 30,0-40,20z
  10. 10. M10,10C50,10
20,40 100,50L120,60l0,30 30,0-40,20z
  11. 11. Attributes
  12. 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. 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. 14. CSS Support
  15. 15. Masking & Clipping
  16. 16. Filters
  17. 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. 18. Animation
  19. 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. 20. Scripting
  21. 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. 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. 23. Support
  24. 24. 64% 82% 3.2 4.0
  25. 25. 62% 82% 1.0 2.0
  26. 26. 60% 68% 3.0 3.6
  27. 27. 94% 9.5
  28. 28. 0%
  29. 29. VML
  30. 30. Current Workarounds
  31. 31. Dojo http://dojotoolkit.org/projects/dojox/
  32. 32. Raphaël http://RaphaelJS.com/
  33. 33. Is it friend or foe?
  34. 34. You decide
  35. 35. ank You http://dmitry.baranovskiy.com/ dmitry@baranovskiy.com

×