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


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, 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, @wiekatz
  2. 2. What’s all this, then? ble_Vector_Graphics ala 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" ""> <svg version="1.1" id="Layer_1" xmlns=""> <!-- 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? Source:
  6. 6. Fallbacks Modernizr is your friend! Source: Source (German):
  7. 7. Now for the fun part! Source: raph Source: snap sv +, afari 3.0+, Chrome 5.0 S supports Firefox 3.0+, + and Internet Explore Opera 9.5 r 6.0+ Dmitry Baranovskiy @DmitryBaranovsk ource: sn S Source: Source: Wikipedia (+) so much cooler! (-) early version (0.3) (-) sparse code examples in docu
  8. 8. Thank You! GitHub: Twitter: @wiekatz Blog: Email: Special thanks to Martina Freundorfer for a great pairing session to prepare this talk - Twitter: @heartbeaz