SVG is for Everybody

CHRIS COYIER

mycockpit.club

SLIDE TO SEEM TIMELY AND RELEVANT

13.9K 13.9K 13.9K 13.9K

Sharp at any size or resolution Small in ﬁle size
SVG is

Styleable & Responsive - you can apply CSS Scriptable -
shapes can be in the DOM Systematic - easy to build an icon system Animateable - in many comfortable ways Interactive - links! hovers! games! Accessible - in all the right ways SVG is

Big Promises / Can’t Use

Nope. You can use SVG now and it’s pretty dang
easy.

Well-supported

Even if you need to go deeper, it’s not that
bad. We’ll get into that in a bit.

HEY that looks like HTML (It’s XML)

SVG syntax can be learned! Unlike any other image format.
(You don’t “learn” JPG, unless you’re like Rain Man.)

SVG can be made from essentially anything “vector”. .eps /
.pdf / .ai / .whatever open in Illustrator, Save As .svg

“Scaleable Vector Graphics” SVG can be made from essentially anything
“vector”.

SVG will never replace raster graphics.

Rasterfarian GET IT?! (This image would be very bad at
being vector.)

wpapcommunity.com/site/index.php/gallery/musisi-jazz/bob-marley-rastaman-2048 (This image would be very good at being vector.)

Todd Parker’s Chart https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/edit#slide=id.p

1.3MB 129K

How do you get SVG to use?

1 Learn the SVG syntax and hand-craft them.

Basic Shapes <line> <rect> <circle> <ellipse> <path> <polyline> <polygon>

2 Make your own images in a vector editing program

(p.s. you can copy and paste SVG out of Illustrator
CC)

Illustrator $19.99 / month Extremely robust Lots of training/tutorials available

Sketch $99 Modern take on design software Great for web
Great exporting

WebCode $39.99

iDraw $24.99

Inkscape Free

3 Go snag some vector stuﬀ oﬀ the internet.

• Adjust colors • Change artboard size • Remove cruft
• Save it

http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

How to Use SVG LIKE, ON WEBPAGES YA TEAMSTERS

<img src="clover.svg" alt="clover"> SVG-as-img HTML

SVG-as-img HTML <img src="clover.canvas" alt="clover">

.clover { background: url(clover.svg); } Great way to support gradients
in IE 9. Compass can automatically do that for you. www.sitepoint.com/getting-started-svg-gradients/ SVG as background-image CSS

html5hub.com/#i.5cx78814yheb6u

AddType image/svg+xml .svg .svgz .htaccess css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/ content-type ﬁx

Because SVG can be resized worry-free, you probably will resize
them most of the time. http://blog.froont.com/9-basic-principles-of-responsive-web-design/

img { max-width: 100%; height: auto; } CSS img[src$=".svg"] {
max-width: auto; width: 100%; height: auto; } Don’t get bigger than the container element. Also, don’t scale up. Don’t get bigger than the container element. Scale up if you need to.

.horse { background: url(horse.svg); background-size: cover; } CSS Firefox used
to have an issue with blurring SVG when resizing, but not anymore since v24. Fill the entire background of this element no matter what. Scale up if you have to.

You can put <svg> right up in your <html>, homegirl.
Inline SVG

Three Big Advantages to Using Inline SVG: 1) Shapes are
in the DOM: CSS Styling! JavaScript stuﬀ! 2) No additional HTTP Request (it’s like a data URI, but better) 3) You can use deﬁne once and use in multiple places

SVG Templating Using inline <svg> as an icon system

Sites need a system for icons.

<nav class="main-nav" id="main-nav"> <a href="/" class="home"> <svg viewBox="0 0 100
25" class="shape-tab"> <use xlink:href="#shape-tab"></use> </svg> <span>Blog</span> </a> <a href="/video-screencasts/" class="videos"> <svg viewBox="0 0 100 25" class="shape-tab"> <use xlink:href="#shape-tab"></use> </svg> <span>Videos</span> </a>

2014.cssconf.com codepen.io/elrumordelaluz/pen/dhwLi

Even better, let’s get that block of SVG <defs> out
of the HTML entirely.

defs.svg <svg> <defs> <g id="shape-icon-1"> <path d="M80.893,40.234c- … <g> <g

IE (any version) won’t allow <use> with an external source.
Jonathan Neal has a ﬁxer-upper script. (XHRs in the guts so it’s like straight up inline SVG.)

Using <symbol> instead of <g> is even better!

.specific-icon { background: url('svg.svg#svgView(viewBox(0,0,48,41))'); } <svg> <view id='monkey-view' viewPort='…' />
</svg> <img src='faces.svg#monkey-view' alt=''> Fragment Identiﬁers

This is the idea of SVG Sprites

1) Vector (awesome) 2) No background-position craziness 3) More CSS
control (i.e. SVG-speciﬁc, @media, etc) 4) All the other advantages of inline SVG (accessible, multiple links, scriptable) 5) Fallbacks are possible It’s the same idea, only way better because:

codepen.io/chriscoyier/pen/mhaFy

Media Queries in CSS + SVG

All this stuﬀ is possible on inline SVG. You get
some advantages of SVG with <img> or background-image, but not as many.

SVG vs. Icon Fonts Cagematch!

THE ANCIENT PAST

Icon Font SVG Vector yup (but anti-aliasing…) yup CSS Control
some (single color) better Positioning die XXX murder good Weird Failures* yup less Semantics none <span> / ::before better <svg> Accessibility be very careful better, <title><desc> Ease of use meh better Browser Support IE 6+ IE 9+ Weird Failures: CORS/Fx + more?, CDN/network fail, Chrome non-active tab, no @font-face support (Opera Mini, Nokia XPress, Blackberry 4&5, Android 2.1, Windows Phone 7, 7.8, 8?, more?)

Guess which one I like? Tip: it’s the one that
isn’t icon fonts.

If you’re going to use icon fonts, read this. It
goes into how it can be done perfectly* in regards to accessibility, browser support, and failures. *95%

Build Tools Don’t freak out.

Optimizing SVG 1. Removing meta junk 2. Simplifying shapes 3.
Reducing crazy precision 4. Removing hidden elements 5. Removing whitespace youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be youtube.com/watch?v=1AdX8odLC8M&feature=youtu.be Kyle Foster has great videos detailing SVG optimization

Raster images are a grid of pixels so it’s easy
to understand they have an intrinsic width and height.

SVG has a Viewport and viewBox Viewport is the size
of the element. Think how the browser window is the viewport for the whole site but an iframe has it’s own smaller viewport. Likewise, SVG has it’s own viewport. viewBox is an attribute on <svg>. It is the “canvas” on which SVG instructions are carried out. It is essentially a nexus with an aspect ratio (don’t think of them as pixels).

Dealing with Fallbacks e.g. dealing with IE 8 and Android
2.3

Remember, one kind of fallback is nothing. Like if you’re
using an icon to enhance a word.

<img src="images/horse.svg" alt="horse"> <script src="/js/libs/svgeezy.js"></script> <script> svgeezy.init(false, "png"); </script> </body>

<img src="images/horse.png" alt="horse"> <script src="/js/libs/svgeezy.js"></script> <script> svgeezy.init(false, 'png'); </script> </body>

codepen.io/chriscoyier/pen/jnsIr

It works, but it requests two images in non-supporting browsers.

<picture> <source type="image/svg+xml" srcset="graph.svg"> <img src="graph.png" alt="A lovely graph."> </picture>
… but, SVG is more well supported than the responsive images stuﬀ is.

.my-element { background-image: url(fallback.png); background-image: linear-gradient(transparent, transparent), url(image.svg); } Fallback
for CSS background-image This works because it combines multiple backgrounds and old-syntax gradients, thus it works for Android 2.x where multiple backgrounds alone did not. You could use Modernizr too, but if you just need it for this, it would be overkill. pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Also, background is generally decorative and non-vital to content, so
no fallback is often acceptable.

Supporting (most) browsers Just leaves alone IE 9-11 Ajax’s in
<g> IE 6-8 <img src="icon.png">

Animating SVG Let us count the ways.

1. SVG Syntax <animate> (“SMIL”) 2. With CSS @keyframes /
transitions 3. With JavaScript

SVG Filters & Blend Modes The OG of cool web
eﬀects.

SVG Filters You can use CSS ﬁlters on SVG, but
SVG has its own special ﬁlters too.

Accessible SVG Thankfully it ain’t that hard.

1. Use SVG 2. Use Inline SVG 3. Provide a
<title> and aria-labeledby 4. Provide a <desc> and aria-labeledby 5. Use <text> 6. Make links focusable (if parts) 7. Use ARIA roles 8. Create alternatives

http://css-tricks.com/svg-text-typographic-designs/

@chriscoyier

SVG is for Everybody

SVG is for Everybody

More Decks by Chris Coyier

Other Decks in Design

Featured

Transcript