How SVG can save your day
Fronteers - 26 June 2022
Louis Hoebregts
@Mamboleoo
- Front-end developer (Emakina, Base Design, Freelance)
- Teacher of Generative Design & Web optimization, Namur
- Coach for Hack Your Future, Brussels
- Author on CSS-Tricks, Codrops, Generative Hut
What are SVGs?
- Scalable Vector Graphics
- Vector vs Bitmap
- Markup language based on XML
- Used to display icons, logos, maps, charts, illustrations
- Can be interactive
- Can be modified in CSS
- Allows accessibility
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="30" cy="30" r="10" fill="lightblue" /> <circle cx="70" cy="30" r="10" fill="lightblue" /> <polyline stroke="coral" stroke-width="4" fill="none" points="20,60 40,80 60,80 80,60 "/> </svg>
<svg aria-labelledby="titleID descID" role="img" viewBox="0 0 720 800"> <title id="titleID">Topographic map of Belgium</title> <desc id="descID">A map of Belgium showing relief and contour lines.</desc> ... </svg>
How to use them?
<img>
<img src="banana.svg" width="500" height="500" />CSS background
.el{
background-image: url(path/to/banana.svg);
}Inline
<body>
<svg viewBox="0 0 20 20">
<rect x="0" y="0" width="10" height="10" />
</svg>
</body>document.querySelector('.dot').addEventListener('click', () => { alert('Congratulations, you clicked on a circle!'); });
scripts.js
.dot { fill: #BADA55; stroke: #c0ffee; stroke-width: 4px; }
styles.css
When included in your HTML
<svg viewBox="0 0 50 50"> <circle cx="25" cy="25" r="15" /> </svg>
index.html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <circle cx="25" cy="25" r="15" /> </svg>
<svg viewBox="0 0 50 50"> <circle cx="25" cy="25" r="15" class="dot" /> </svg>
ul { list-style-image: url("data:image/svg+xml, %3Csvg%20xmlns=%27http..."); }
<ul> <li>Iron Man</li> <li>Superman</li> <li>Hulk</li> </ul>
Using Data-uri
SASS Mixin to the rescue!
Pro
- Library of icons available in CSS
- Easier to update an icon for all pages
- Code cached
- Easily editable
- Do not pollute your HTML
Cons
- Icons cannot be animated
- Increase your CSS file size
Clean your SVGs
Animations
SMIL
CSS
JavaScript
⚠️ Transform-origin ⚠️
Gif-like images
Animated favicon
<svg viewBox="-5 -5 10 10" width="10" height="10" xmlns="http://www.w3.org/2000/svg" > <style> circle { animation: bounce 2s infinite ease-in-out alternate; } @keyframes bounce { to { transform: scale(0); } } </style> <circle r="5" /> </svg>
Firefox only 😢
CSS Media Queries
Dark mode
Prefers reduced motion
viewBox
<svg viewBox="min-x min-y width height">
Animating the viewBox
Using viewBox with an image
overflow: visible;
Vector-effect
Line animations
stroke-dashoffset
document.querySelector('path').getTotalLength();
SVG Filters
Duotone
Pencil effect
Turbulence
Line wrapping text
<foreignObject>
<svg viewBox="0 0 200 200"> <foreignObject x="20" y="20" width="160" height="160"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat. </p> </foreignObject> </svg>
Automatic line wrapping
Illustrations © Vegetables - Dialog balloon - Clouds
Thank you ✨
How SVG can save your day Fronteers - 26 June 2022
How SVG can save your day - Fronteers June 2022
By Louis Hoebregts
How SVG can save your day - Fronteers June 2022
Presentation made during the Fronteers Meetup on 26 June 2022.
- 1,073
