Successfully reported this slideshow.
Your SlideShare is downloading. ×

SVG 101

Ad

SVG 101
WordCamp DC

Ad

Sang-Min Yoon
Front-End Developer

Ad

Social Media Icons

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 53 Ad
1 of 53 Ad
Advertisement

More Related Content

Advertisement

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

×