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/

1. SVG STRIKES BACK
Matt Baxter • @mbxtr • October 7, 2014

2. Matt Baxter
@mbxtr

4. UX Designer
Design + Code

5. SV-WHAT?

6. Scalable
Vector
Graphics

7. So
Very
Good

8. SVG
is an open graphics
standard, made for the
web, based on XML.

9. SVG
is for any illustrated
image.

10. Logos

11. Logos

12. Icons

13. Icons

14. LOLcats

15. LOLcats

16. Scalability
Vector Raster

17. Scalability
Vector Raster

18. File Size
512x512
SVG (2kb) PNG (88kb)

19. True resolution
independence

20. Responsive design is
more than just
mobile/tablet/desktop
a

21. SVG is Old
(in web years, anyways)

22. 1.0 Recommendation
…back in 2001

23. Where has it been
for 13 years?

24. 2001 2006
2005
2011

25. The need for resolution-independent
images is
greater than ever.

26. Screens in 2001
65%
800x600
30%
1024x768
http://www.nngroup.com/articles/computer-screens-getting-bigger/

27. Screens in 2014
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

28. Pixel density in 2001
1x
(standard monitor)

29. Pixel density in 2014
iOS
1x
2x
3x
Android
LDPI
HDPI
XXHDPI
MDPI
XHDPI
XXXHDPI

30. SVG was
made for the
multi-device web.

31. Desktop Support
All modern desktop
browsers (IE 9+)
http://caniuse.com/#feat=svg

32. Mobile Support
All modern mobile
browsers (Android 4+)
http://caniuse.com/#feat=svg

33. Drawbacks?
None
(with correct images
and fallbacks)

34. Finally, SVG is a
practical web
technology.

35. If it can be SVG,
it should be SVG.

36. CREATING
SVG

37. Manually

38. https://developer.mozilla.org/en-US/docs/Web/SVG/Element

39. Good luck
with that!
https://developer.mozilla.org/en-US/docs/Web/SVG/Element

40. But seriously, it
can be useful to
know a little.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element

41. Vector Programs
Illustrator Sketch Inkscape

42. Vector Programs
My weapon of choice

45. Be careful with this.
Your SVG won’t have a width/
height and Internet Explorer
may not render correctly.

47. Optimize with SVGO
https://github.com/svg/svgo

48. USING
SVG

49. Just like any other image

50. CSS Fallback

51. Inline Fallback

52. What about
icon fonts?

53. Icon fonts…
• Are difficult to position
• Use a single color
• Annoying to update
• Browser inconsistencies

54. SVG…
• Precision positioning
• Multiple colors
• Simple to update
• Better browser consistency

55. To Recap…

56. SVG is…
• Resolution independent
• Small in file size
• Cross-browser compatible
• Simple to use

57. SVG is…
• Resolution independent
• Small in file size
• Cross-browser compatible
• Simple to use
Start using it today!

58. But, that’s
not all…

59. Since it’s XML…

60. THE DOM

61. Inject into HTML

62. Inspect w/ Dev Tools

64. Style with CSS
http://www.opera.com/docs/specs/presto25/svg/cssproperties/

65. CSS Transitions

66. Media Queries

68. Attach Events

69. SVG.JS
http://svgjs.com

70. SVG.JS

71. Trianglify (D3.js)
http://qrohlf.com/trianglify/

72. PROTOTYPE
http://tomgermeau.com/2014/02/how-designers-can-create-
interactive-prototypes-with-illustrator/

73. Wireframes

74. Organize Layers

75. Export to SVG
This time, we
want responsive.

77. Load into HTML

78. Add Interactivity

81. Start Local Server

82. Set Emulation

83. Set Emulation

84. Open Browser

86. AND MORE

87. http://css-tricks.com/mega-list-svg-information/

88. THANKS!
Slides:
http://bit.ly/svg-strikes-back
Tweet at me:
@mbxtr