![HTML5 and SVG Nuno Rosa [Developer | Byclosure] [nuno.rosa@byclosure.com] [@yarcub]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a HTML5 and SVG
Semelhante a HTML5 and SVG (20)
Último
Último (20)
HTML5 and SVG
- 2. HTML5 and SVG Nuno Rosa [Developer | Byclosure] [nuno.rosa@byclosure.com] [@yarcub]
- 3. WHo
- 4. WHere
- 5. Agenda HTML5 & SVG Adoption SVG 101 Why & where? Q & A
- 6. SVG is not HTML5...
- 7. SVG is not HTML5... ...but they get along.
- 8. Are we there yet? Real world examples
- 9. Bing Maps Route paths
- 10. Google Visualization API On demand charts (e.g. Google Docs)
- 11. Vexflow Music notation rendering (http://vexflow.com)
- 12. PepsiCo SXSW 2011 Zeitgeist Twitter stream visualization (http://pepsicozeitgeist.com/)
- 13. SVG 101 The basics
- 14. Describes 2D vector images Static Animation XML Full DOM support Scripting Open standard (W3C) Modern browsers support (no plugins) Fallback options available In a nutshell
- 15. 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 scripting SVG on web pages
- 16. 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); <svgxmlns="http://www.w3.org/2000/svg"> <rect id="elementId" width="10" height="10"/></svg>
- 17. 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
- 18. 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
- 19. 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
- 20. 2D x-y plane viewBox defines visible area in IE9 default overflow != hidden <svgviewBox="0 0 343 501" > All element coordinates are absolute SVG viewport
- 21. SVG capabilities overview Primitive shapes Text Fill/Strokes Gradients Patterns Filters Scripting Metadata SMIL(SynchronizedMultimediaIntegrated Language) Styling (CSS2) Links Groups Transformations Clipping Paths Masking Foreign Objects Conditionals DOM events
- 22. SVG primitive shapes <circle /> <rect /> <ellipse /> <line /> <polyline /> <polygon /> <path /> Linear Quad Cubic
- 23. Selectable and searchable Even when following paths Just another element Fill Border Transformations SVG text
- 24. 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
- 25. 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
- 26. Elements declared inside definitions are not rendered. Ideal for reusing elements Gradients Text paths Clipping paths Repeated 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
- 27. SVG capabilities overview Primitive shapes Text Fill/Strokes Gradients Patterns Filters Scripting Metadata SMIL(SynchronizedMultimediaIntegrated Language) Styling (CSS2) Links Groups Transformations Clipping Paths Masking Foreign Objects Conditionals DOM events http://caniuse.com/#search=svg
- 28. Why SVG? Some advantages
- 29. Scale factor Multiscreen applications High fidelity graphics Text Format Accessibility Version Control Semantic
- 30. Bandwith Small filesize Changes can be done in browser avoiding server round-trip Gzip encoded .svgz Server must send reponse headerContent-Enconding: gzip
- 31. An SVG Primer for Today's Browsers http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html Byclosuregithub account http://github.com/Byclosure/SVG101 RaphaelJS http://raphaeljs.com/ jQuery SVG http://keith-wood.name/svg.html Inkscape http://inkscape.org/ Visual Studio SVG schema Intelisense plugin http://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540 SVGWeb (cross-browser support) http://code.google.com/p/svgweb/ References
- 32. Market is adopting SVG Different ways to place SVG on HTML SVG basic concepts Tools & Frameworks Recap
- 33. Check the demos.(http://github.com/Byclosure/SVG101)Go out and play!
- 34. Thank you.Questions? nuno.rosa@byclosure.com @yarcub
Notas do Editor
- Primeiros minutos muito importantes
- Separar documentos.
- For example, if an HTML implementation also supports SVG, then the Document object implements both HTMLDocument and SVGDocument.
- Same file with “sprite sheet” containing multiple elements.Embed the same object in several web page locations but with different viewboxs.SHOW SVG FILE DEMO (change viewport)
- SHOW DEMO: 01_primitives.htmlpoint-in-polygon: uma linha horizontal se cruzar um múmero de fronteiras impar(dentro) ou par(fora)
- Mostrar exemplo do texto
- SHOW REUSE EXAMPLE.In retrospective, recap code for TEXT EXAMPLE