Changing Color of SVG

Development
1

Hey guys…I need a bit of help. I’m trying to get away with doing filmstrips for animations. I want to get more into using svg files. Specifically, is it possible to change the color of the SVG intrinsically without a color overlay? How would you do this in code.

I have attached here a play icon in SVG I’ve exported from a shape PSD layer. Can someone show me the code to changing the color of the svg?

My assumption is that it is a vector and treated as such and can have the color changed to anything.

Here is the download: Download Here

2

If it is in a Drawable, then this works:

    Drawable icon = Drawable::createFromImageData (data, size);
    bool result = icon->replaceColour (Colours::black, Colours::white);
3

How do you create a specific svg drawable? I either export a shape from PhotoShop to an svg.

Thanks so much…

4

data and size are from the resources in BinaryData, such my_img_svg, and my_img_svgSize

5

For simple shapes like this, which I use for buttons e.g, I usually open the svc-file in my browser, view the source and take the gist of the shit, paste it as char * in the source file, do a Drawable::parseSVGPath, use path.getTransformToScaleToFit() to fit my destination area, scale it, and do g.fillPath() in paint(), which will render it in the currently selected colour. Something like:

static char *mySvg = "M1998.01,978.981a29.988,29.988,0,1,1,30.01-29.988A30,30,0,0,1,1998.01,978.981Zm0-54.524a24.536,24.536,0,1,0,24.55,24.536A24.544,24.544,0,0,0,1998.01,924.457ZM1988,936.141l25.73,12.424v0.856L1988,961.845v-25.7Z";
.
.
path = Drawable::parseSVGPath(mySvg); //in the relevant constructor
.
.

void paint(Graphics& g)
{
.
.
   auto tr = path.getTransformToScaleToFit(getLocalBounds().toFloat().reduced(3.5), false, Justification::centred);
   path.applyTransform(tr);
   g.setColour(Colours::red);
   g.fillPath(path);
}

To save a few cpu cycles you could do the scaling in your resized() function, so you don’t have to scale it for every paint…

6 Likes
6

What would be the code to resize it?

7

Whom are you asking?

8

Anyone

9

It’s resized in the line

path.applyTransform(tr);

to fit the painted component with a margin of 3.5 pixels around.

10

Would anyone know how to add blurred effect to line drawings. On the left you see the lines that were drawn by Juce and on the right you see the PSD photoshop. Is there anyway to get this dropshadow type effect with Juce Drawing tools?

In the PSD it’s an Inner Shdow (See attached)

Shadow%20Blurr%20Lines
Shadow Blurr Lines.png1531×565 411 KB

Inner%20Shadow
Inner Shadow.png790×481 38.5 KB

11

There’s this:

https://docs.juce.com/master/classDropShadowEffect.html

It looks pretty bad & isn’t very tweakable but it gets the job done efficiently.

There’s also Vinnie Falco’s library that contains implementations of all the Photoshop Filters you reference above — this looks great and is powerful, but it uses a very old version of JUCE and is very inter-dependent (aka you need to use the entire library to just get the photoshop parts).

I would love it if he rewrote that to work with modern JUCE, but I imagine that’s a large task and he’s busy doing other things (like making Boost awesome).

In my app I tried both, and neither were usable. The JUCE one looks like ass, and the VFLib came with too much extra baggage (some of it dates back to JUCE 2 even). I ended up manually adding very small gradient rectangles where I needed them.

This took forever, but looks very good!

I hope there is an improvement in JUCE regarding drop shadows soon.

3 Likes