SlideShare a Scribd company logo
1 of 88
Download to read offline
SVG STRIKES BACK 
Matt Baxter • @mbxtr • October 7, 2014
Matt Baxter 
@mbxtr
UX Designer 
Design + Code
SV-WHAT?
Scalable 
Vector 
Graphics
So 
Very 
Good
SVG 
is an open graphics 
standard, made for the 
web, based on XML.
SVG 
is for any illustrated 
image.
Logos
Logos
Icons
Icons
LOLcats
LOLcats
Scalability 
Vector Raster
Scalability 
Vector Raster
File Size 
512x512 
SVG (2kb) PNG (88kb)
True resolution 
independence
Responsive design is 
more than just 
mobile/tablet/desktop 
a
SVG is Old 
(in web years, anyways)
1.0 Recommendation 
…back in 2001
Where has it been 
for 13 years?
2001 2006 
2005 
2011
The need for resolution-independent 
images is 
greater than ever.
Screens in 2001 
65% 
800x600 
30% 
1024x768 
http://www.nngroup.com/articles/computer-screens-getting-bigger/
Screens in 2014 
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
Pixel density in 2001 
1x 
(standard monitor)
Pixel density in 2014 
iOS 
1x 
2x 
3x 
Android 
LDPI 
HDPI 
XXHDPI 
MDPI 
XHDPI 
XXXHDPI
SVG was 
made for the 
multi-device web.
Desktop Support 
All modern desktop 
browsers (IE 9+) 
http://caniuse.com/#feat=svg
Mobile Support 
All modern mobile 
browsers (Android 4+) 
http://caniuse.com/#feat=svg
Drawbacks? 
None 
(with correct images 
and fallbacks)
Finally, SVG is a 
practical web 
technology.
If it can be SVG, 
it should be SVG.
CREATING 
SVG
Manually
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
Good luck 
with that! 
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
But seriously, it 
can be useful to 
know a little. 
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
Vector Programs 
Illustrator Sketch Inkscape
Vector Programs 
My weapon of choice
Be careful with this. 
Your SVG won’t have a width/ 
height and Internet Explorer 
may not render correctly.
Optimize with SVGO 
https://github.com/svg/svgo
USING 
SVG
Just like any other image
CSS Fallback
Inline Fallback
What about 
icon fonts?
Icon fonts… 
• Are difficult to position 
• Use a single color 
• Annoying to update 
• Browser inconsistencies
SVG… 
• Precision positioning 
• Multiple colors 
• Simple to update 
• Better browser consistency
To Recap…
SVG is… 
• Resolution independent 
• Small in file size 
• Cross-browser compatible 
• Simple to use
SVG is… 
• Resolution independent 
• Small in file size 
• Cross-browser compatible 
• Simple to use 
Start using it today!
But, that’s 
not all…
Since it’s XML…
THE DOM
Inject into HTML
Inspect w/ Dev Tools
Style with CSS 
http://www.opera.com/docs/specs/presto25/svg/cssproperties/
CSS Transitions
Media Queries
Attach Events
SVG.JS 
http://svgjs.com
SVG.JS
Trianglify (D3.js) 
http://qrohlf.com/trianglify/
PROTOTYPE 
http://tomgermeau.com/2014/02/how-designers-can-create- 
interactive-prototypes-with-illustrator/
Wireframes
Organize Layers
Export to SVG 
This time, we 
want responsive.
Load into HTML
Add Interactivity
Start Local Server
Set Emulation
Set Emulation
Open Browser
AND MORE
http://css-tricks.com/mega-list-svg-information/
THANKS! 
Slides: 
http://bit.ly/svg-strikes-back 
Tweet at me: 
@mbxtr

More Related Content

Viewers also liked

How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)sarah semark
 
Surviving the Enterprise Storm - Designing in Complex Organizations
Surviving the Enterprise Storm - Designing in Complex OrganizationsSurviving the Enterprise Storm - Designing in Complex Organizations
Surviving the Enterprise Storm - Designing in Complex OrganizationsRian van der Merwe
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner UnicornMatt Baxter
 
The Essentials of Great Product Design
The Essentials of Great Product DesignThe Essentials of Great Product Design
The Essentials of Great Product DesignMatt Baxter
 
Combining user insights, analytics and design to drive change and product inn...
Combining user insights, analytics and design to drive change and product inn...Combining user insights, analytics and design to drive change and product inn...
Combining user insights, analytics and design to drive change and product inn...Rian van der Merwe
 
Roadmap to serenity - How to stay sane as a Product Owner
Roadmap to serenity - How to stay sane as a Product OwnerRoadmap to serenity - How to stay sane as a Product Owner
Roadmap to serenity - How to stay sane as a Product OwnerRian van der Merwe
 
Jobs to Be Done :: Overview and Interview Technique
Jobs to Be Done :: Overview and Interview TechniqueJobs to Be Done :: Overview and Interview Technique
Jobs to Be Done :: Overview and Interview TechniqueBrian Rhea
 

Viewers also liked (8)

How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)How i learned to stop using icon fonts and love svg (again)
How i learned to stop using icon fonts and love svg (again)
 
Surviving the Enterprise Storm - Designing in Complex Organizations
Surviving the Enterprise Storm - Designing in Complex OrganizationsSurviving the Enterprise Storm - Designing in Complex Organizations
Surviving the Enterprise Storm - Designing in Complex Organizations
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
 
The Essentials of Great Product Design
The Essentials of Great Product DesignThe Essentials of Great Product Design
The Essentials of Great Product Design
 
The End Of MSRP
The End Of MSRPThe End Of MSRP
The End Of MSRP
 
Combining user insights, analytics and design to drive change and product inn...
Combining user insights, analytics and design to drive change and product inn...Combining user insights, analytics and design to drive change and product inn...
Combining user insights, analytics and design to drive change and product inn...
 
Roadmap to serenity - How to stay sane as a Product Owner
Roadmap to serenity - How to stay sane as a Product OwnerRoadmap to serenity - How to stay sane as a Product Owner
Roadmap to serenity - How to stay sane as a Product Owner
 
Jobs to Be Done :: Overview and Interview Technique
Jobs to Be Done :: Overview and Interview TechniqueJobs to Be Done :: Overview and Interview Technique
Jobs to Be Done :: Overview and Interview Technique
 

Similar to SVG Strikes Back

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, CSS3Pascal Rettig
 
What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?Katie Hecox
 
Font icons vs inline svg - 2016
Font icons vs inline svg - 2016Font icons vs inline svg - 2016
Font icons vs inline svg - 2016Mohammad Bayat
 
Html5 Canvas and Mobile Graphics
Html5 Canvas and Mobile GraphicsHtml5 Canvas and Mobile Graphics
Html5 Canvas and Mobile GraphicsEngin Hatay
 
Make your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
 
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 JavaScriptGjokica Zafirovski
 
Responsive images and web icon design
Responsive images and web icon designResponsive images and web icon design
Responsive images and web icon designOlga Voskoboinikova
 
Switch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGSwitch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGExove
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 gamesW3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
SVG For Designers And Developers
SVG For Designers And DevelopersSVG For Designers And Developers
SVG For Designers And DevelopersDan Hiester
 
SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilityDennis Lembree
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web designNate Walton
 
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewCanvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewArvind Krishnaa
 

Similar to SVG Strikes Back (20)

Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
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
 
What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?What is an SVG and How Should it be Used in Web Design?
What is an SVG and How Should it be Used in Web Design?
 
Font icons vs inline svg - 2016
Font icons vs inline svg - 2016Font icons vs inline svg - 2016
Font icons vs inline svg - 2016
 
Html5 Canvas and Mobile Graphics
Html5 Canvas and Mobile GraphicsHtml5 Canvas and Mobile Graphics
Html5 Canvas and Mobile Graphics
 
Make your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScript
 
SVG 101
SVG 101SVG 101
SVG 101
 
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
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Responsive images and web icon design
Responsive images and web icon designResponsive images and web icon design
Responsive images and web icon design
 
Switch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVGSwitch Away from Icon Fonts to SVG
Switch Away from Icon Fonts to SVG
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 gamesW3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
 
Learn svg
Learn svgLearn svg
Learn svg
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Svg
SvgSvg
Svg
 
SVG For Designers And Developers
SVG For Designers And DevelopersSVG For Designers And Developers
SVG For Designers And Developers
 
SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewCanvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth Review
 
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
 

Recently uploaded

GraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4jGraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4jNeo4j
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Andreas Granig
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanNeo4j
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletAndrea Goulet
 
Novo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMsNovo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMsNeo4j
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMarkus Moeller
 
Your Ultimate Web Studio for Streaming Anywhere | Evmux
Your Ultimate Web Studio for Streaming Anywhere | EvmuxYour Ultimate Web Studio for Streaming Anywhere | Evmux
Your Ultimate Web Studio for Streaming Anywhere | Evmuxevmux96
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024MulesoftMunichMeetup
 
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...Abortion Clinic
 
Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024Henry Schreiner
 
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...drm1699
 
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
Auto Affiliate  AI Earns First Commission in 3 Hours..pdfAuto Affiliate  AI Earns First Commission in 3 Hours..pdf
Auto Affiliate AI Earns First Commission in 3 Hours..pdfSelfMade bd
 
Rapidoform for Modern Form Building and Insights
Rapidoform for Modern Form Building and InsightsRapidoform for Modern Form Building and Insights
Rapidoform for Modern Form Building and Insightsrapidoform
 
A Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdfA Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdfICS
 
Software Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements EngineeringSoftware Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements EngineeringPrakhyath Rai
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdftimtebeek1
 

Recently uploaded (20)

GraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4jGraphSummit Milan - Visione e roadmap del prodotto Neo4j
GraphSummit Milan - Visione e roadmap del prodotto Neo4j
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Novo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMsNovo Nordisk: When Knowledge Graphs meet LLMs
Novo Nordisk: When Knowledge Graphs meet LLMs
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
 
Your Ultimate Web Studio for Streaming Anywhere | Evmux
Your Ultimate Web Studio for Streaming Anywhere | EvmuxYour Ultimate Web Studio for Streaming Anywhere | Evmux
Your Ultimate Web Studio for Streaming Anywhere | Evmux
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
Abortion Clinic In Pretoria ](+27832195400*)[ 🏥 Safe Abortion Pills in Pretor...
 
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
Abortion Pill Prices Jane Furse ](+27832195400*)[ 🏥 Women's Abortion Clinic i...
 
Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024Modern binary build systems - PyCon 2024
Modern binary build systems - PyCon 2024
 
Abortion Clinic In Pongola ](+27832195400*)[ 🏥 Safe Abortion Pills In Pongola...
Abortion Clinic In Pongola ](+27832195400*)[ 🏥 Safe Abortion Pills In Pongola...Abortion Clinic In Pongola ](+27832195400*)[ 🏥 Safe Abortion Pills In Pongola...
Abortion Clinic In Pongola ](+27832195400*)[ 🏥 Safe Abortion Pills In Pongola...
 
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
 
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
Auto Affiliate  AI Earns First Commission in 3 Hours..pdfAuto Affiliate  AI Earns First Commission in 3 Hours..pdf
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
 
Abortion Pill Prices Jozini ](+27832195400*)[ 🏥 Women's Abortion Clinic in Jo...
Abortion Pill Prices Jozini ](+27832195400*)[ 🏥 Women's Abortion Clinic in Jo...Abortion Pill Prices Jozini ](+27832195400*)[ 🏥 Women's Abortion Clinic in Jo...
Abortion Pill Prices Jozini ](+27832195400*)[ 🏥 Women's Abortion Clinic in Jo...
 
Rapidoform for Modern Form Building and Insights
Rapidoform for Modern Form Building and InsightsRapidoform for Modern Form Building and Insights
Rapidoform for Modern Form Building and Insights
 
A Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdfA Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdf
 
Software Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements EngineeringSoftware Engineering - Introduction + Process Models + Requirements Engineering
Software Engineering - Introduction + Process Models + Requirements Engineering
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 

SVG Strikes Back