Unleash the Power of Inline SVG Images
SVG images are an integral part of modern web design. SVG, short for Scalable Vector Graphics, are highly scalable and have a small file size. You can also customize them with CSS, as I'll show you.
In general, you can embed an SVG image in a website using the <img>
tag or the CSS
property background-image
. In this case, you won't be able to make major style changes to the
image. I prefer to use inline SVG images instead. They can be customized and even animated with CSS.
Photo: © Andrea Piacquadio / pexels.com
How can you embed inline SVG images? What are best practices to customize them with CSS properties and variables? Read on to find out more.
How to embed an inline SVG
SVG images can be embedded directly in the HTML document using the <svg>
tag. Simply
open the image file in the code editor of your choice, copy the code, and paste it into your HTML template. Here's an example:
<svg height="48" width="48" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="m393-165 279-335H492l36-286-253 366h154l-36 255Zm-73 85 40-280H160l360-520h80l-40 320h240L400-80h-80Zm153-395Z"></path>
</svg>
Nowadays, websites are often built with component-based JavaScript frameworks like Angular or React. These allow you to wrap an inline SVG in its own component that you can easily reuse in different sections of your website. One example for this pattern is the Material UI icon library.
The UI library Angular Material even goes a step further:
You can add SVG files as assets to your website. The application later fetches the images from the server, allowing the SVG code
to be embedded in the HTML document via the <mat-icon>
component.
Demo: Flexible styling of SVG Icon Buttons
I've created a demo with use cases for inline SVGs. You can customize the color of the icons through a color picker element:
I accomplished this by linking the SVG image's fill
to the CSS property color
.
Customizing the SVG with CSS
First, you set the SVG image's fill
property to the value currentColor
. This
special keyword represents the value of an element's color
CSS property. This way, the SVG image's
vectors will be filled with the element's font color. You can set the property in the SVG code:
<svg fill="currentColor" height="48" width="48" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="..."></path>
</svg>
Or, you can set the property in your CSS code:
.icon svg {
fill: currentColor;
}
Now, you can control the appearance of the SVG image through the color
CSS property. This makes it
easier to manage color themes and different states of controls.
Imagine you have a button with an icon and text, like in my demo above: You can color all elements inside the button with a
single CSS rule. You can easily style different states like :hover
, :focus
,
or :disabled
. And you can even animate the color change:
.primary-btn {
color: #f118a6;
transition: color 0.5s ease;
}
.primary-btn:hover, .primary-btn:focus {
color: #920c64;
outline: 2px solid currentColor;
}
Use CSS Variables for Multi-Colored Images
You can even use CSS variables inside SVG code.
This can be useful when you're dealing with an SVG image that uses multiple colors. In this case, you can still link the main
color to the color
CSS property. Then, define CSS variables for the other colors:
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
<path d="..." />
<path fill="var(--secondary-fill)" d="..." />
</svg>
In the example above, the first and second path
elements are colored by the defined font color. The
fill of the third path can be controlled through the CSS variable --secondary-fill
:
.icon {
color: darkred;
--secondary-fill: white;
}
Check out the article “Multi-Colored SVG Symbol Icons with CSS Variables” for an in-depth look at the concept.
Make Your Images Accessible
Last, but not least: Don't forget about accessibility! If the SVG image is purely decorative, then
use aria-hidden="true"
to hide the element from assistive technologies.
If the image conveys important information, then assign role="img"
and provide alternative text
through the aria-label
attribute. Read “Accessible SVGs”
for more information and use cases.
Posted on