Using SVGs on the Web — A Deep Dive

There isn’t one best way to implement SVGs on our websites, since each method has its pros and cons. Learning their differences is a crucial skill for a good Web Developer.

Jon Portella

Published in

Level Up Coding

5 min readApr 28, 2021

Welcome to issue #2 of Deep Dives, where we gain in-depth knowledge about a topic through simple explanations.

⏪🔛

Scalable Vector Graphics (SVG) allow you to present pictures that are lightweight and can scale without being pixelated.

However, we can implement them in several ways in our websites, and some methods allow for some features that others don’t.

Implementation-dependent SVG Features

Here’s a list of features that you can have or not depending on how you serve your SVGs.

Alt and title attribute availability

alt attribute sets a text description rendered when the image is not available, whereas a title attribute is usually shown in a tooltip when hovering the image. These are used for accessibility and SEO.

Browser caching

Results in faster load times and, hence, better UX and SEO rankings.

Interactivity

SVGs can be manipulated and animated with CSS and JavaScript. They can also include hyperlinks wrapping their shapes.

Search engine indexing

Important point since Google announced that they’ll start crawling and indexing SVGs.

Encapsulation

SVGs can contain classes and IDs, which should not clash with these attributes on other SVGs on the page.

SVG implementation methods

Now that we know which features we may have or not depending on how we embed our SVGs, let’s compare these embedding methods.

They can be divided into two groups by methodology:

Methods related to pointing the browser to the URL of the SVG file. These generally can benefit from browser caching but have limited options for interactivity.
Methods related to hardcoding the SVG inside a static asset such as HTML, CSS, or JS file. These can’t be cached separately as they are embedded in the file, but for this reason, we save HTTP requests, which is interesting since browsers not using HTTP2 can only do a limited number of concurrent requests. Also, they are best for reacting to user interaction.

1. SVG implementation methods related to pointing the browser to the URL of the SVG file.

1.1 As an <img> src

Features

✅ Alt/title attribute
✅ Browser caching
❌ Interactivity
✅ Search engine indexing
✅ Encapsulation

Also, note

If width/height is not specified as an attribute or CSS rule, the original SVG file size is used.
They are encapsulated, so their IDs and classes don’t clash with other SVGs.

When to use

When interactivity is not an issue, for example, if your SVG is not animated on user input.

1.2. As a CSS background-image

Features

✅ Alt/title attribute
✅ Browser caching
❌ Interactivity
✅ Search engine indexing
✅ Encapsulation

Also, note

Same as method 1.1 but this time we can use any HTML tag instead of an img .

When to use

When interactivity is not an issue.
When you can’t use an img tag.
When you prefer to keep the SVG URL in your CSS file rather than in your HTML file.

1.3 As an <object> data

Features

❌ Alt/title attribute
✅ Browser caching
🟡 Interactivity
❌ Search engine indexing
✅ Encapsulation

Also, note

It’s somewhat interactive since it allows setting hyperlinks on parts of the SVG. However, it can’t be modified with JS or CSS.
You can have problems with setting a tabindex attribute.

When to use

When you need hyperlinks in parts of the SVG.

1.4 & 1.5 As an <iframe> or an <embed> src

These last two methods were used in the past but nowadays their usage has decreased. They are generally not recommended for use.

SVGs used as iframe src have raised concerns about hurting SEO. Moreover, using this method we lose the scalability property of the SVG.

And SVGs used as embed src were primarily focused on browser plugins like Flash, which most browsers have stopped supporting.

2. SVG implementation methods related to hardcoding the SVG code inside a static asset such as HTML, CSS, or JS file.

2.1 Inline SVG in HTML

Basically writing the whole SVG code into the HTML document. This is what some popular SVG libraries like d3 do.

Features

❌ Alt/title attribute
❌ Browser caching
✅ Interactivity
❌ Search engine indexing
❌ Encapsulation

Also, note

SVGs implemented this way can be fully manipulated with CSS and JS since their internal tags are treated as DOM nodes.
Since the SVG code is embedded in the HTML, we save an HTTP request for the asset, although now the HTML file is heavier.

When to use

When you need to animate properties on any tag inside the SVG such as color/fill, opacity, and movement.

2.2 As data-uri

Similar to 1.1 and 1.2 but in this case instead of pointing the src property of the image or the CSS URL to an external asset, you just put the SVG code there as value.

Features

✅ Alt/title attribute
✅ Browser caching
❌ Interactivity
✅Search engine indexing
✅ Encapsulation

Also, note

The SVG can be encoded in any shape that the browser understands. In the example, it’s URL encoded, but it can also be base 64 encoded, for example.
Since the SVG code is embedded in the HTML/CSS, we save an HTTP request for the asset, although now the HTML/CSS file is heavier.