Upcoming SlideShare
Loading in...5
×

Like this presentation? Why not share!

# SVG

## on Jun 05, 2009

• 4,515 views

Web DU’09

Web DU’09

### Views

Total Views
4,515
Views on SlideShare
4,492
Embed Views
23

Likes
4
Downloads
80
Comments
0

### 5 Embeds23

 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

### Upload Details

Uploaded via as Adobe PDF

### Usage Rights

© All Rights Reserved

### Report content

• Comment goes here.
Are you sure you want to
Your message goes here
Edit your comment

## SVGPresentation 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 feOﬀset feComponentTransfer feSpecularLighting feComposite feTile feConvolveMatrix feTurbulence feDiﬀuseLighting 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