Your SlideShare is downloading. ×
0
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,060

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 …

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,060
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×