Pattern Library (ver. 1.9)

SVG image usage

SVGs as regular images

SVG files may be used exactly like a regular image. This means you can use them with <img> tags and they can be set as background images.

Download the individual SVG file and use it as you would for a regular image.


<!-- SVG used as a regular image -->
<img class="cimg" src="image.svg" alt="">

<!-- SVG used as a background image -->
<div style="background-image: url( 'image.svg' );"></div>

SVG image sizing

For brand alignment with Creative Services, the cimg SVG images found on the SVG image list page have two sizes.

Default size: 64px × 64px
Class: cimg

Large size: 128px × 128px
Class: cimg cimg-lg


<!-- Default: 64px × 64px -->
<img class="cimg" src="images/train-o.svg" alt="">

<!-- Large: 128px × 128px -->
<img class="cimg cimg-lg" src="images/train-o.svg" alt="">

If using the cimg SVG images as background-images in your application or website, please ensure the sizes are set to either 64px × 64px or 128px × 128px.

SVG `use` with an external reference

SVG has a <use> element which allows you to refer to and render a specific SVG chunk from a single external file. The external file serves as the master source of all SVG image definitions, like an SVG sprite.

Follow the steps below on how to use the <use> element:

  1. Request the symbol-defs.svg file. This file contains the symbol definitions for all of the SVG images currently available from the Pattern Library.

  2. Download svgxuse.min.js. This is a JavaScript polyfill to enable support for external SVG usage on IE (9, 10, 11) and other browsers that do not support it automatically. Read the documentation here.

  3. Upload symbol-defs.svg to a directory on your website

  4. Add svgxuse.min.js to your page.

    
    <script defer src="PATH-TO/svgxuse.min.js"></script>
  5. Take the code below and update the path to symbol-defs.svg. Review the SVG image list to see all of the images available for use. Replace #cimg-NAME with the name of the image (be sure to include the cimg- prefix).

    Use the cimg class on the <svg> tag for proper sizing styles.

    
    <svg class="cimg"><use href="PATH-TO/symbol-defs.svg#cimg-NAME"></use></svg>