This document discusses using SVG icons on websites. It covers different formats for icons like PNG and icon fonts, then focuses on SVG. SVG is explained as scalable vector graphics in XML format that can contain paths and shapes. Benefits of SVG include scalability, performance, accessibility, and ability to style with CSS. The document demonstrates exporting SVG from tools, optimizing with SVGO, embedding SVG in HTML and CSS, using SVG icon systems, and animating SVG with libraries like GreenSock. Resources for further SVG information and use are provided.

1. SVG 101
WordCamp DC

2. Sang-Min Yoon
Front-End Developer

3. Social Media Icons

4. 1) PNG

5. 2) Sprites

6. 3) Retina

7. 4) Sprites with Retina

8. 5) Icon Font Libraries

9. 6) Custom Icon Fonts

10. 7) SVG

11. 8) SVG Icon Systems

12. 1. PNG
2. Sprites
3. Retina
4. Retina Sprites
5. Icon Font Libraries
6. Custom Icon Fonts
7. SVG (3 different ways)
8. SVG Icon System

13. SVG
ScalableVector Graphics

14. Scalable Vector Graphics
• XML based
• Made up of scalable vector shapes and paths.
• Lines, Circles, Polygons, Ellipse, etc.
• Can be used on websites

15. Applications

16. Video of exporting on AI and Sketch

17. Video of exporting on AI and Sketch

18. Code Editors

19. Video of editing SVG with Sublime

20. Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can be used on the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!

21. Vector vs Pixel

22. When to use SVG

23. Not for Raster Graphics
(Photographs)

24. SVG is only used by
4.0% of all Websites
Source: https://w3techs.com/technologies/details/im-svg/all/all

25. SVG was around since 2001

26. Browser Support

27. PSD

28. Sketch

29. Comfortable using PNGs
and Icon Fonts

30. Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can be used for the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!

31. No more excuses…
start using SVGs!

32. Using SVG on the Web

33. Optimize - SVGO
• Grunt-svgmin / Gulp-svgo
https://github.com/sindresorhus/grunt-svgmin
https://github.com/corneliusio/gulp-svgo
• svgo-compressor - Sketch plugin
https://github.com/BohemianCoding/svgo-compressor
• SVG-NOW - Illustrator plugin:
https://github.com/davidderaedt/SVG-NOW
• SVGO GUI
https://github.com/svg/svgo-gui

34. Video of using SVGO GUI

35. Using SVG on the Web
• As <img> tag in HTML
• Inline in HTML
• As CSS background image

36. As <img> tag

37. Inline in HTML

38. As CSS background image

39. Adding SVG through
WordPress Editor
• Core Trac Ticket
https://core.trac.wordpress.org/ticket/24251
• SVG Support plugin
https://wordpress.org/plugins/svg-support/
• Code Snippet (functions.php)
https://css-tricks.com/snippets/wordpress/allow-svg-
through-wordpress-media-uploader/

40. SVG Icon System

41. My Workflow
1. Export SVG
2. Upload to IcoMoon for symbol-defs.svg file
https://icomoon.io/
3. PostCSS SVG Plugin (Using Grunt)
https://github.com/jonathantneal/postcss-svg
4. Example usage:
background-image: url('images/icons/symbol-defs.svg#icon-menu');

42. Grunticon
• https://github.com/filamentgroup/grunticon
• http://www.grumpicon.com/

44. SVG Sprites Task Runners
• Gulp: gulp-svg-sprite
https://github.com/shakyShane/gulp-svg-sprites
• Grunt: grunt-svg-sprite
https://github.com/jkphl/grunt-svg-sprite

45. SVG and CSS

46. SVG and CSS
• SVG presentation attributes are becoming CSS properties
• alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-
interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-
baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-
family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-
orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing,
lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events,
shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset,
stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor,
text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode
• CSS animation is finally starting to make sense in the context of SVG

47. SVG and CSS

48. SVG and JavaScript
(Animations)

49. SVG Animation - GreenSock
• Great Browser Support
• Doesn’t rely on other library
• Support and documentation
• Funded
• Used by 2.5 million sites
• https://greensock.com/svg-tips

50. So much more with SVG
• Banners
• DataVisuals
• Illustrations
• Infographics
• And More!

51. Examples

52. Resources
• Mega List of SVG Information
https://css-tricks.com/mega-list-svg-information/
• SVG on the Web - A Practical Guide
https://svgontheweb.com/
• SVG - Mozilla Developer Network (MDN)
https://developer.mozilla.org/en-US/docs/Web/SVG

53. Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315