SVG

SVG Web DU · 2009 · Dmitry Baranovskiy

Scalable Vector Graphics

Declarative Language

W3C Standard

Graphic Elements

rect circle ellipse line polyline polygon path

Path Syntax

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

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

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

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

SVG

by Dmitry Baranovskiy on Jun 05, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 19

Statistics

SVG — Presentation Transcript