SVG
Upcoming SlideShare
Loading in...5
×
 

SVG

on

  • 4,506 views

Web DU’09

Web DU’09

Statistics

Views

Total Views
4,506
Views on SlideShare
4,483
Embed Views
23

Actions

Likes
4
Downloads
80
Comments
0

5 Embeds 23

http://www.slideshare.net 14
http://hi.chibaole.com 4
http://www.linkedin.com 2
https://www.linkedin.com 2
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SVG SVG Presentation Transcript

  • 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;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>
  • 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=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>
  • 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:
quot;Mquot;,
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