SVG not working with overlay? how to fix

I’ve created some SVGs in sketch, but when I add it to sparkle, it says the color overlay feature won’t work because “The internal structure of this SVG prevents a color overlay”.

what does that mean, and how do I fix it? It simply has text and shapes in it…


ok…I just solved this…

make sure to convert any text into shapes/outlines. then your exported SVG will work fine in Sparkle

Hi @uelsimon, yes text is something the SVG library used by Sparkle doesn’t deal with. But more in general text should always be transformed to outlines because it will otherwise behave like a system font. That is, if the browser viewing the SVG doesn’t have the font, it will fall back to a default serif or sans serif font.

1 Like