Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

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>