Skip to main content

Style embedded SVG images with CSS variables

You can style SVG images that use CSS variables for their colours per shape, without editing the image itself. Declare the variable names with the cssVars key in the shape style, then set each colour in the format panel or directly in the shape style. Every instance of the SVG shape shares a single copy of the image data in SVG exports, whether you have styled each with different colours or they are all the same.

Design the SVG with variables​

Use var(--name, fallback) for the colours in the SVG. The fallback colour is used when no value is set in this variable.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="var(--bg-color, #2c3e50)"/>
  <circle cx="50" cy="50" r="30" fill="var(--primary-color, #3498db)"/>
  <rect x="38" y="38" width="24" height="24" rx="3" fill="var(--primary-color, #e74c3c)"/>
  <path d="M50 28 L53 40 L65 40 L55 48 L59 60 L50 52 L41 60 L45 48 L35 40 L47 40 Z" fill="var(--accent-color, #f1c40f)"/>
</svg>

The same variable may be used in multiple places — in the example above, --primary-color styles both the inner circle and the rectangle. Variables can be used in style attributes and CSS rules in a <style> section as well as in presentation attributes such as fill and stroke.

Declare the variables in the shape style​

  1. Select the SVG image shape in your diagram, then click Edit Style in the format panel (press Ctrl+E on Windows or Cmd+E on macOS, or select it from the right-click context menu).
  2. Add the cssVars key with the comma-separated variable names. The leading -- in the names is optional.
shape=image;image=data:image/svg+xml,...;cssVars=primary-color,bg-color,accent-color;

The value for each variable is stored in the shape style under the variable name with a -- prefix, for example --primary-color=#00aa00;. Values may use light-dark(lightColour, darkColour) to render different colours in light and dark editor modes.

Note: Semicolons are not allowed in the style values, as a semicolon is used to separate the key=value pairs in the shape style.

Set the colours in the format panel​

When cssVars is declared, the Style tab of the format panel shows a colour option for each variable. Deselect the checkbox of a colour to remove its value and return to the fallback colour in the SVG image.

Linked SVG images​

Colour styles on linked SVG images (via a URL) on the drawing canvas require the image to be hosted on the same domain as the editor. When a colour is set in the format panel, the linked image is automatically embedded into the diagram, so that the styled image is self-contained for exports and offline use. The original URL is kept in the imageUrl style of the shape.

Shared image data in SVG exports​

In SVG exports, all instances of an SVG image with cssVars in a diagram reference a single shared definition of the image, independent of their colours and sizes, which keeps the exported file small. The same applies to recoloured copies of images with editable CSS rules.

This feature is available in draw.io 30.4 and later.