SVG images

Owned by Dave Wallace
Nov 04, 2020

Overview

One of the changes the Tui framework brings is an implementation of SVG for icons and images. We don't manipulate these much in our core code, but other developers can. We do wrap each of our components in a Vue template that gets bundled for optimal cached delivery to the client.

Implementation

The preferred approach to using SVGs is to embed them in Vue components. The reason for this is that they can then be coloured according to the theme, using CSS variables.

A similar approach is taken for icons, however it is assisted by automated tooling specific to icons. For SVG icons, please see the SVG icons page.

Generally an SVG image should be its own Vue component that contains nothing else. This will allow for it to be easily replaced in a theme.

To allow for scaling, you should provide a viewBox attribute on the SVG element. By default, the SVG will scale to fit its container (width and height are auto), but this can be overridden through CSS.

Classes can be added to both the SVG root element and elements inside it in order to style them, and the styles can make use of CSS variables like normal. This allows for images that change depending on theme variables.

Examples

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" class="myprefix-logoImage">
    <g transform="scale(.97222)">
      <path
        transform="translate(-238.2 -405.18)"
        d="M256.4 412.65a9.34 9.34 0 00-3.7-7.47 9.39 9.39 0 00-1.78 13.15 9.73 9.73 0 001.78 1.79 9.4 9.4 0 003.7-7.47"
      />
      <path
        transform="translate(-238.2 -405.18)"
        d="M246.91 418.45a9.8 9.8 0 00-8.71-.56 9.83 9.83 0 0013.54 7.82 9.83 9.83 0 00-4.83-7.26"
      />
      <path
        transform="translate(-238.2 -405.18)"
        d="M258.26 418.45a9.83 9.83 0 00-4.19 4.81 11.41 11.41 0 00-.71 3 33.13 33.13 0 00-.18 3.6v3.26h.46c0-.09.06-1.95.09-2.29a10.69 10.69 0 01.21-1.38 3.73 3.73 0 011-1.95 4.15 4.15 0 012.22-.93c.88-.16 1.76-.2 2.63-.43a9.79 9.79 0 007.21-8.24 9.79 9.79 0 00-8.71.55"
      />
    </g>
  </svg>
</template>

<style>
.myprefix-logoImage {
  fill: var(--color-primary);
}
</style>

Tips and known limitations

  • Use SVGOMG to optimise SVGs for use (removing unnecessary groups/attributes/etc). Check the Prefer viewBox to width/height option near the bottom after uploading an SVG.
  • Remove IDs from SVG elements.
  • You can use currentColor to take the value of the current text colour. This is used extensively for icons.

Recommended reading