SlideShare a Scribd company logo
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 Icon System
SVG
ScalableVector Graphics
Scalable Vector Graphics
• XML based
• Made up of scalable vector shapes and paths.
• Lines, Circles, Polygons, Ellipse, etc.
• Can be used on websites
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 be used on the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!
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 be used for the web in 3 different ways.
• Can be styled and animated using CSS and JavaScript
• And so much more!
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/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
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

https://wordpress.org/plugins/svg-support/
• Code Snippet (functions.php)

https://css-tricks.com/snippets/wordpress/allow-svg-
through-wordpress-media-uploader/
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 Grunt)

https://github.com/jonathantneal/postcss-svg
4. Example usage:

background-image: url('images/icons/symbol-defs.svg#icon-menu');
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

https://github.com/jkphl/grunt-svg-sprite
SVG and CSS
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
SVG and CSS
SVG and JavaScript
(Animations)
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
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 Guide

https://svgontheweb.com/
• SVG - Mozilla Developer Network (MDN)

https://developer.mozilla.org/en-US/docs/Web/SVG
Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315

More Related Content

What's hot

Flash Platformアップデート
Flash PlatformアップデートFlash Platformアップデート
Flash Platformアップデート
Mariko Nishimura
 

What's hot (19)

Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
Build fast word press site in react in 30 mins with frontity
Build fast word press site in react in 30 mins   with frontityBuild fast word press site in react in 30 mins   with frontity
Build fast word press site in react in 30 mins with frontity
 
1.3にBrowserify組み合わせてイベント駆動にした話
1.3にBrowserify組み合わせてイベント駆動にした話1.3にBrowserify組み合わせてイベント駆動にした話
1.3にBrowserify組み合わせてイベント駆動にした話
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Getting Started with Vue.js
Getting Started with Vue.jsGetting Started with Vue.js
Getting Started with Vue.js
 
Don't let FaaS do a BaaS job
Don't let FaaS do a BaaS jobDon't let FaaS do a BaaS job
Don't let FaaS do a BaaS job
 
Integrating Apache Wookie with AEM by Rima Mittal and Ankit Gubrani
Integrating Apache Wookie with AEM by Rima Mittal and Ankit GubraniIntegrating Apache Wookie with AEM by Rima Mittal and Ankit Gubrani
Integrating Apache Wookie with AEM by Rima Mittal and Ankit Gubrani
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
 
Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPages
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Animate any - introduction
Animate any  - introductionAnimate any  - introduction
Animate any - introduction
 
Integrating Apache Wookie with AEM || AEM-Wookie Connector Tool
Integrating Apache Wookie with AEM || AEM-Wookie Connector ToolIntegrating Apache Wookie with AEM || AEM-Wookie Connector Tool
Integrating Apache Wookie with AEM || AEM-Wookie Connector Tool
 
Play Framework on Google App Engine
Play Framework on Google App EnginePlay Framework on Google App Engine
Play Framework on Google App Engine
 
Introduction to QC
Introduction to QCIntroduction to QC
Introduction to QC
 
Flash Platformアップデート
Flash PlatformアップデートFlash Platformアップデート
Flash Platformアップデート
 
Web App Infrastructure
Web App InfrastructureWeb App Infrastructure
Web App Infrastructure
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
 

Similar to SVG 101

Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First ReviewCanvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
Arvind Krishnaa
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
Mario Heiderich
 

Similar to SVG 101 (20)

SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
Streaming of SVG animations on the Web
Streaming of SVG animations on the WebStreaming of SVG animations on the Web
Streaming of SVG animations on the Web
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
 
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First ReviewCanvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
HTML5 Multimedia
HTML5 MultimediaHTML5 Multimedia
HTML5 Multimedia
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Next generation Graphics: SVG
Next generation Graphics: SVGNext generation Graphics: SVG
Next generation Graphics: SVG
 
Web Apps
Web AppsWeb Apps
Web Apps
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
 
Fastandbeautiful krakow
Fastandbeautiful krakowFastandbeautiful krakow
Fastandbeautiful krakow
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 

Recently uploaded

一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
anasabutalha2013
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 

Recently uploaded (20)

Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptx
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
bobbi goods amelie y ximena # Bobbie gods forever
bobbi goods amelie y ximena # Bobbie gods foreverbobbi goods amelie y ximena # Bobbie gods forever
bobbi goods amelie y ximena # Bobbie gods forever
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 

SVG 101