svg strikes back

SVGST R I K E S B AC K

Matt Baxter • @mbxtr • October 7, 2014

Matt Baxter @mbxtr

UX Designer Design + Code

SV-WHAT?

Scalable Vector Graphics

So Very Good

SVGis an open graphics standard, made for the web, based on XML.

SVGis for any illustrated image.

Logos

Logos

Icons

Icons

LOLcats

LOLcats

Scalability

Vector Raster

Vector Raster

Scalability

File Size

SVG (2kb) PNG (88kb)512x512

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

http://www.nngroup.com/articles/computer-screens-getting-bigger/

65% 800x600

30% 1024x768

Screens in 2014

http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

Pixel density in 2001

1x

(standard monitor)

Pixel density in 2014iOS

1x

2x

3x

LDPI

HDPI

XXHDPI

MDPI

XHDPI

XXXHDPI

Android

SVG was made for the

multi-device web.

Desktop Support

All modern desktopbrowsers (IE 9+)

http://caniuse.com/#feat=svg

Mobile Support

All modern mobilebrowsers (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

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.

Vector Programs

Illustrator Sketch Inkscape

My weapon of choice

Vector Programs

Be careful with this. Your SVG won’t have a width/height and Internet Explorer

may not render correctly.

https://github.com/svg/svgo

Optimize with SVGO

USING SVG

Just like any other image

CSS Fallback

Inline Fallback

What about icon fonts?

• Are difficult to position • Use a single color • Annoying to update • Browser inconsistencies

Icon fonts…

• Precision positioning • Multiple colors • Simple to update • Better browser consistency

SVG…

To Recap…

• 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

SVG is…

Start using it today!

But, that’s not all…

Since it’s XML…

THE DOM

Inject into HTML

Inspect w/ Dev Tools

http://www.opera.com/docs/specs/presto25/svg/cssproperties/

Style with CSS

CSS Transitions

Media Queries

Attach Events

SVG.JS

http://svgjs.com

SVG.JS

Trianglify (D3.js)

http://qrohlf.com/trianglify/

http://tomgermeau.com/2014/02/how-designers-can-create-interactive-prototypes-with-illustrator/

PROTOTYPE

Wireframes

Organize Layers

Export to SVGThis 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