SVG For Web Designers (and Developers)

SVG For Web Designers and
Developers
SVG for Web Designers & Developers | @SaraSoueidan | SaraSoueidan.com 1

Hello! ( ◠‿◠ )
— Last name is pronounced Swaïdaan
— Front-End Developer
— Author, Codrops CSS Reference
— Co-Author, Smashing Book 5
— SVG articles: http://sarasoueidan.com/articles

Need to support older browsers? There’s a whole bunch
of ways you can do that; and tools to automate the
process for you.

When to SVG?

— Raster images are the preferred format when creating
or working with continuous-tone images such as
photographs.
— SVG is the preferred format for images like user
interface controls, logos, icons and vector-based
illustrations.

Lighting effects and shadows increase SVG file size to
~300KB.
Optimizing it and reducing effects slashes file size
down to ~40KB.
PNG version currently served is 5.9KB.

SVG can do more than display images.
— Icon Systems
— Ad banners
— Infographics
— Data visualizations
— Animated illustrations
— Filter effects (on SVG as well as HTML elements, including
text)
— Simple UI shapes and arbitrarily-shaped UI components

CSS triangle:
.arrow::after {
content: '';
position: absolute;
width: 0;
height: 0;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 100px solid red;
border-bottom: 30px solid transparent;
z-index: 1;
right: -30px;
top: 50%;
margin-top: -30px;
}

Custom @-rule (as it appears in PostCSS):
.arrow {
@svg {
polygon {
fill: green;
points: 50,100 0,0 0,100;
}
}
}
Source: https://github.com/jonathantneal/postcss-write-svg
Sass Mixin: https://github.com/davidkpiano/sass-svg
CSS Spec: Coming Soon!

The Process

Knowledge gap

Designers need to know a little bit about code and
developers need to know a little bit about the design
process in order to suggest alternatives to avoided
approcahes. They can help each other fill that
knowledge gap.

Design
Creating the SVG (e.g. in a graphics editor)

Development
Embedding, Spriting, Scripting, Animating

Export
Optimization

Design

1) Convert text to outlines.. or don’t.
— Outlined text is not selectable/searchable/accessible
— Outlined text will preserve the font face you’re using
w/o needing a web font (good for: logos, lettering)
— Outlining can significantly increase file size
depending on font styles
— Outlined text is made up of paths, so might not be as
controllable or animatable as individual characters

2) Create simple shapes using simple shape elements
instead of <path>s.
— Simple shapes are easier to maintain and edit
manually
— Simple shapes are easier to animate (attribute
values)

<circle fill="#FFFFFF"
stroke="#000"
cx="28.1"
cy="28.1"
r="27.6"/>
Versus
<path fill="#FFFFFF"
stroke="#000"
d="M55.7,28.1
c0,15.2-12.4,27.6-27.6,27.6
S0.5,43.3,0.5,28.1
S12.9,0.5,28.1,0.5
S55.7,12.9,55.7,28.1z"/>

3.a) Simplify Paths
Each point is represented as a
pair of coordinates in the
<path> data.

3.b) Simplify Paths
Use Ai’s Simplify algorithm or
use the Warp tool.

4) Combine Paths Where Possible
... but only if you don't want to animate the individual
paths separately.

5) Fit artboard to drawing.
This allows you to crop the SVG
and thus get rid of any extra
white space around your
drawing.

6) Use Good Grouping, Layering and Naming Conventions
— The layer and group names you use in Illustrator will
be translated to IDs in the SVG code.
— Makes scripting, styling and editing SVG code easier.
— Best for automated workflows that use file names in
SVG generation.

7) Create ﬁlters Using the SVG
Filters available in Ai, not the
Photoshop Effects
Photoshop effects will be
exported as bitmaps, not
converted into SVG filters.

Photoshop can natively export SVG.
1. Select the layers you want to export.
2. Open the “File > Extract Assets” window.
3. Select layers and define in which format you want to
export them one by one. (You have the choice between
JPEG, PNG and SVG.)
http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

8) Export
File → Save As

Export multiple SVG files using multiple artboards if/
when needed.

One or Multiple Artboards?
That depends on the spriting technique you intend to
use...

Exporting SVG for the Web with
Illustrator:
http://goo.gl/c0Ri4k

Always keep the width and height attributes on the
<svg>.

Communication = !

Optimize

Optimization Tools:

http://sarasoueidan.com/blog/svgo-tools/

You may not always need or want to optimize...

Some editors offer more
optimization options that yield
cleaner code.
Inkscape is a great example of
that.
Ai will be getting better.

Remember: optimization (esp. using standalone tools)
can and will change the document structure, thus
affecting any animation/scripting.

Develop

Spriting Technique #1

Multiple SVG files (e.g. icons) are combined into one SVG
file using <symbol>s
<svg style="display: none;">
<symbol id="icon-twitter" viewBox="0 0 35 35">

</symbol>
<symbol id="icon-github" viewBox="0 0 35 35">

</symbol>

</svg>

Accessible icons
<svg style="display: none;">
<symbol id="icon-twitter" viewBox="0 0 35 35"
role="img" aria-labelledby="title description">
<title>Twitter</title>
<description>...</description>

</symbol>
<symbol id="icon-github" viewBox="0 0 35 35"
role="img" aria-labelledby="title description">
<title>Github</title>
<description>...</description>

</symbol>

</svg>

Display the icon(s) anywhere in the page:
<svg class="icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
or
<svg class="icon-twitter">
<use xlink:href="icons.svg#icon-twitter"></use>
</svg>

What about styling <use>d
images?

You can define the colors that make up your theme in
the style sheet:
#robot-1 {
--primary-color: #0099CC;
--secondary-color: #FFDF34;
--tertiary-color: #333;
}
#robot-2 {
--primary-color: #E52A39;
--secondary-color: #11EBD8;
--tertiary-color: #000;
}

and then use those variables in the SVG:
<svg style="display: none">
<symbol id="robot" viewBox="0 0 340 536">
<path d="..." fill="#fff" />
<path d="..." fill="#D1312C" />
<path d="..." fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
<path d="..." fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
<path d="..." fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />

</symbol>
</svg>

Read all about styling the contents of use at: http://
tympanus.net/codrops/2015/07/16/styling-svg-use-
content-css/

“SVG Parameters are a way to set CSS custom
properties on an "external" SVG image, by passing them
through a special fragment scheme on the URL. This
gives a limited, but powerful, subset of the
customizability that "inline" SVG images have to
"external" SVG images.”
Source: https://tabatkins.github.io/specs/svg-params/

<img src="http://example.com/image.svg#param(--text-color%20blue)" alt=".." />`

Using Fragment Identiﬁers
— A visual approach to spriting SVG (Similar to spriting
using a PNG)
— Uses one sprite that contains all icons
— Uses the position and bounding box an icon inside
the sprite
— to create a "view" for that icon
— You display each icon by referencing its view

To create a view, get the position and dimensions of the
icon from the gaphics editor

Important: Remember to specify width and height for the
<img> referencing the sprite views.

Icons as background images in CSS
— The closest you can get to icon fonts, using SVG
— Support back to IE6
— Same animation capabilities as icon fonts, plus the
advantages of SVG.
— There are tools to automate and speed up the
spriting process.

Grunticon and/or Grumpicon for automation

SVG is embedded as data URI in CSS:
.twitter-icon{
background-image: url('data:image/svg+xml;…');
background-repeat: no-repeat;
background-position: 50% 50%;
height: 2em;
width: 2em;
/* etc. */
}
<span class="twitter-icon"></span>
A script takes care of loading the appropriate version for the different browsers.

Overview of all spriting techniques: https://24ways.org/
2014/an-overview-of-svg-sprite-creation-techniques/

WHY would I want to use SVG over icon fonts?
— Infinitely scalable & look crisp on all resolutions
— Styleable via CSS (multi-colors)
— Easier size control
— Interactive and animatable using CSS, SMIL and/or JavaScript
— Semantic markup
— Fully accessible (incl. text contained in an icon)
— Many tools available to make creation, interaction, embedding and
spriting easier
— Different embedding and fallback techniques

Just moved @selz from icon
fonts (woff2) over to SVG sprites.
Saved 7.2% in CSS and 51.6%
woff2 to SVG.
— Sam Potts

We don't download fonts; icons
are what svg is for.
— Bruce 'Captain Wonderful' of Opera (a.k.a Bruce
Lawson)

If you still need convincing, read this: https://css-
tricks.com/icon-fonts-vs-svg/

Want to make a switch? This tool might help you:

#nomoreexcuses

Animating SVG: SMIL, CSS
or JavaScript?

— Don’t use SMIL.
— Use CSS only for simple animations.
— Use JavaScript for complex animations.

Popular SVG JavaScript animation libraries:
1. GreenSock Animation Platform (GSAP)
2. Snap.svg (“The jQuery of SVG”)
3. Velocity.js
4. D3.js

Read more here: http://greensock.com/svg-tips

Which Embedding
Technique Should You
Choose?

1. <img src="mySVG.svg" alt="..."/>
2. background-image: url(path/to/mySVG.svg);
3. <object type="image/svg+xml" data="mySVG.svg">

</object>
4. <iframe src="mySVG.svg">

</iframe>
5. <svg xmlns="http://www.w3.org/2000/svg" …>

</svg>
6. <picture>
<source type="image/svg+xml" srcset="path/to/image.svg">
<img src="path/to/fallback.png" alt="Image description">
</picture>

Filter your options down; set priorities (and compromises when needed).
— Is the SVG animated?
— Is it interactive?
— What kind of animation? (Does it require JS?)
— What browser support do I need (for the animation)?
— What kind of content and fallback do you need? (e.g.
infographics)

Why I love <object>
— Enables modularity of content without sacrificing
modularity and reusability of styles/animations
— Scriptable, animatable, interactive
— Cacheable resource
— Default fallback mechanism
— Fallback can be image or text, and even both.
— All the benefits of using SVG: accessible content,
searchable and selectable text, interactive shapes, etc.

Practical Example #1: Ad Banners
— The banner content including scripts and animations
are "encapsulated" and easily reusable
— Separation of concerns
— Plug <object> in and play, while scripts and
interactions are handled and maintained using
JavaScript.

Recommended reading: http://codepen.io/chrisgannon/
blog/my-first-svg-banner-ad

Practical Example #2: Infographics
— Infographic is animated and can
be interactive
— Best kind of fallback is text
content of the data presented in
the graphic, goes between
opening and closing <object>
tags.
Image source: http://provatahealth.com

Credits
— Geometric background designed by Freepik.
— GSAP Screenshots by GreenSock.

Thank you!

SVG For Web Designers (and Developers)

More Related Content

Viewers also liked

Similar to SVG For Web Designers (and Developers)

Recently uploaded

SVG For Web Designers (and Developers)