Working with SVG,

A Primer

SVG is an XML-based image format.

SVG Advantages Over Bitmaps

SVG is scalable & resolution-independent

SVG is human-readable

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="800" viewBox="0 0 800 800">
  <g id="background">
    <rect x="-1" fill="#99CCCC" width="800" height="800"/>
    <defs>
      <rect id="SVGID_1_" x="-1" width="800" height="800"/>
    </defs>
    <clipPath id="SVGID_2_">
      <use xlink:href="#SVGID_1_" overflow="visible"/>
    </clipPath>
    <polygon clip-path="url(#SVGID_2_)" fill="#7CB5AB" points="683.2 969.4 978 553.7 471.2 128.7 432.6 146 389.7 503.7 176.4 544.4 "/>
  </g>
  <g id="objects">
    <path fill="#FFFFFF" d="M397.8 746.2h0.7v-0.8c0-0.9 0.1-1.6 0.3-2.1 0.2-0.5 0.6-0.9 1.1-1.1 0.5-0.2 1.3-0.4 2.2-0.4 1.6 0 2.5 0.4 2.5 1.2 0 0.3-0.1 0.5-0.3 0.7 ..."/> 
    <!-- ... -->
  </g>
</svg>

SVGs are easily minified & GZipped

SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. [...] An SVGZ file is typically 20 to 50 percent of the original size.

— Wikipedia

SVGs are not always smaller in size than their raster counterparts. 

  • Complexity of the image/illustration,
  • Dimensions,
  • Graphics effects (blur effects, filters, etc.).
  • Raster images are better suited for continuous tone images;
  • smaller vector images like icons are best candidates for SVG

Best way is to compare and choose accordingly.

SVGs have good browser support

SVGs are accessible

<svg viewBox=".." role="img" aria-labelledby="title description">

    <title id="title">Chemical Reaction</title>

    <desc id="description">Animated illustration showing the stages of a chemical reaction in a laboratory.</desc>

</svg>

SVGs have Photoshop-like capabilities

  • Filters,
  • Blending modes,
  • Drop shadows,
  • Blur effects,
  • Clipping and masking,
  • etc.

SVGs are stylable and interactive

  • Stylable and animatable using CSS
  • Javascript
  • SMIL
  • Future: Web Animations API

SVG Optimization

(Tools & Resources)

Notes:

  • Text converted to outline will not be accessible/searchable.
  • Outlined text can also increase file size a lot.

SVG Embedding Techniques

<img src="logo.svg" alt="Company Logo" />

1

  • Image can be cached (requires HTTP request).
  • No CSS interactions.
  • No scripting.
  • CSS animations work only if defined inside <svg>

2

.logo {
  background-image: url(logo.svg);
}
  • Image can be cached (with style sheet).
  • No CSS interactions.
  • No scripting.
  • CSS animations work only if defined inside <svg>
<object type=”image/svg+xml” data=”mySVG.svg”>
  <!-- fallback here -->
</object>

3

  • Image can be cached.
  • Scripting.
  • Fallback mechanism.
  • CSS animations and interactions work only if defined inside <svg>
<object type=”image/svg+xml” data=”mySVG.svg”>
  <img src="fallback.png" alt="..." />
</object>

It's not wrong, it's just bad for performance. SVG-capable browsers will request both images!

Don't do this

<object type=”image/svg+xml” data=”mySVG.svg”>
  <div id="fallback"></div>
</object>
#fallback {
  background: url(fallback.png);
  width: 15em;
  height: 12em;
  ...
}

Do this instead

4

<iframe src=”mySVG.svg”>
  <!-- fallback here -->
</iframe>

5

<embed type=”image/svg+xml” src=”mySVG.svg” />

6

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ..>     
  <!-- svg content --> 
</svg>
  • Image is not cached.
  • Scripting.
  • CSS animations and interactions.
  • No extra HTTP requests.

Inlining SVGs (Data URIs)

<img src='data:image/svg+xml; ... '>
<img src='data:image/svg+xml;utf8,<svg...> ... </svg>'>
.logo { 
  background: url('data:image/svg+xml;utf8,<svg...> ... </svg>'); 
}
<img src='data:image/svg+xml;base64,...'>

SVG Sprites

Why SVG icons and not Icon Fonts?

  • SVGs are more semantic.
  • More control over SVG icon styles (multi-color icons).
  • SVG icons can be animated & interactive.
  • You can provide PNG fallback for SVG.
  • SVGs are generally consistent across browsers (unlike icon fonts).
  • SVGs are easier to create, embed, and maintain.
  • SVGs are accessible.

Start with a folder containing your SVG icons.

There are many ways to create SVG sprites; the two most common ones are..

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">

   <symbol id="icon-twitter" viewBox="0 0 35 35">
      <!-- Twitter icon markup -->
   </symbol>
    
   <symbol id="icon-github" viewBox="0 0 35 35">
      <!-- Github icon markup -->
   </symbol>
   
   <!-- more icons here... -->
</svg>

HTML-Inline SVG Sprite

<svg class="icon-twitter">
  <use xlink:href="#icon-twitter"></use>
</svg>

HTML-Inline SVG Sprite: The better way

<svg class="icon-twitter">
  <use xlink:href="icons.svg#icon-twitter"></use>
</svg>

Does not work in any version of IE.

CSS-Embedded SVG Sprite

.icon-dribbble {
    background-image: url('data:image/svg+xml;...');
    background-repeat: no-repeat;
}

Fallback:

.icon-dribbble {
    background-image: url('data:image/png;base64,...');
}
.icon-dribbble {
    background-image: url('png/dribbble.png');
}

Fallback Fallback:

More SVG:

  • CSS-Tricks.com
  • SmashingMagazine.com
  • Codrops.com
  • Ehm.. SaraSoueidan.com :)

These Slides:

https://slides.com/sarasoueidan/working-with-svg-a-primer/

Questions?

@SaraSoueidan

http://sarasoueidan.com

Working with SVG — A Primer

By Sara Soueidan

Working with SVG — A Primer

  • 29,948