Unleash the Power of Inline SVG Images

Posted on 06/22/2023

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.

Woman painting a cat figure on a piece of paper. 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.