.presentation-svgs .css.example
{
    &:after
    {
        display: inline-block;
        content: svg-image-data-url("checkmark");
    }
}

.presentation-svgs .color.example
{
    &:before
    {
        display: inline-block;
        content: svg-image-data-url("checkmark", $fill: $color-dummy-11);
    }

    &:hover:before
    {
        content: svg-image-data-url("checkmark", $fill: $color-dummy-15);
    }

    &:hover
    {
        // IE10 needs something to happen to the hovered element itself,
        // otherwise it does not change the :before pseudo-element's state
        position: relative;
    }
}

Content SVGs

A content image is an image that delivers some meaning on its own and does not merely supplement other visible data.

Content images are rendered in HTML and should always contain an accessible text alternative.

Content SVG images are much rarer. An example would be the following table:

Reusable SVG content images

Generic content SVG images which may be reused in multiple pages are stored in gulp/base/assets/images/sprite.svg image sprite file and should be included in the page as a linked <use> element inside an <svg> element.

All three examples below render the same output:

# SVG helper methods for FRONT:

= svg_icon_tag :checkmark, title: "Yes!"
= svg_sprite_image_tag "icon-checkmark", class: :icon, size: 20, title: "Yes!"


# Plain HTML for INFO and SYSTEM sites:

<span class="svg icon checkmark">
    <svg
        width="20.0" height="20.0" viewBox="0 0 20.0 20.0"
        class="symbol" aria-label="Yes!" role="img"
    >
        <title>Yes!</title>
        <use xlink:href="/assets/images/sprite.svg#icon-checkmark"/>
    </svg>
</span>

NOTE: The xlink:href attribute of <use> tag must use the versioned asset path in environments where the asset manifest file is present.

When a custom size is not given or the given size matches the original dimensions of the SVG symbol itself, the <svg> tag does not need to be wrapped inside an outer box:

# HAML:
= svg_custom_image_tag "ergo-logo", title: "ERGO"
= svg_sprite_image_tag "custom-ergo-logo", class: :custom, title: "ERGO"

# HTML:
<span class="svg custom ergo-logo">
    <svg
        width="103.0" height="30.0" viewBox="0 0 103.0 30.0"
        class="symbol" aria-label="ERGO" role="img"
    >
        <title>ERGO</title>
        <use xlink:href="/assets/images/sprite.svg#custom-ergo-logo"/>
    </svg>
</span>

Icons vs other reusable SVG content images

The SVG sprite contains multiple types of images:

• interface icons meant to be used inside a consistently sized box throughout the site
• product icons, also of consistent size
• other images which have no size restrictions.

Icon symbols have the icon- prefix in their symbol IDs and are always rendered by centering them inside a 20x20 px box using the svg_icon_tag helper.

= svg_icon_tag :checkmark, title: "Yes!"

The following interface icons are defined in the sprite file:

Product icon symbols have the product- prefix in their symbol IDs and are always rendered in a 60x60 px box using the svg_product_icon_tag helper.

= svg_product_icon_tag :octa, title: "OCTA"

The following product icons are defined in the sprite file:

The following benefit icons are defined in the sprite file:

The following investment icons are defined in the sprite file:

Other SVG images defined in the sprite file:

Sprite SVG images are part of the DOM and therefore their fill and other properties can be changed via CSS.

Single-purpose and/or complex SVG content images

Custom single-purpose SVG images which appear only in a single page may be used as inline <svg> elements with all their paths in the same page without using the external sprite file.

This approach is mainly intended to be used for complex SVG images, to avoid making the sprite file unnecessarily large.

  <svg width="175.45467" height="159.01231" viewBox="0 0 526.36401 477.03693" aria-label="An impossible triangle">
    <title>An impossible triangle</title>
    <g transform="translate(-91.423882,-253.5866)" stroke="#000">
      <path
         d="M 312.32408,254.29303 L 497.87767,584.55178 L 291.61277,584.66663 L 252.04899,655.38029 L 617.26698,655.43727 L 394.46457,254.0866 L 312.32408,254.29303 z "
         fill="#fff"
       />
      <path
         d="M 312.31392,254.26591 L 91.923882,655.37223 L 132.32998,728.10322 L 315.16759,396.77318 L 417.193,584.66155 L 498.0052,584.66155 L 312.31392,254.26591 z "
         fill="#777"
          />
      <path
         d="M 315.20979,396.83568 L 355.50104,471.05493 L 251.87272,655.43409 L 617.28788,655.62366 L 578.81741,730.12352 L 132.3464,728.07665 L 315.20979,396.83568 z "
         fill="#000"
       />
    </g>
  </svg>