Session slides from the Future Insights Live, Vegas 2015 event: https://futureinsightslive.com/las-vegas-2015/ SVG is more than just an image format. It’s a solution that solves many problems with today’s rapidly growing web, especially in responsive design. SVG also contains many features to enhance the user's experience: accessibility, resolution independence, and interactivity. We'll see why we should use SVG, how to style SVG using CSS, how to animate SVG to bring the web to life, and much more.

1. USE SVG TO BRING
THE WEB TO LIFE
Quinton Jason Jr
@quintonjasonjr
thinkx.net/svg

3. WHY SVG?

5. Resolution Independence
Small File Size
Accessibility
Interactivity
Filters and Blend Modes

6. 123 KB
fishadelic.jpg

8. 34 KB

9. GZIP COMPRESSION

11. 6.8 KB

14. STYLING SVG

15. PRESENTATION ATTRIBUTES

16. INLINE CSS

17. EXTERNAL CSS

18. EMBEDDING SVG

19. <IMG>

20. SVG AS CSS BACKGROUND

21. <OBJECT>
<IFRAME>
<EMBED>

22. WHICH DO I USE?

23. FALLBACKS
https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

24. RESPONSIVE SVG

25. CSS

26. <IMG>
<OBJECT>

27. <IFRAME>

28. <SVG>

29. ADAPTIVE SVG
Different images at different breakpoint points

30. CSS TRANSFORMS (GOOD)

31. CSS TRANSFORMS (GOOD)

32. CSS TRANSFORMS (BAD)

33. IE and Opera don't support CSS Transforms
Firefox doesn't support % based transform-origin
Safari zooming breaks % or px based origins
CSS TRANSFORMS (BAD)

34. <TEXTPATH>

35. Some random text Some random
TEXT ALONG A PATH

36. Fr
ANIMATE TEXT ALONG A PATH

37. Some random text Some random

39. 2005
Batman Begins
Movie
SMIL PATH MORPHING
http://tavmjong.free.fr/blog/?p=741

40. TRIGGERED MORPHING
http://codepen.io/chriscoyier/pen/DpFfE/

42. http://alexk111.github.io/SVG-Morpheus/

43. TEXT EFFECTS

44. Can Contain All Type of SVG shapes and images
Simple or Complex
Resized without losing shape
PATTERNS

45. TEXT FILLS
XXDDEESSIIGGNN

46. TEXT STROKE
CREEPYCREEPYCREEPYCREEPYCREEPY

47. FORM ELEMENTS

48. SVG AS SUBMIT BUTTON
http://tympanus.net/Tutorials/CircularProgressButton/

49. FILTER EFFECTS

50. MOTION BLUR
http://codepen.io/lbebber/pen/zxpMZw

51. GLITCH EFFECT
http://codepen.io/lbebber/pen/qEjRYd/

52. GOOEY EFFECT
4 3
2 1
http://codepen.io/lbebber/pen/OPjxZL/

53. Use Inline SVG
Provide a <title>
Provide a <desc>ription
Use <text>
Give it an ARIA role
ACCESSIBILITY
http://www.sitepoint.com/tips-accessible-svg/

54. BE EXPRESSIVE

56. RESOURCES

57. https://github.com/willianjusten/awesome-svg

59. http://tympanus.net/codrops/?s=svg&search-type=posts