Skip to content

Importing SVG

We have already seen that SVG files are included as assets just like images (or any other assets). However, since SVG are treated specially, we will dedicate a separate chapter to these asset type.

Let's copy some of the Bootstrap icons from the package into our src directory for demonstration purposes:

1
2
3
4
cp node_modules/bootstrap-icons/icons/award.svg src/images/
cp node_modules/bootstrap-icons/icons/bootstrap.svg src/images/
cp node_modules/bootstrap-icons/icons/code.svg src/images/
cp node_modules/bootstrap-icons/icons/database.svg src/images/

Let's write again a HTML file:

src/amazing-button-svg.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<strong>Left: local file / Right: node package</strong><br />
<hr />
Using &lt;img&gt;-Tag:<br />
<img src="images/bootstrap.svg" height="32px" />
<img src="~bootstrap-icons/icons/bootstrap-fill.svg" height="32px" />
<hr />
Using SVG code:<br />
<span class="my-svg-1"></span>
<span class="my-svg-2"></span>
<hr />
Using SVG code with ID from Sprite:<br />
<span class="my-svg-3"></span>
<span class="my-svg-4"></span>
<hr />
Using ID from Sprite:<br />
<svg width="32px" height="32px"><use xlink:href="#database--sprite"></use></svg>
<svg width="32px" height="32px"><use xlink:href="#database-fill--sprite"></use></svg>

And a JavaScript file:

src/amazing-button-svg.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import htmlTemplate from "./amazing-button-svg.html";
import awardSourceLocal from "./images/award.svg?source";
import awardSourcePackage from "bootstrap-icons/icons/award-fill.svg?source";
import codeSpriteLocal from "./images/code.svg?sprite";
import codeSpritePackage from "bootstrap-icons/icons/code-slash.svg?sprite";
import "./images/database.svg?sprite";
import "bootstrap-icons/icons/database-fill.svg?sprite";
export default class {
  constructor(element) {
    console.debug("Starting Import SVG");
    element.innerHTML = htmlTemplate;
    // Import SVG code and inject into DOM:
    element
      .getElementsByClassName("my-svg-1")[0]
      .insertAdjacentHTML("beforeend", awardSourceLocal);
    element
      .getElementsByClassName("my-svg-2")[0]
      .insertAdjacentHTML("beforeend", awardSourcePackage);
    // Create SVG code with ID from sprite:
    element.getElementsByClassName("my-svg-3")[0].insertAdjacentHTML(
      "beforeend",
      `<svg viewBox="${codeSpriteLocal.viewBox}" height="32px">
      <use xlink:href="#${codeSpriteLocal.id}" />
      </svg>`
    );
    element.getElementsByClassName("my-svg-4")[0].insertAdjacentHTML(
      "beforeend",
      `<svg viewBox="${codeSpriteLocal.viewBox}" height="32px">
      <use xlink:href="#${codeSpritePackage.id}" />
      </svg>`
    );
  }
}

Let's add another container in which we will start the SVG importing application:

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import createTestContainer from "./create-test-container";

import { default as MyVanillaApp } from "./amazing-button-vanilla";
import { default as MyPackagesApp } from "./amazing-button-packages";
import { default as MyImportApp } from "./amazing-button-import";
import { default as MySvgApp } from "./amazing-button-svg";

import "./style.css";

createTestContainer("Testing Vanilla JS", "test-container-vanilla");
let myVanillaInstance = new MyVanillaApp(
  document.getElementById("test-container-vanilla")
);
myVanillaInstance.maximumNumber = 99;

createTestContainer("Testing Packages", "test-container-packages");
let myPackagesInstance = new MyPackagesApp(
  document.getElementById("test-container-packages")
);
myPackagesInstance.maximumNumber = 49;

createTestContainer("Testing Import HTML/CSS/Assets", "test-container-import");
let myImportInstance = new MyImportApp(
  document.getElementById("test-container-import")
);
myImportInstance.maximumNumber = 79;

createTestContainer("Testing Import SVG", "test-container-svg");
new MySvgApp(document.getElementById("test-container-svg"));

When you run npm run start you should see the running example in your browser.

The easiest way to embed an SVG graphic is to use the <img> tag. We will only briefly outline the other import options here:

  • You can import the source code of a SVG file and use this to inject it into the DOM.
  • You can import the SVG into a global sprite in which all used SVG files will be loaded and then use the ID to diplay the SVG.