CyberAlien.devsoftware development blog

Published on 8 Sep 2025

How to render SVG

There are many ways to render SVG, this article explains pros and cons of each method.

HTML or CSS

All rendering methods can be split into 2 major groups:

  • Rendering icon in HTML by embedding an entire SVG in HTML.
  • Rendering icon as an external resource: in CSS or <img />.

The main difference is access to icon content.

When embedding icon in HTML, you have full control over icon's content. That means you can change any properties of each shape: change them with JavaScript to animate shapes, style them with CSS including CSS variables.

When rendering icon as an external resource, icon content is completely separated from document. You have no access to icon content, so you cannot change anything inside icon. Icon has no access to parent document, so it cannot inherit anything, such as CSS variables.

HTML

Embedding an entire SVG in HTML is the most common way to use SVGs.

Advantages:

  • Easy to manipulate elements.
  • Style elements with CSS.

Disadvantages:

  • Large document size, cannot be cached.

Document size

The biggest disadvantage of embedding icon in HTML is document size.

Icons are often quite large, when many icons are used in the same document, document can become very big.

One solution is to use SVG sprites.

But that's for another article.

Access to all shapes

The biggest advantage of embedding an icon in HTML is access to all elements.

You can change shapes with JavaScript and you can style each element with CSS.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <path d="M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" />
        <path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
    </g>
</svg>
svg
svg {
    width: 48px;
    height: 48px;
    color: var(--color-primary);
}
svg:hover {
    color: var(--color-accent);
}
svg:hover [stroke-width='2'] {
    stroke-width: 1;
}
css

Hover icon to see color and stroke width change.

You cannot do that when using icon in CSS. To achieve the same effect, you need to render a different icon.

External resource

Icon can be rendered as external resource by:

  • Using <img /> tag, similar to raster images.
  • Using icon as url in CSS.

Icon can be rendered in CSS in 3 ways:

  • Background image.
  • Mask image.
  • Content of pseudo element (basically the same as <img /> tag).

Advantages:

  • External resources are cached.
  • If an icon contains scripts, scripts will not be executed.

Disadvantages:

  • Cannot change icon content.
  • SVG animations timing is broken. But that's for a different article.

Demo

.streamline-ultimate-color--check-square {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('data:...');
}

.material-symbols--folder-rounded {
    display: inline-block;
    width: 48px;
    height: 48px;
    --svg: url('data:...');
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

First icon is rendered as a background image.

Second icon is rendered as a mask image, using currentColor as a background color. Hover it to see color change.

See article by Anthony Fu for details.

Conclusion

What method to use?

That depends on icons and how you want to render them.

Generally, it is better to render icons as background or mask images, unless:

  • You want to use CSS variables, other than basic color that you can set to currentColor.
  • Icon uses currentColor and other colors.
  • You want to have access to shapes. For example, if you want to animate shapes or change color of specific shape.
  • Icon is animated and animation timing matters.

Related articles