HTML5 and SVG

HTML5 and SVGNuno Rosa[Developer | Byclosure][nuno.rosa@byclosure.com][@yarcub]

AgendaHTML5 & SVGAdoptionSVG 101Why & where?Q & A

SVG is not HTML5......but they get along.

Are we there yet?Real world examples

Google Visualization APIOn demand charts (e.g. Google Docs)

VexflowMusic notation rendering (http://vexflow.com)

PepsiCo SXSW 2011 ZeitgeistTwitter stream visualization (http://pepsicozeitgeist.com/)

Describes 2D vector imagesStaticAnimationXMLFull DOM supportScriptingOpen standard (W3C)Modern browsers support (no plugins)Fallback options availableIn a nutshell

Standalone<object data="myfile.svg" type="image/svg+xml" width="100" height="100"/><embedsrc="myfile.svg" width="100" height="100"/><iframesrc="myfile.svg" width="100" height="100"/><imagesrc="myfile.svg" width="100" height="100"/>No scripting{background-image: url('myfile.svg');}No scriptingSVG on web pages

Standalone (scripting)HTML DocumentSVG DocumentSVG on web pages<object id="svgContainer" data="myfile.svg" type="image/svg+xml" width="100" height="100"/>SVGDoc = document.getElementById("#svgContainer") .getSVGDocument();var element = SVGDoc.querySelector("#elementId");element.setAttribute("x", 100);<svgxmlns="http://www.w3.org/2000/svg"> <rect id="elementId" width="10" height="10"/></svg>

XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head></head> <body> <div id="container"><svg:svg width="100" height="100" > <svg:rect y="10" X="10" width="20" height="20"/> </svg:svg> </div> </body> </html>Inline

HTML5<!DOCTYPE HTML><html><head></head><body> <div id="container"><svg width="100" height="100" > <rect y="10" X="10" width="20" height="20"/> </svg> </div></body></html>Inline

Inline (scripting)<div id="container"> <svg width="100" height="100" > <rect id="myShape" y="10" X="10" width="20" height="20"/> </svg> </div>Core DOM (HTML and SVG documents)var shape = document.querySelector("#myShape");shape.setAttribute("width", 100); SVG DOM (SVG documents specific)var shape = document.querySelector("#myShape");shape.width.baseVal.value = 100; //FasterSVG on web pages

2D x-y planeviewBox defines visible areain IE9 default overflow != hidden<svgviewBox="0 0 343 501" >All element coordinates are absoluteSVG viewport

SVG capabilities overviewPrimitive shapesTextFill/StrokesGradientsPatternsFiltersScriptingMetadataSMIL(SynchronizedMultimediaIntegrated Language)Styling (CSS2)LinksGroupsTransformationsClipping PathsMaskingForeign ObjectsConditionalsDOM events

SVG primitive shapes<circle /><rect /><ellipse /><line /><polyline /><polygon /> <path />LinearQuadCubic

Selectable and searchableEven when following pathsJust another elementFill BorderTransformationsSVG text

Group elements, treat them as one<g id="aGroup"fill="orange"><rect x="20" y="30" width="40" height="40"/><circle cx="100" cy="100" r="10" /></g>Group

Element property, transform="…"Rotation, revolves element around point transform="rotate(degrees, cx, cy)"Scale, multiply all (x,y) coordinates transform="scale(xfactor, yfactor)"Translation, add (x,y) positions transform="translate(dx, dy)"Transform

Elements declared inside definitions are not rendered. Ideal for reusing elementsGradientsText pathsClipping pathsRepeated elements<defs> <circle id="dot"cx="10" cy="10" r="5"></defs><use xlink:href="#dot" transform="translate(120,0)" /><use xlink:href="#dot" transform="translate(120,100)" />Reuse

SVG capabilities overviewPrimitive shapesTextFill/StrokesGradientsPatternsFiltersScriptingMetadataSMIL(SynchronizedMultimediaIntegrated Language)Styling (CSS2)LinksGroupsTransformationsClipping PathsMaskingForeign ObjectsConditionalsDOM eventshttp://caniuse.com/#search=svg

Scale factorMultiscreen applicationsHigh fidelity graphicsText FormatAccessibility Version ControlSemantic

BandwithSmall filesizeChanges can be done in browseravoiding server round-tripGzip encoded .svgzServer must send reponse headerContent-Enconding: gzip

An SVG Primer for Today's Browsershttp://www.w3.org/Graphics/SVG/IG/resources/svgprimer.htmlByclosuregithub account http://github.com/Byclosure/SVG101RaphaelJShttp://raphaeljs.com/jQuery SVGhttp://keith-wood.name/svg.htmlInkscapehttp://inkscape.org/Visual Studio SVG schema Intelisense pluginhttp://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540SVGWeb (cross-browser support)http://code.google.com/p/svgweb/References

Market is adopting SVGDifferent ways to place SVG on HTMLSVG basic conceptsTools & FrameworksRecap

Check the demos.(http://github.com/Byclosure/SVG101)Go out and play!

Thank you.Questions?nuno.rosa@byclosure.com@yarcub

HTML5 and SVG

More Related Content

HTML5 and SVG

Editor's Notes