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.

1. Using SVG Graphics to Make the
World Wide Web a Better Place
Patrick Hund, mobile.de
@wiekatz

2. What’s all this, then?
ble_Vector_Graphics
ala
.wikipedia.org/wiki/Sc
http://en
Source: Wikipedia

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. 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. What About Browser Compatibility?
http://caniuse.com/svg
Source: caniuse.com

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. 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. 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