Let's use SVG

SVG is the future of web graphics. Scaling beautifully not matter the pixel density or the device size, SVG brings images to life. We will talk about use cases, pros and cons, even animating graphics.

Transcript

1. Let’s <use> SVG Refresh Baton Rouge, November 2014 Quinton Jason Jr - @quintonjasonjr - quintonjason.com
2. Lead Web Developer
3. Why SVG?
5. • Resolution Independence • Small file size • Accessibility • Interactivity • Filters and Blend Modes
6. Accessible SVG • <svg> • <title><desc> • <text> • ARIA role http://www.sitepoint.com/tips-accessible-svg/
7. fishadelic.jpg 213 KB
8. fishadelic.svg 19 KB
9. GZIP
10. fishadelic.svg GZIPPED 3.8 KB
11. Shapes
13. 3.18% 0.19%
14. Creating SVGs
15. SVG Editing Software Illustrator Sketch Inkscape
17. Saving SVG
18. AI Export Settings
19. Optimize SVG http://petercollingridge.appspot.com/svg-editor
20. Configuring .htaccess
21. Embedding SVG
22. SVG as HTML IMG
24. SVG as CSS Background!
26. <object>
27. <iframe>
28. <embed>
29. SVG Styling
30. Presentation Attributes
31. Inline CSS
32. Internal CSS
33. External Stylesheet
34. Responsive SVG
35. background-image
37. <img>
38. <object>
39. Padding Hack 1. Remove height/width 2. Set viewbox 3. Wrap SVG in container 4. Use Intrinsic Ratio for container
40. Intrinsic Ratio
41. <iframe>
42. <svg>
43. Adaptive SVG
44. Inline SVG
47. SVG Animation
48. 1.CSS Animations! 2.SMIL Animations! 3.Javascript Animations
49. CSS Stylable Attr.
52. CSS Transforms
53. Synchronized! Multimedia! Integration! Language
55. SMIL <animate />
56. SMIL Path Morphing http://tavmjong.free.fr/blog/?p=741
57. Batman Source view-source:http://tavmjong.free.fr/blog/wp-content/uploads/BATMAN/batman_logos.svg
58. Light Sources Animation http://css-tricks.com/look-svg-light-source-filters/
59. Icon System
60. Icon Fonts / Image Sprites • Anti-aliasing • Limited CSS control • @font-face weirdness • Positioning
61. <symbol>
62. <defs>
63. <use>
66. https://icomoon.io/
71. Resources
72. https://github.com/willianjusten/awesome-svg
73. http://css-tricks.com/mega-list-svg-information/
74. Thanks!!!