svg strikes back
DESCRIPTION
SVG was first introduced on the web in 2001 and finally came around to being a practical web technology in 2011. Thanks to wide browser support and the popularity of retina screens, SVG is a powerful and flexible technology that everyone should have in their web development toolbox. In this talk, I'll tell you why should be using SVGs now and how to integrate SVGs into responsive websites, use it in iconography for resolution independence, and use JavaScript and CSS to create animations and interactive prototypes. I gave this talk at Front Porch in Dallas, TX on October 7th. http://frontporch.io/TRANSCRIPT
SVGST R I K E S B AC K
Matt Baxter • @mbxtr • October 7, 2014
Matt Baxter @mbxtr
UX Designer Design + Code
SV-WHAT?
Scalable Vector Graphics
So Very Good
SVGis an open graphics standard, made for the web, based on XML.
SVGis for any illustrated image.
Logos
Logos
Icons
Icons
LOLcats
LOLcats
Scalability
Vector Raster
Vector Raster
Scalability
File Size
SVG (2kb) PNG (88kb)512x512
True resolution independence
Responsive design is more than just
mobile/tablet/desktop
a
SVG is Old(in web years, anyways)
1.0 Recommendation
…back in 2001
Where has it been for 13 years?
2001 2006
2005
2011
The need for resolution-independent images is
greater than ever.
Screens in 2001
http://www.nngroup.com/articles/computer-screens-getting-bigger/
65% 800x600
30% 1024x768
Screens in 2014
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
Pixel density in 2001
1x
(standard monitor)
Pixel density in 2014iOS
1x
2x
3x
LDPI
HDPI
XXHDPI
MDPI
XHDPI
XXXHDPI
Android
SVG was made for the
multi-device web.
Desktop Support
All modern desktopbrowsers (IE 9+)
http://caniuse.com/#feat=svg
Mobile Support
All modern mobilebrowsers (Android 4+)
http://caniuse.com/#feat=svg
Drawbacks?None
(with correct images and fallbacks)
Finally, SVG is a practical web technology.
If it can be SVG, it should be SVG.
CREATING SVG
Manually
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
Good luck with that!
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
But seriously, it can be useful to
know a little.
Vector Programs
Illustrator Sketch Inkscape
My weapon of choice
Vector Programs
Be careful with this. Your SVG won’t have a width/height and Internet Explorer
may not render correctly.
https://github.com/svg/svgo
Optimize with SVGO
USING SVG
Just like any other image
CSS Fallback
Inline Fallback
What about icon fonts?
• Are difficult to position • Use a single color • Annoying to update • Browser inconsistencies
Icon fonts…
• Precision positioning • Multiple colors • Simple to update • Better browser consistency
SVG…
To Recap…
• Resolution independent • Small in file size • Cross-browser compatible • Simple to use
SVG is…
• Resolution independent • Small in file size • Cross-browser compatible • Simple to use
SVG is…
Start using it today!
But, that’s not all…
Since it’s XML…
THE DOM
Inject into HTML
Inspect w/ Dev Tools
http://www.opera.com/docs/specs/presto25/svg/cssproperties/
Style with CSS
CSS Transitions
Media Queries
Attach Events
SVG.JS
http://svgjs.com
SVG.JS
Trianglify (D3.js)
http://qrohlf.com/trianglify/
http://tomgermeau.com/2014/02/how-designers-can-create-interactive-prototypes-with-illustrator/
PROTOTYPE
Wireframes
Organize Layers
Export to SVGThis time, we
want responsive.
Load into HTML
Add Interactivity
Start Local Server
Set Emulation
Set Emulation
Open Browser
AND MORE
http://css-tricks.com/mega-list-svg-information/
THANKS!Slides:
http://bit.ly/svg-strikes-back
Tweet at me: @mbxtr