Icons

The Preventx Design system makes use of the SVG file type to display icons in a vector format.

What is an SVG?

An SVG (Scalable Vector Graphic) is the preferred format we use for icons. This is because they provide the greatest flexibility in overriding colors, animation, and of course scaling. Unlike raster graphics, vectors are drawn with mathematical points and curves, making them smaller and quicker to render.

The following is an example of a vector's DOM syntax:

<svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100">
<rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/>
<circle fill="white" stroke="black" cx="170" cy="50" r="45"/>
<polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62
309,94 279,79 248,94 254,62 230,39 263,35"/>
<line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>
<line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/>

There are a lot of similarities between the markup of a vector and that of HTML. In the root of the SVG tag, we see an x and y declaration, denoting the starting point on the coordinate matrix. This is where the first vector point of the symbol begins on the SVG's canvas. The width and height values correspond to the values of the viewBox. The viewBox will control the size and shape of the viewable area of the vector.

How to Use SVG Icons

There are three main ways we suggest to use while implementing SVGs in your products: inline HTML, as an external file, or as a sprite sheet either inline or externally.

Inline

To use the SVG inline with the HTML, simply copy and paste the vector's DOM structure into the html.

<button class="button">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" role="img" aria-label="Home">
        <path stroke="none" d="M20.7,11.2c0.3,0.3,0.4,0.7,0.1,1.1c-0.3,0.3-0.7,0.4-1.1,0.1L19,11.7v5.8c0,1.4-1.1,2.5-2.5,2.5h-9C6.1,20,5,18.9,5,17.5
        v-5.8l-0.8,0.7c-0.3,0.3-0.8,0.2-1.1-0.1c-0.3-0.3-0.2-0.8,0.1-1.1l8.3-7c0.3-0.2,0.7-0.2,1,0L20.7,11.2z M7.5,18.5H9v-4.8
        c0-0.7,0.6-1.3,1.3-1.3h3.5c0.7,0,1.3,0.6,1.3,1.3v4.8h1.5c0.6,0,1-0.4,1-1v-7.1L12,5.7l-5.5,4.7v7.1C6.5,18.1,6.9,18.5,7.5,18.5
        L7.5,18.5z M10.5,18.5h3V14h-3V18.5z"></path>
    </svg>
    SVG Icon
</button>

Inline SVGs don't cause an additional resource requests since they are part of the HTML document. This makes them great for small unique icons that aren't used often, or if you need them to be available immediately. However, there is a tradeoff to consider. Embedded icons are not cached like external files would be, meaning that every time the page is refreshed, the client is re-downloading that data.

Embedding an SVG also means that if the icon is used multiple times on a page, each usage is a separate instance, multiplying the file size. We can fix this duplication issue using an inline SVG sprite sheet, which we describe later.

External File

SVGs can be saved and stored as files with the .svg filetype. By using external SVG files, they will cache and can be reused efficiently like rastered image formats. Of course this also means that a request will have to be made for each different SVG file included in a page, which will add to the page's loading time.

<button class="button">
    <svg>
        <use xlink:href="images/icon.svg"></use>
    </svg>
    External SVG Icon
</button>

When using an external reference to an SVG file, the internal styles will become inaccessible. This means that styles set in the page CSS will not cascade into the SVG's internal styles. A useful exception to this rule is the read-only CSS property of currentColor. By having an SVG's internal style, like fill set to currentColor, it will take on the color value of its immediate parent.

Sprite Sheets

An SVG sprite is an SVG image or file that contains multiple symbols. We can reference these symbols separately through their #id that is set within the SVG's internal markup. There are two ways to utilize SVG sprites we recommend: either inline or as an external file.

Inline Sprites

To use a sprite sheet inline, place the entire SVG at the top of the page with style="display: none;" to ensure the sprite is not rendered in the browser.

<body>
<!-- Sprite Sheet, loaded inline somewhere at the top, but hidden: -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="home" viewBox="0 0 512 512">
        <path d="..."/>
    </symbol>
    <symbol id="tag" viewBox="0 0 512 512">
        <path d="...">
    </symbol>
    ...
</svg>

You can then reference the individual symbols like so:

<button class="button">
    <svg>
        <use href="#tag"></use>
    </svg>
Internal Sprite Icon
</button>

A major advantage of using SVGs this way is that you can reference the same symbol multiple times on the same page.

External SVG Sprites

To use a sprite sheet externally, simply follow the same steps as an individual external icon except include the #symbol you wish to reference.

<button class="button">
    <svg>
        <use xlink:href="images/sprite.svg#icon"></use>
    </svg>
    External Sprite Icon
</button>

Icon Library

The following icons have been identified for our current product needs. These SVG files can be found as part of our separate Icons library here:

Icon Library TODO

We use the Font Awesome library as the base of our icon library. If you have a specific need that hasn't been addressed in our library, check the Font Awesome Library for a suitable icon to request it to be added to our curated list.

If you are using SVG sprite sheets and have custom icons you wish to add (or remove unneeded icons), we use a Sprite Sheet Generator TODO

Animated Icons

Planned We plan on adding SVG based animated sprites very soon...