Graphics - SVG

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.

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

For information on including the svg-injector package in your project, see SVGInjector docs.

Related topic: CSS - Icons.

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

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.