SVG replaceColour


Hi i am stuck with this SVG file.
I want it to be able to change colour based on the user input.
I was trying to use the replaceColour but with no luck

Would you know a better strategy, or I’d better to use JUCE components ?

untitled (2.2 KB)

As you can see one is with transparent background and the other one white, but i didn’t find a way to change color keeping the shades.
Sorry I am very new with svg.

Thanks in Advance



I believe replaceColour() only works on solid colour fills, not gradients. Looking at juce_DrawableShape.cpp line 157:

static bool replaceColourInFill (FillType& fill, Colour original, Colour replacement)
    if (fill.colour == original && fill.isColour())
        fill = FillType (replacement);
        return true;

    return false;

bool DrawableShape::replaceColour (Colour original, Colour replacement)
    bool changed1 = replaceColourInFill (mainFill,   original, replacement);
    bool changed2 = replaceColourInFill (strokeFill, original, replacement);
    return changed1 || changed2;


Yeah thanks i supposed that…
what would it be you strategy then, for achieving my purpose ?



I usually go with juce::Component, as SVGs are pretty hard to work with if you need colours/shapes/positions changing. replaceColour() also requires saving the new colour each time, since you’ll need to remember the previous colour value to be able to replace it again.

For more complex graphics it may work to split the work between SVG for complex pieces and regular juce::Graphics for the simpler parts