Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SVG 101
WordCamp DC
Sang-Min Yoon
Front-End Developer
Social Media Icons
1) PNG
2) Sprites
3) Retina
4) Sprites with Retina
5) Icon Font Libraries
6) Custom Icon Fonts
7) SVG
8) SVG Icon Systems
1. PNG
2. Sprites
3. Retina
4. Retina Sprites
5. Icon Font Libraries
6. Custom Icon Fonts
7. SVG (3 different ways)
8. SVG...
SVG
ScalableVector Graphics
Scalable Vector Graphics
• XML based
• Made up of scalable vector shapes and paths.
• Lines, Circles, Polygons, Ellipse, e...
Applications
Video of exporting on AI and Sketch
Video of exporting on AI and Sketch
Code Editors
Video of editing SVG with Sublime
Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can...
Vector vs Pixel
When to use SVG
Not for Raster Graphics
(Photographs)
SVG is only used by 

4.0% of all Websites
Source: https://w3techs.com/technologies/details/im-svg/all/all
SVG was around since 2001
Browser Support
PSD
Sketch
Comfortable using PNGs 

and Icon Fonts
Why use SVG
• Scales better because it’s vector based
• More performant than jpeg, png, and icon fonts.
• Accessible
• Can...
No more excuses… 

start using SVGs!
Using SVG on the Web
Optimize - SVGO
• Grunt-svgmin / Gulp-svgo

https://github.com/sindresorhus/grunt-svgmin

https://github.com/corneliusio/g...
Video of using SVGO GUI
Using SVG on the Web
• As <img> tag in HTML
• Inline in HTML
• As CSS background image
As <img> tag
Inline in HTML
As CSS background image
Adding SVG through
WordPress Editor
• Core Trac Ticket 

https://core.trac.wordpress.org/ticket/24251
• SVG Support plugin...
SVG Icon System
My Workflow
1. Export SVG
2. Upload to IcoMoon for symbol-defs.svg file

https://icomoon.io/
3. PostCSS SVG Plugin (Using Gr...
Grunticon
• https://github.com/filamentgroup/grunticon
• http://www.grumpicon.com/
SVG Sprites Task Runners
• Gulp: gulp-svg-sprite

https://github.com/shakyShane/gulp-svg-sprites
• Grunt: grunt-svg-sprite...
SVG and CSS
SVG and CSS
• SVG presentation attributes are becoming CSS properties
• alignment-baseline, baseline-shift, clip, clip-pat...
SVG and CSS
SVG and JavaScript
(Animations)
SVG Animation - GreenSock
• Great Browser Support
• Doesn’t rely on other library
• Support and documentation
• Funded
• U...
So much more with SVG
• Banners
• DataVisuals
• Illustrations
• Infographics
• And More!
Examples
Resources
• Mega List of SVG Information

https://css-tricks.com/mega-list-svg-information/
• SVG on the Web - A Practical...
Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315
SVG 101
Upcoming SlideShare
Loading in …5
×

SVG 101

320 views

Published on

WordCamp DC 2017: https://2017.dc.wordcamp.org/session/svg-101/

Published in: Design
  • Be the first to comment

  • Be the first to like this

SVG 101

  1. 1. SVG 101 WordCamp DC
  2. 2. Sang-Min Yoon Front-End Developer
  3. 3. Social Media Icons
  4. 4. 1) PNG
  5. 5. 2) Sprites
  6. 6. 3) Retina
  7. 7. 4) Sprites with Retina
  8. 8. 5) Icon Font Libraries
  9. 9. 6) Custom Icon Fonts
  10. 10. 7) SVG
  11. 11. 8) SVG Icon Systems
  12. 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. 13. SVG ScalableVector Graphics
  14. 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. 15. Applications
  16. 16. Video of exporting on AI and Sketch
  17. 17. Video of exporting on AI and Sketch
  18. 18. Code Editors
  19. 19. Video of editing SVG with Sublime
  20. 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. 21. Vector vs Pixel
  22. 22. When to use SVG
  23. 23. Not for Raster Graphics (Photographs)
  24. 24. SVG is only used by 
 4.0% of all Websites Source: https://w3techs.com/technologies/details/im-svg/all/all
  25. 25. SVG was around since 2001
  26. 26. Browser Support
  27. 27. PSD
  28. 28. Sketch
  29. 29. Comfortable using PNGs 
 and Icon Fonts
  30. 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. 31. No more excuses… 
 start using SVGs!
  32. 32. Using SVG on the Web
  33. 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. 34. Video of using SVGO GUI
  35. 35. Using SVG on the Web • As <img> tag in HTML • Inline in HTML • As CSS background image
  36. 36. As <img> tag
  37. 37. Inline in HTML
  38. 38. As CSS background image
  39. 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. 40. SVG Icon System
  41. 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. 42. Grunticon • https://github.com/filamentgroup/grunticon • http://www.grumpicon.com/
  43. 43. 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
  44. 44. SVG and CSS
  45. 45. 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
  46. 46. SVG and CSS
  47. 47. SVG and JavaScript (Animations)
  48. 48. 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
  49. 49. So much more with SVG • Banners • DataVisuals • Illustrations • Infographics • And More!
  50. 50. Examples
  51. 51. 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
  52. 52. Thank You Email: info@SangMinYoon.com Twitter: @SMY315

×