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
Large size: 128px × 128px
<!-- 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
Request the symbol-defs.svg file. This file contains the symbol definitions for all of the SVG images currently available from the Pattern Library.
Upload symbol-defs.svg to a directory on your website
Add svgxuse.min.js to your page.
<script defer src="PATH-TO/svgxuse.min.js"></script>
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).
cimgclass on the
<svg>tag for proper sizing styles.
<svg class="cimg"><use href="PATH-TO/symbol-defs.svg#cimg-NAME"></use></svg>