This tutorial discusses ways you can add SVG images to your website. Unlike bitmap images, SVGs are XML markups that describe shapes, lines, and fills, so a document can be used in many different ways.

In this series we have discussed what SVGs are, why you should consider them and basic vector drawings.

At some point, you may want to embed a nicely formatted SVG directly into your webpage. There are at least six ways to achieve this – but all methods have pros and cons.

1. Place SVG XML directly on your HTML page

You can add an SVG image as a code island directly to your HTML page using the outer one <svg> Tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
</head>
<body>

  <h1>Embedded SVG</h1>

  
  <svg width="300px" height="300px"
    xmlns="https://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>

</body>
</html>

This method works in all modern browsers. SVG becomes part of the DOM page, so it can be manipulated using CSS or JavaScript to add animation or respond to click events. (Note that JavaScript embedded in SVG is blocked.)

The biggest drawback is that SVG has to be embedded on every page that requires it, and it may have to be repeated to get reusable icons. This increases the weight of the page, and while HTML may be cached, SVG code cannot be (easily) reused elsewhere.

One solution to a repetitive image is to create a hidden SVG block for each page (using CSS display: none). This may optionally include multiple images referenced id:

<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <symbol id="box" viewBox="0 0 32 32">
      <title>box</title>
      <rect width="32" height="32" fill="#00c" />
    </symbol>
    <symbol id="circle" viewBox="0 0 32 32">
      <title>circle</title>
      <circle cx="16" cy="16" r="16" fill="#c00" />
    </symbol>
  <defs>
</svg>

Individual items can then be used multiple times SVG use element:

<svg width="20" height="20">
  <use xlink:href="#box" />
</svg>

<svg width="30" height="30">
  <use xlink:href="#box" />
</svg>

<svg width="40" height="40">
  <use xlink:href="#circle" />
</svg>

The original image can still be formatted with CSS, although it is not possible to apply other styles to the image <use> self.

2. Use <img> Tag

SVGs can be added to your website like any other image:

<img src="image.svg" alt="my image" />

It’s plain width, height, alt and others <img> attributes can be added if you need them.

The browser treats SVG like any other image. For security reasons, all scripts, external stylesheets, links, and other SVG interactions will be disabled.

The target anchor can be used if multiple images are defined in one SVG – such as myimage.svg#circle – but this does not work in older browsers.

3. Use a CSS wallpaper

SVGs can be used as the CSS background for any element:

#myelement {
  background-image: url('./image.svg');
}

UTF8-encoded internal data URIs can also be useful for smaller, regularly used SVG files that are unlikely to change frequently (and invalidate the entire stylesheet):

.myelement {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="100" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>');
}

Like <img> Tags, scripts, links, and other types of interactions are disabled when you use this method.

4. Download <iframe>

Browsers can render an SVG document alone, so you can upload the image iframe:

<iframe src="./image.svg">
  Your browser does not support iframes.
</iframe>

This can be useful if you have a portable SVG with your own scripts and styles that you need to isolate from the main page. However, processing the SVG image from the JavaScript on the main page becomes more difficult, especially if it is hosted on another domain.

5. Use <object> Tag

HTML <object> tag can be added to your SVG page:

<object type="image/svg+xml" data="./image.svg">
  <img src="./fallback-bitmap.png" />
</object>

Backup text or images can be used <object> block in the same way as iframes.

Styles and scripts in SVG are executed. SVG cannot be formatted with CSS on an HTML page, but scripts can manipulate individual elements:


const objTag = document.querySelector('object');


objTag.addEventListener('load', () => {

  
  const svg = objTag.getSVGDocument();

  
  Array.from(svg.getElementsByTagName('path'))
    .forEach(p => p.setAttribute('fill', '#00f'))

});

<object> was the most used option about a decade ago because it was the only reliable way to use SVG in older IE releases.

6. Use <embed> Tag

Including me <embed> for perfection, but don’t use it! It is similar to <object> in that it embeds external content on the page but is designed to communicate with an external application such as a browser extension.

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

Since the cessation of Flash and Silverlight, modern browsers have deprecated and removed support for browser extensions. Never trust <embed>.

What SVG technology should you use?

If you use SVG as an image and you don’t need to change the style or add scripts, <img> tag or CSS background is possibly the best option. The file can be cached in the browser and reused on other pages without downloading.

If you need interactivity, the most popular option is to add SVG directly to HTML. Styles and scripts can manipulate the DOM, links can be added to any format, and sophisticated SVG filters can be applied to other page elements.

<object> tag has dropped in popularity. However, it is still a useful technology if you want to keep SVGs separate and cached, but they require little JavaScript manipulation.

Iframes may be suitable for some projects, but never use them <embed> unless you have the inconvenience of encoding an ancient browser.

LEAVE A REPLY

Please enter your comment!
Please enter your name here