Post on 15-May-2015
HTML5 and SVG
Nuno Rosa[Developer | Byclosure][nuno.rosa@byclosure.com][@yarcub]
WHO
WHERE
AgendaHTML5 & SVGAdoptionSVG 101Why & where?Q & A
SVG is not HTML5...
SVG is not HTML5...
... but they get along.
ARE WE THERE YET?Real world examples
Bing MapsRoute paths
Google Visualization APIOn demand charts (e.g. Google Docs)
PepsiCo SXSW 2011 ZeitgeistTwitter stream visualization (http://pepsicozeitgeist.com/)
SVG 101The basics
Describes 2D vector imagesStaticAnimation
XMLFull DOM support
Scripting
Open standard (W3C)Modern browsers support (no plugins)
Fallback options available
In a nutshell
Standalone<object data="myfile.svg"
type="image/svg+xml" width="100" height="100"/><embed src="myfile.svg" width="100"
height="100"/><iframe src="myfile.svg" width="100"
height="100"/><image src="myfile.svg" width="100"
height="100"/>No scripting
{background-image: url('myfile.svg');}No scripting
SVG on web pages
Standalone (scripting)HTML Document
SVG Document
SVG 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);
<svg xmlns="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; //Faster
SVG on web pages
2D x-y plane
viewBox defines visible areain IE9 default overflow != hidden<svg viewBox="0 0 343 501" >
All element coordinates are absolute
SVG viewport
SVG capabilities overviewPrimitive shapes
Text
Fill/Strokes
Gradients
Patterns
Filters
Scripting
Metadata
SMIL(Synchronized MultimediaIntegrated Language)
Styling (CSS2)
Links
Groups
Transformations
Clipping Paths
Masking
Foreign Objects
Conditionals
DOM events
SVG primitive shapes
<circle />
<rect />
<ellipse />
<line />
<polyline />
<polygon />
<path />LinearQuadCubic
Selectable and searchableEven when following paths
Just another elementFill BorderTransformations
SVG 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 pointtransform="rotate(degrees, cx, cy)"
Scale, multiply all (x,y) coordinatestransform="scale(xfactor, yfactor)"
Translation, add (x,y) positionstransform="translate(dx, dy)"
Transform
Elements declared inside definitions are not rendered. Ideal for reusing elements
GradientsText 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 shapes
Text
Fill/Strokes
Gradients
Patterns
Filters
Scripting
Metadata
SMIL(Synchronized MultimediaIntegrated Language)
Styling (CSS2)
Links
Groups
Transformations
Clipping Paths
Masking
Foreign Objects
Conditionals
DOM events
http://caniuse.com/#search=svg
WHY SVG?Some advantages
Scale factorMultiscreen applicationsHigh fidelity graphics
Text FormatAccessibility Version ControlSemantic
BandwithSmall filesizeChanges can be done in browser
avoiding server round-trip
Gzip encoded .svgzServer must send reponse headerContent-Enconding: gzip
An SVG Primer for Today's Browsershttp://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
Byclosure github account http://github.com/Byclosure/SVG101
RaphaelJShttp://raphaeljs.com/
jQuery SVGhttp://keith-wood.name/svg.html
Inkscapehttp://inkscape.org/
Visual Studio SVG schema Intelisense pluginhttp://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540
SVGWeb (cross-browser support)http://code.google.com/p/svgweb/
References
Market is adopting SVGDifferent ways to place SVG on HTMLSVG basic conceptsTools & Frameworks
Recap
Check the demos.(http://github.com/Byclosure/SVG101)
Go out and play!
Thank you.Questions?
@yarcubnuno.rosa@byclosure.com