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.