Using SVG Graphics to Make the World Wide Web a Better Place

4,008 views

Published on

Scalable vector graphics (SVG) are a great way to reduce your page load times and have scalable images for all devices and screen resolutions. But that’s not all - you can even manipulate your SVGs any way you choose with JavaScript, just as you can manipulate your web page’s DOM. This opens up a world of creative possibilities. A great tool to leverage these possibilities is the JavaScript library snap.svg.

Patrick Hund, web developer at mobile.de, demonstrates how to do this with some live coding examples.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Using SVG Graphics to Make the World Wide Web a Better Place

  1. 1. Using SVG Graphics to Make the World Wide Web a Better Place Patrick Hund, mobile.de @wiekatz
  2. 2. What’s all this, then? ble_Vector_Graphics ala .wikipedia.org/wiki/Sc http://en Source: Wikipedia
  3. 3. Markup for Defining Graphics <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <!-- face --> <circle fill="#FFFF00" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="382.553" cy="306.786" r="217.961"/> <!-- mouth --> <path fill="#FFFF00" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M244.689,329.602 C315.563,498.534,484.495,479.116,531.583,333"/> <!-- eyes --> <ellipse cx="337.592" cy=„233.485“ rx="21.359" ry="49.272"/> <ellipse cx="422.592" cy=„232.485“ rx="21.359" ry="49.272"/> </svg>
  4. 4. Why Should I Care? • Scalable - no more different versions for responsive web design and retina • Light-weight files (use compression for complex files) • SVG markup can be manipulated for animation and user interaction
  5. 5. What About Browser Compatibility? http://caniuse.com/svg Source: caniuse.com
  6. 6. Fallbacks Modernizr is your friend! http://modernizr.com/ Source: modernizr.com Source (German): http://blog.kulturbanause.de/2013/09/svg-mit-png-fallback/
  7. 7. Now for the fun part! aeljs.com Source: raph Source: snap sv g.io +, afari 3.0+, Chrome 5.0 S supports Firefox 3.0+, + and Internet Explore Opera 9.5 r 6.0+ Dmitry Baranovskiy @DmitryBaranovsk apsvg.io ource: sn S Source: dmitry.baranovskiy.com Source: Wikipedia (+) so much cooler! (-) early version (0.3) (-) sparse code examples in docu
  8. 8. Thank You! GitHub: github.com/pahund Twitter: @wiekatz Blog: technology.ebay.de Email: pahund@team.mobile.de Special thanks to Martina Freundorfer for a great pairing session to prepare this talk - Twitter: @heartbeaz

×