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?

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.

Interactivity

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 vecta.io or vecta.io/nano 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.
InteractivityAvailable.
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" />
</object>

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:

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

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.

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);
}

Comparison

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

Conclusion

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!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

RELATED POSTS

July 28, 2018 · SVG · Web · Diagramming

Color selection made easy

Found yourself scratching head to pick a professional looking yet interesting color to give a final touch to your drawings? We worked some magic and created a color stencil in Vecta, for everyone who needs good colors laid out in their drawings w...

July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

May 27, 2018 · SVG · Web · PNG

Making SVG easier to use (Why we build Nano)

There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account