SVG

Ready Added in 2.0.0

Inject inline SVG images into the page markup and style them with CSS.

SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.

Usage

To apply this component, add the gls-svg attribute to an <img> element.

<img src="" width="" height="" gls-svg>

Using the gls-svg attribute also allows you to inject a symbol from the SVG file. Just append the symbol’s ID to the image path as you would in any fragmented URL.

<!-- Targets the SVG image -->
<img src="https://utahhealthcare.github.io/gloss-docs/gloss-source/src/images/icons/cloud-download.svg" width="40" height="40" gls-svg>

<!-- Targets a symbol inside the SVG image -->
<img src="https://utahhealthcare.github.io/gloss-docs/images/icons.svg#cloud-upload" width="40" height="40" gls-svg>

Note SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, add the .gls-preserve class to the SVG itself or the elements inside the SVG.

Note The loading="lazy" attribute for <img> elements is taken into account, and SVG images will be injected as inline SVG as they enter the viewport.

Stroke Animation

There are two ways to animate SVG strokes. First by using the Animation component and gls-svg="stroke-animation: true", and second by using the Parallax component.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
`src`	String	`''`	The SVG source URL. If a location hash is present, only the `<symbol>` of the SVG with the given ID is shown.
`stroke-animation`	Boolean	`false`	Animate all elements with the `stroke` attribute in the SVG.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.svg(element, options);

Properties

svg

A JavaScript Promise that will resolve with the added SVG Node.

Gloss.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })