Graphics - SVG

A brief guide to working with SVG graphics in Jumpstart.


NOTE: SVG icons and graphics do not appear when you are viewing the page from a local file. This is because the SVG injection script requires AJAX to work, which only works on a server. To see icons appear, you must view the page from a local server such as the Browsersync server provided in the Dev Tools.

Why embed SVG into HTML?

Scalable Vector Graphics (SVG) offer high-resolution graphics in small file sizes and are the ideal way to display icons and other graphics in your pages. Due to the nature of the vector format, SVG can be scaled to any size without losing image quality.

SVGs can be inserted in a page via an <img> tag, however, in order to get the most flexibility from SVGs, it is necessary to include the whole SVG code in an inline <svg> tag. This allows the browser to override certain aspects of the graphic's rendering using CSS.

Jumpstart includes styles to override the color of the provided SVG icons and other graphics using the theme's color scheme.

In order to take advantage of this, you must embed the SVG code into the page in one of the following two ways.

Injecting SVG with javascript

The simplest way to inject SVG into a page is using a javascript package.

Jumpstart includes the svg-injector package to take care of this.

The script will run when the page loads, swapping out <img> tags for <svg> tags containing the linked graphic. The drawback to using this method is that the graphics will not be visible until the script swaps out the DOM element.

Specify the desired graphic in the src of an <img> tag. The class attribute (along with all valid attributes) will be carried over to the resulting <svg>.

Add data-inject-svg to the <img> tag to instruct theme.js to handle this image.

Code
<img class="icon icon-lg bg-primary" alt="Heart Icon" src="assets/img/icons/theme/general/heart.svg" data-inject-svg />
Result
Heart Icon

Embedding SVG directly in HTML

This is a more hands-on way of embedding SVGs. Use this method if you want to see the graphics rendered immediately on page load.

Copy the code from an SVG file into the HTML inside an <svg> tag. If the graphic is an icon, add any appropriate helper classes such as icon.

Using this method, it can be difficult to see what graphic is embedded by glancing at the code, and the source is not always made obvious.

To make the source of the graphic more obvious, we recommend adding a data-src attribute to the svg tag, which explains where the graphic came from.

Include a <title> tag in the root of the <svg> tag to benefit screen readers and improve accessibitlity.

Code
<div class="col-sm">
    <svg class="icon icon-lg bg-primary" data-src="icons/interface/theme/general/heart.svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <title>Heart Icon</title>
      <path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
    </svg>
</div>
Result
Heart Icon

If you plan on handling all SVGs in this way, you will not need to use the svg-injector package. To remove the package from your pages, delete the script linked in the foot of your pages and also comment out the lines referencing svg-injector in js/mrare/index.js.