SVG: Easy as 1-2-3

Aaron Manire

amanire.github.io/svg-123

What is SVG?

Bitmap/Raster images

Scalable Vector Graphics

A Brief History

1998 SVG Working group starts development
2001 SVG 1.0 released
2003 SVG 1.1 released
2004 Konqueror browser introduced SVG support
2008 SVG Tiny 1.2 released
2010 Steve Jobs publishes Thoughts on Flash
2011 SVG support added to Internet Explorer (IE9)
2016 SVG 2.0 candidate recommendation

caniuse.com/#feat=svg

Why use SVG?

Scale without pixelation
Smaller file size
End-user can interact and change
Easy to maintain
DOM available to JavaScript
Accessible
Translatable
Searchable (SEO)

SVG instead of Icon Fonts

More flexible, e.g. multiple colors
Easier to size and position
Less work to maintain
See Inline SVG vs Icon Fonts [CAGEMATCH]
css-tricks.com/icon-fonts-vs-svg/

When not to use SVG?

Images with complex shapes and color combinations
High FPS and/or elaborate animations
Incompatible Drupal image styles

Anatomy of an SVG

SVG element


<svg>
</svg>

SVG XML Name Space


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

Note: Unnecessary for inline SVG inside HTML5 doctype

Viewbox


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244">
</svg>

sarasoueidan.com/blog/svg-coordinate-systems

Presentation attributes


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244"
  width="274px" height="244px">
</svg>

Shape Elements


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244"
width="274px" height="244px">
  <path d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
  <rect width="101.4" height="101.4"/>
</svg>

Text Elements


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244"
width="274px" height="244px">
  <path d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
  <rect width="101.4" height="101.4"/>
  <text>Russula<text>
</svg>

Group Tag


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244"
width="274px" height="244px">
  <g>
    <path d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
    <rect width="101.4" height="101.4"/>
    <text>Russula<text>
  </g>
</svg>

CSS Classes and inline styles


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274 244"
width="274px" height="244px">
  <g id="mushroom" class="mushroom">
    <path class="mushroom__cap" d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
    <rect class="mushroom__stem" fill="#FFF" stroke="#000" stroke-width="10" stroke-miterlimit="10" width="101.4" height="101.4"/>
  </g> 
</svg>


.mushroom__cap {
  fill: green;
  stroke: black;
  stroke-width: 10;
}

Closer look at Viewbox


  <svg viewBox="0 0 274 244">
</svg>

min-x
min-y
width
height

Animating the viewBox

codepen.io/Mamboleoo/post/animating-the-viewbox

Viewbox aspect ratio


  <svg viewBox="0 0 274 244" width="100%">
</svg>

Demo of viewport, viewBox, & preserveAspectRatio
sarasoueidan.com/demos/interactive-svg-coordinate-system/

Creating SVG

Adobe Illustrator

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

Sketch

Mac OS only

Inkscape

inkscape.org

SVG Edit

github.com/SVG-Edit/svgedit

Figma

Collaborative workflow like Google Docs.

figma.com

Omnigraffle

Mac OS only
Omnigraffle 7 introduced SVG imports

omnigroup.com/omnigraffle/preview/

Optimizing

SVGO

Nodejs-based tool for optimizing SVG vector graphics files.
github.com/svg/svgo

Sketch SVGO Compressor plugin
github.com/BohemianCoding/svgo-compressor

SVG OMG

jakearchibald.github.io/svgomg/

Embedding

<object>
<img>
CSS background-image
<iframe>
<embed>
inline <svg>

css-tricks.com/using-svg/

Embedding

<object>
<img>
CSS background-image
<iframe>
<embed>
inline <svg>

css-tricks.com/using-svg/

<img>


<img src="filename.svg" alt=""/>

Cacheable
Not scriptable
CSS and animations only within SVG tag

CSS Background image


.toolbar-icon-help-main:before {
  background-image: url(images/questionmark-disc.svg);
}

Inline <svg>

Not cached in browser
Scriptable
Styleable from site CSS
Animatable from site JS

calendar.perfplanet.com/2011/why-inlining-everything-is-not-the-answer/

SVG Image Sprites

Defs tag


<svg>
  <defs>
    <g id="mushroom--amanita">
      <path fill="#ED1F24" stroke="#000" stroke-width="10" d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
      <rect x="86.4" y="137" fill="#FFF" stroke="#000" width="101.4" height="101.4"/>
      <circle cx="80" cy="90" r="10" fill="#FFF"/>
      <circle cx="160" cy="60" r="20" fill="#FFF"/>
    </g>
  </defs>
</svg>

Use element


<svg viewBox="0 0 274 244>
  <use x="100" y="100" xlink:href="#mushroom--amanita"/>
</svg>

Symbol element


<svg>
  <symbol id="mushroom--psilocybe" viewBox="0 0 274 244">
    <path fill="#6d7AA7" stroke="#000" stroke-width="10" d="M5,137C5,137,5,5,137,5s132,132,132,132H5z"/>
    <rect x="86.4" y="137" fill="#FFF" stroke="#000" width="101.4" height="101.4"/>
  </symbol>
</svg>

sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

Using a <symbol>


<svg>
  <use xlink:href="#mushroom--psilocybe"/>
</svg>

SVG Text Sprites

CSS Background image

Data URI


.mushroom--angry {
  background-image: url('data:image/svg+xml;utf8,
<svg%20width="170mm"%20height="170mm"%20xmlns="http://www.w3.org/2000/svg"><g><text%20transform="rotate(-45%20324.7626037597656,238.86323547363284)"%20font-weight="bold"%20text-anchor="middle"%20font-family="Sans-serif"%20font-size="63"%20y="259.28"%20x="328.18"%20%20fill="%23DDD">%C3%89SVG SVG SVG SVG SVG SVG</text></g></svg>');
}
.mushroom--happy {
  background-image: url('data:image/svg+xml;utf8,
<svg%20width="170mm"%20height="170mm"%20xmlns="http://www.w3.org/2000/svg"><g><text%20transform="rotate(-45%20324.7626037597656,238.86323547363284)"%20font-weight="bold"%20text-anchor="middle"%20font-family="Sans-serif"%20font-size="63"%20y="259.28"%20x="328.18"%20%20fill="%23DDD">%C3%89SVG SVG SVG SVG SVG SVG</text></g></svg>');
}

css-tricks.com/probably-dont-base64-svg/

Grumpicon

grumpicon.com

Grunticon

github.com/filamentgroup/grunticon

Fallbacks for non-SVG browsers

css-tricks.com/a-complete-guide-to-svg-fallbacks/

Dealing with FOUSVG

Use height/width presentation attributes to eliminate the Flash of Unstyled SVG

sarasoueidan.com/blog/svg-style-inheritance-and-FOUSVG/

Using SVG with Drupal

SVG in Drupal core

Embedded as CSS background-images core/misc/icons/ core/themes/stable/images/core/icons/

Inline SVG in twig templates


{% include active_theme_path() ~ '/images/filename.svg' %}

SVG image fields in Drupal 7

SVG Image Formatter sandbox module
d.o/sandbox/neilgardner/2505991

SVG image fields in Drupal 8

Ability to upload SVG to image fields is coming to core*
in Drupal ~~8.2~~ ~~8.3~~ 8.4?
d.o/node/2652138

* Requires ImageMagick toolkit

Security

d.o/project/svg_sanitizer

Accessibility

(for inline SVG)

Use <title> element in place of alt attribute
Also, optionally, <desc> for detailed description
Add aria-labelledby attribute
Apply an ARIA role attribute


<svg aria-labelledby="title desc" role="img">
<title>Green rectangle</title>
<desc>A light green rectangle with rounded corners</desc>
</svg>

sitepoint.com/tips-accessible-svg/

Animation

* 8/17/2016 Chrome suspended intent to deprecate
groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ

SVG 2.0

w3.org/TR/SVG2/

Rework of SVG 1.2 Full
New image features such as mesh gradients and hatching
Better web integration for CSS, HTML5 and WOFF.

Summary of new features
github.com/w3c/svgwg/wiki/SVG-2-new-features

Further watching

Next generation graphics: SVG by David Corbacho (corbacho) - DrupalCon Barcelona
The Flavors of SVG by John Ferris (pixelwhip) - DrupalCon Los Angeles
SVG in Motion by Sarah Soueidan - Render 2016
SVG: So Very Good by Tyler Sticka - CascadiaFest 2016

Books

Smashing Book 5 Chapter 4: Mastering SVG for Responsive Web Design by Sara Soueidan
SVG Essentials by J. David Eisenberg and Amelia Bellamy-Royds
Practical SVG by Chris Coyier

Even more stuff

Thank you

amanire.github.io/svg-123

Aaron Manire

@amanire
d.o/u/amanire

What is SVG?

Bitmap/Raster images

Bitmap/Raster images

Scalable Vector Graphics

A Brief History

Why use SVG?

SVG instead of Icon Fonts

When not to use SVG?

Anatomy of an SVG

SVG element

SVG XML Name Space

Viewbox

Presentation attributes

Shape Elements

Text Elements

Group Tag

More presentation attributes

More presentation attributes

CSS Classes and inline styles

Closer look at Viewbox

Animating the viewBox

Viewbox aspect ratio

Creating SVG

Adobe Illustrator

Sketch

Inkscape

SVG Edit

Figma

Omnigraffle

Optimizing

SVGO

SVG OMG

Embedding

Embedding

<img>

CSS Background image

Inline <svg>

SVG Image Sprites

Defs tag

Use element

Symbol element

Using a <symbol>

SVG Text Sprites

CSS Background image

Data URI

Grumpicon

Grunticon

Fallbacks for non-SVG browsers

Dealing with FOUSVG

Using SVG with Drupal

SVG in Drupal core

Inline SVG in twig templates

SVG image fields in Drupal 7

SVG image fields in Drupal 8

Security

Accessibility

(for inline SVG)

Animation

SVG 2.0

Further watching

Books

Further reading

Even more stuff

Thank you