May 25, 2018 · SVG · Web

The Best Way to Embed SVG on HTML (2018)

You've probably came across various ways to embed SVG in HTML, but with the latest browser and technology updates, do we still need an <object> tag or can we use <img> instead? What are their pros and cons and how do they compare?

  • (2018-08-29) Updated inlining with ability to index text and select them.

Use <img> tag and embed fonts using Nano.

If you are embedding an SVG onto your website in this day and age, chances are, you have a lot more factors to consider, in addition to browser compatibility. Before we do a comparison, let's have a look at what factors we are considering, when making a decision:

Design considerations

Alt and title attribute availability

When we embed an image onto HTML, it's always good to have alt and title attributes, for better accessibility. An alt attribute allows a user to view the image description, even when it fails to render on a device, in addition to providing context for search engines. A title attribute allows hovering over the image to obtain more information. Ideally, whatever way you choose to embed an SVG, you should have alt and title attributes.

Browser caching

We all know page speed will be a ranking factor on search engines, especially on mobile sites. It pays to enable browser caching for all static assets including SVG images. Ideally the embedding method will allow easy browser caching and cache busting.

GZip Compression

Unlike PNG and JPEG formats (practically, already compressed), SVG images are very well suited for compression. According to the World Wide Web Consortium, SVG offers anything between 75% - 85% compression ratio, reducing a 16KB file to only 4KB, resulting in considerable bandwidth and speed savings.


Because of security reasons, some SVG embedding methods will block access to external resources including CSS, fonts and javascript. Especially when we have multiple images, ideally our embedding method should be able to refer to a single CSS, font or javascript file (to save resources) and be able to manipulate our embedded SVG.

Search engine indexing

Google has publicly stated that it will index and crawl SVG files. Therefore, it makes sense for better SEO (Search Engine Optimization), that the embedding method we adopt would allow search engines to list our images on image search.

Streamlined work flow

The embedding method we choose should result in an easy and streamlined workflow, that do not require extra work with maintaining complicated CSS and embedding methods.

1. Using an <img> tag

The best and the simplest way to embed SVG into HTML is to use the <img> tag. It has a syntax that is similar to how we embed other image formats like PNG, JPEG and GIF:

<img src="image.svg" />
Browser supportThe <img> tag is now supported across all major browsers that support SVG (IE9+).
Alt and title attributesBoth available.
Browser cachingAvailable.
GZip compressionAvailable.
InteractivityNone. If interactivity is required, use <object> tag.
Search engine indexingAvailable.
WorkflowStreamlined, as with other image formats.

Losing fonts

If you use an <img> tag with web fonts, the fonts will fail to render and resort to using only system fonts.

Losing fonts when using SVG with img tag

This is mainly because images with <img> tags are not allowed to refer to external resources including CSS, fonts and scripts, for security reasons.

You can manually embed fonts into your SVG to resolve this, but most times, will result in large SVG size, and therefore negating the advantages SVG has, over other image formats.

The exception being, to use or to produce an SVG that is very low in size, self contained without losing any fonts, and reduced complexity in your workflow. They not only minify the SVG but also minify the fonts as well, resulting in a very small SVG, comparable to PNG @1X resolution, saving you a ton of bandwidth and makes your site load faster.

No loss of fonts if embedded

Embedding fonts is just a matter of drag and drop, and results in impressive quality without sacrificing file sizes.

2. Using an <object> tag

If you require interactivity, this is your best option:

<object type="image/svg+xml" data="image.svg"></object>
Browser supportThe <object> tag is supported across all major browsers that support SVG (IE9+).
Alt and title attributesNone.
Browser cachingAvailable.
GZip CompressionAvailable.
Search engine indexingNone. Workaround available, but with compromises.
WorkflowMedium. Requires extra work in referring to external CSS and font files.

Technically, <object> tags can be used on many elements, including SVG files, and therefore not recognized as image elements, thus not available on image search. The workaround is to use an <img> tag as fallback:

<object type="image/svg+xml" data="image.svg">
    <!-- Your fall back here -->
    <img src="image.svg" />

Double loading

The only problem is double loading, that is the browser will load the image on the <object> tag, and another image on the <img> tag, even though only one of them is required, while the other is hidden. If you cache your images, and mark these files as cacheable on your server, at least, the browser will load these images from the cache, but still, there is no stopping the double loading.

3. Using inline SVG in HTML5

Essentially you are embedding all your SVG codes inside your HTML:

   <svg xmlns="">
       <text x="10" y="50" font-size="30">My SVG</text>
Browser supportSupported across all major browsers that support SVG (IE9+).
Alt and title attributesNone.
Browser cachingNone.
GZip compressionNone.
Search engine indexingNone.

Because inline SVG is embedded into HTML, there is no necessity for another network request to obtain the SVG file, and therefore inline SVG will load the fastest.

Be aware that you will still get FOUC (Flash of unstyled content) because chances are, your inline SVG will still refer to an external font. To solve FOUC, you will require embedded fonts as listed in Using an <img> tag.

Since the SVG is essentially the DOM, you can easily use external CSS, fonts and scripts. Multiple SVG can be inlined that refers to a single CSS or font files, therefore saving bandwidth and resources.

In addition, you get the ability to select, highlight and copy text in your SVG, plus the ability for search engines to index these text (Our opinion is that one should rely on HTML for SEO, and leave SVG separated, so we can index text using HTML and index images using SVG).

Workflow is way more complicated since SVG is mixed with HTML, and requires a lot more work maintaining dependencies.

4. Using an <embed> tag

Listed here for completeness, but do NOT use <embed> tag. It is not part of HTML specifications but widely supported on all browsers mainly used to implement Flash plugins.

<embed type="image/svg+xml" src="image.svg" />

5. Using an <iframe> tag

Do NOT use an <iframe> where you can use an <object> tag instead. Iframes are difficult to maintain, does not get indexed by search engines and bad for SEO (Search Engine Optimization).

<iframe src="image.svg"></iframe>

6. Using a CSS background image

This is equivalent to using the <img> tag, and subjected to the same advantages and disadvantages.

#id {
  background-image: url(image.svg);


<img><object>Inline SVG
Browser supportGoodGoodGood
Alt and title attributeYesNoneTitle only
Browser cachingYesYesNone
GZip compressionYesYesNone
InteractivityNoneYesVery good
Search engine indexingYesThrough fallbackNone
Loading speedFastSlowerVery fast


As can be seen from comparison, it is clear we are recommending <img> tag for most use cases. The only exception is if you need interactivity, where you require dynamic changes to your SVG based on user interactions.

We do not recommend inline SVG for most cases, with the only exception being preloading pages. Preloading pages are contents shown when your application has yet to completely load, and since inline SVG shows almost immediately, it can be used to show images or graphics while waiting for your application to load.

Have we missed out anything? Do let us know in the comments.

Like the article? Give the author some claps.

Share it with your friends!

Thomas Yip

Founder at, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...


October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

October 25, 2018 · SVG · Web

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...

August 30, 2018 · SVG · Web · Fonts

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best way t...