HTML5 and SVG

4,932 views
4,652 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,932
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
61
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • HTML5 and SVG

    1. 1.
    2. 2. HTML5 and SVG<br />Nuno Rosa<br />[Developer | Byclosure]<br />[nuno.rosa@byclosure.com]<br />[@yarcub]<br />
    3. 3. WHo<br />
    4. 4. WHere<br />
    5. 5. Agenda<br />HTML5 & SVG<br />Adoption<br />SVG 101<br />Why & where?<br />Q & A<br />
    6. 6. SVG is not HTML5...<br />
    7. 7. SVG is not HTML5...<br />...but they get along.<br />
    8. 8. Are we there yet?<br />Real world examples<br />
    9. 9. Bing Maps<br />Route paths<br />
    10. 10. Google Visualization API<br />On demand charts (e.g. Google Docs)<br />
    11. 11. Vexflow<br />Music notation rendering (http://vexflow.com)<br />
    12. 12. PepsiCo SXSW 2011 Zeitgeist<br />Twitter stream visualization (http://pepsicozeitgeist.com/)<br />
    13. 13. SVG 101<br />The basics<br />
    14. 14. Describes 2D vector images<br />Static<br />Animation<br />XML<br />Full DOM support<br />Scripting<br />Open standard (W3C)<br />Modern browsers support (no plugins)<br />Fallback options available<br />In a nutshell<br />
    15. 15. Standalone<br /><object data="myfile.svg" type="image/svg+xml" width="100" height="100"/><br /><embedsrc="myfile.svg" width="100" height="100"/><br /><iframesrc="myfile.svg" width="100" height="100"/><br /><imagesrc="myfile.svg" width="100" height="100"/><br />No scripting<br />{background-image: url('myfile.svg');}<br />No scripting<br />SVG on web pages<br />
    16. 16. Standalone (scripting)<br />HTML Document<br />SVG Document<br />SVG on web pages<br /><object id="svgContainer" data="myfile.svg" type="image/svg+xml" width="100" height="100"/><br />SVGDoc = document.getElementById("#svgContainer") .getSVGDocument();var element = SVGDoc.querySelector("#elementId");element.setAttribute("x", 100);<br /><svgxmlns="http://www.w3.org/2000/svg"> <rect id="elementId" width="10" height="10"/></svg><br />
    17. 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"><br /> <html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:svg="http://www.w3.org/2000/svg"><br /> <head></head><br /> <body><br /> <div id="container"><br /><svg:svg width="100" height="100" ><br /> <svg:rect y="10" X="10" width="20" height="20"/><br /> </svg:svg><br /> </div><br /> </body><br /> </html><br />Inline<br />
    18. 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><br />Inline<br />
    19. 19. Inline (scripting)<br /><div id="container"> <svg width="100" height="100" > <rect id="myShape" y="10" X="10" width="20" height="20"/> </svg> </div><br />Core DOM (HTML and SVG documents)var shape = document.querySelector("#myShape");shape.setAttribute("width", 100); <br />SVG DOM (SVG documents specific)var shape = document.querySelector("#myShape");shape.width.baseVal.value = 100; //Faster<br />SVG on web pages<br />
    20. 20. 2D x-y plane<br />viewBox defines visible area<br />in IE9 default overflow != hidden<br /><svgviewBox="0 0 343 501" ><br />All element coordinates are absolute<br />SVG viewport<br />
    21. 21. SVG capabilities overview<br />Primitive shapes<br />Text<br />Fill/Strokes<br />Gradients<br />Patterns<br />Filters<br />Scripting<br />Metadata<br />SMIL(SynchronizedMultimediaIntegrated Language)<br />Styling (CSS2)<br />Links<br />Groups<br />Transformations<br />Clipping Paths<br />Masking<br />Foreign Objects<br />Conditionals<br />DOM events<br />
    22. 22. SVG primitive shapes<br /><circle /><br /><rect /><br /><ellipse /><br /><line /><br /><polyline /><br /><polygon /><br /> <path /><br />Linear<br />Quad<br />Cubic<br />
    23. 23. Selectable and searchable<br />Even when following paths<br />Just another element<br />Fill <br />Border<br />Transformations<br />SVG text<br />
    24. 24. Group elements, treat them as one<br /><g id="aGroup"fill="orange"><rect x="20" y="30" width="40" height="40"/><circle cx="100" cy="100" r="10" /><br /></g><br />Group<br />
    25. 25. Element property, transform="…"<br />Rotation, revolves element around point<br /> transform="rotate(degrees, cx, cy)"<br />Scale, multiply all (x,y) coordinates<br /> transform="scale(xfactor, yfactor)"<br />Translation, add (x,y) positions<br /> transform="translate(dx, dy)"<br />Transform<br />
    26. 26. Elements declared inside definitions are not rendered. <br />Ideal for reusing elements<br />Gradients<br />Text paths<br />Clipping paths<br />Repeated elements<br /><defs><br /> <circle id="dot"cx="10" cy="10" r="5"><br /></defs><br /><use xlink:href="#dot" transform="translate(120,0)" /><br /><use xlink:href="#dot" transform="translate(120,100)" /><br />Reuse<br />
    27. 27. SVG capabilities overview<br />Primitive shapes<br />Text<br />Fill/Strokes<br />Gradients<br />Patterns<br />Filters<br />Scripting<br />Metadata<br />SMIL(SynchronizedMultimediaIntegrated Language)<br />Styling (CSS2)<br />Links<br />Groups<br />Transformations<br />Clipping Paths<br />Masking<br />Foreign Objects<br />Conditionals<br />DOM events<br />http://caniuse.com/#search=svg<br />
    28. 28. Why SVG?<br />Some advantages<br />
    29. 29. Scale factor<br />Multiscreen applications<br />High fidelity graphics<br />Text Format<br />Accessibility <br />Version Control<br />Semantic<br />
    30. 30. Bandwith<br />Small filesize<br />Changes can be done in browser<br />avoiding server round-trip<br />Gzip encoded .svgz<br />Server must send reponse headerContent-Enconding: gzip<br />
    31. 31. An SVG Primer for Today's Browsers<br />http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />Byclosuregithub account <br />http://github.com/Byclosure/SVG101<br />RaphaelJS<br />http://raphaeljs.com/<br />jQuery SVG<br />http://keith-wood.name/svg.html<br />Inkscape<br />http://inkscape.org/<br />Visual Studio SVG schema Intelisense plugin<br />http://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540<br />SVGWeb (cross-browser support)<br />http://code.google.com/p/svgweb/<br />References<br />
    32. 32. Market is adopting SVG<br />Different ways to place SVG on HTML<br />SVG basic concepts<br />Tools & Frameworks<br />Recap<br />
    33. 33. Check the demos.(http://github.com/Byclosure/SVG101)Go out and play!<br />
    34. 34. Thank you.Questions?<br />nuno.rosa@byclosure.com<br />@yarcub<br />

    ×