Skip to content
post

Adding an editable SVG in canva

By: kanyi

Canva is an easy-to-use design software with the most complex features you find in other design software like Illustrator removed. This has the huge benefit of simplifying the design process and making it accessible to everyone (designers and non-designers).

Some design features need to be done the Canva way like uploading an SVG and being able to change its colors.

You cannot edit SVGs with anchor points the same way you would on comprehensive design software, but you can change the colours of an SVG.

Currently, you can’t change the colour of an SVG that is specified as a name. What does this mean though, SVG is defined using code which means the colours too are defined using code.

What is an SVG

For this context, an SVG is a graphic with underlying code. The code defines the properties of the SVG. So if we design a custom SVG like this ‘fork and spoon’, we get code that can be changed dynamically using software like Canva.

In the code, there are a few ways to define the colour the most common being fill and stroke. This colors is defined on the fill property fill="black" for the fork and fill="FF0000" (red) for the spoon and here lies the problem when dealing with custom SVG’s in canva.

After uploading the SVG, canva detects the colors and for whatever reason color names are not detected, specifically for custom SVG’s.

On the properties tab, only the color red is detected on Canva

We will only be able to change the colour of the spoon which is defined as a HEX value (#ff0000, which is red) but we won’t be able to change the fork which is defined as a colour name instead of a HEX code.

So we need to change colour names to HEX code, in this case #000000 in place of black.

And now we can change the colours of each individually.

This can be an easy fix if Canva can also detect colour names on custom SVGs, but until then this is how you can make your custom SVG’s colour editable.

Conclusion

If you cannot change the color of your SVG in Canva, check to see that the fill or stroke colors are defined as HEX values.

Leave a Reply

Your email address will not be published. Required fields are marked *