O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Teddy Bear Blue
Teddy Bear Blue
Carregando em…3
×

Confira estes a seguir

1 de 35 Anúncio

Mais Conteúdo rRelacionado

Semelhante a SVG (20)

Anúncio

Mais recentes (20)

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

×