Sara Soueidan PRO
Freelance front-end web developer, writer, and speaker.
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,...'>
(Probably) Don't Base64 SVGs http://css-tricks.com/probably-dont-base64-svg/
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
