Skip to main content

How to change the colours of an SVG image

Change the colours of any SVG image directly in Zuuvi - no external editing needed

Written by Nicoline Gotschalk Dalgaard

You can now recolour SVG images directly in the Zuuvi editor. Every colour used in an SVG is listed in the image's properties, so you can match an illustration, icon or background to your brand palette without editing the file outside Zuuvi.

In this article you will learn how to:

  • Change an SVG colour with a hex code or the colour field

  • Match a colour from anywhere on screen with the eyedropper

  • Save colours in your template so you can reuse them

Change an SVG colour

  1. Open your template in the editor.

  2. Select the SVG image on the canvas or in the Layers panel.

  3. In the right-hand panel, go to Edit > Image properties. Check that Type shows SVG.

  4. Under SVG colors, find the list of every colour used in the image, each with its hex code (for example #38729e).

  5. Click the colour you want to change. A colour picker opens.

  6. Choose the new colour in one of two ways:

    • Type a hex code in the HEX field, or

    • Drag the marker in the colour field and use the hue slider to find the colour.

  7. Repeat for each colour you want to change. The canvas updates as you go.

  8. Close the colour picker and click Save.

To go back to an original colour, click the reset icon (circular arrow) to the right of that colour under SVG colors.
​
​


Match a colour with the eyedropper

Don't have the hex code? Pick the colour straight from your screen, for example from your logo.

  1. Under SVG colors, click the colour you want to change.

  2. In the colour picker, click the eyedropper icon to the left of the hue slider (Pick screen color).

  3. Move the cursor over the colour you want to copy. A magnifier helps you hit the exact pixel.

  4. Click to apply the colour. Its hex code is filled in automatically.

  5. Repeat for any other colours, then click Save.


Save colours in your template

Saved colours stay available in the colour picker, so your team can reuse the same brand colours across this and other templates.

  1. Under SVG colors, click the colour you want to save.

  2. At the bottom of the colour picker, make sure Saved in template is selected in the dropdown.

  3. Click the + button (Save color).

  4. The colour now appears as a swatch under Saved in template.

  5. Next time you open any colour picker, click the swatch to apply that colour in one click.

Good to know

  • Only SVG files. The SVG colors list appears only when the selected image is an SVG. PNG and JPG images can't be recoloured this way.

  • Opacity. Use the percentage field under the hex code to make a colour more transparent.

  • Can't see SVG colors? Make sure the image layer is selected and the Edit tab is open in the right-hand panel.

Related Articles
Did this answer your question?