Best approach to change color of svg file

Hi Vincent and All,

I am creating a program that extensively uses svg. Some of the objects I use are svg images that are read from a folder on disk and converted for use as images within the the overall svg image I am creating. Currently all the images are colored black.

I load the svg image/file from disk named “image_t” like this:

$tDom_Image:=SVG_New_image ($Dom_Chart;$image_t;$x;$y;$w;$h)

(I believe we still don’t have embedded svg within svg, do we? 4D v16?)

What I would like to do is be able to change the color of certain svg images on the fly.

But by this time they’ve been converted into images.

So I’m guessing what I have to do is read the raw xml in and change the color property in the file. Doable but more work.

This is a capability I want to add so the end user can set the color to whatever they would like it to be. It’s actually a collection of images. Probably will have different named collections so that there can be a set that’s black and different sets of colored images.

Or is there another way?

Thanks,
John…

rather than loading an external svg file into svg as image,
I think it would be better to make use of standard svg features such as
defs/use, defs/style (css classes).

Hi Miyako,

Not sure how to do that? Do you have a simple example I can look at?

In my case the end user will be able to create many different color schemes. I am building the UI to make it happen. So there could be a s few as a couple to dozens of color themes with 40 or more objects in each theme.

Then the user will will pick the theme from a popup or dropdown and it will apply to the chart.

So this is what I am after.

Hope that makes sense.

Appreciate your help,
John…

see this SVG with a style-section

<style type="text/css" >
  <![CDATA[

    circle.myGreen {
       stroke: #006600;
       fill:   #00cc00;
    }
   circle.myRed {
   stroke: #660000;
   fill:   #cc0000;
}

  ]>
</style>

<circle  class="myGreen" cx="40" cy="40"  r="24"/>
<circle  class="myRed"   cx="40" cy="100" r="24"/>
I'd use 4DTAGs to change stroke and fill, process them and then export to picture

Hi Ortwin,

So… to make sure I understand.

I have a toolbox of svg files. Let’s call them glyphs. All pretty simple as they are just paths with a few attributes and one of them is fill="#000000".

I just looked and there are approx. about 60-70 currently. Let’s call this color scheme “default colors”.

What I am trying to do is have a UI set up that allows the end user to build as many sets of color schemes as they need. A color scheme means that they can change one or more of the entire collection and then give i a new name. The color scheme will be used to color the chart that’s being built.

If I were building a web page I can see how a css style sheet would be a similar kind of concept.

Now looking at your example:

Is created by using SVG_Define_style?

Does this mean that I would build this code for each object I use? In others words for all 60-70?

In theory it looks like all I would need to do is loop through the color scheme, set a style for each object, and …

Not sure how this can be applied since I am using:

$tDom_Image:=SVG_New_image ($Dom_Chart;$image_t;$x;$y;$w;$h)

Which is how I am currently creating the embedded images.

Here’s is an example svg object (they are all similar in makeup) a slash I will use. How and where would this be modified on the fly to change it’s color?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> slash Created with Sketch.

Appreciate,
John…

SVG is text and xml and a picture.

I’m wondering, why not just replace string Code :
fill="#000000"
with the current color before using the glyph. Treating first as text seems the most easy approach to me.

<code 4D>
$colorSchemeColor:=“fill=”#4E8181""
$toBeUsedSVG:= Replace string($originalSVG;“fill=”#000000"";$colorSchemeColor)
</code 4D>

ccs-style is the more elegant way for sure, but who cares for elegancy?

This might be different when using external styles-files in SVG. Then you only need to exchange the file containing styles, when changing color-schemes.

As always, if 4D does not support that SVG-feature, a 4D web area may come for help.

Hi Ortwin,

That’s what I am leaning towards. Seems easiest. But I can only visualize managing it dynamically by opening the xml file before I use it, change the color attribute, save the file and then load it using the SVG_New_image command.

Seems easy enough and will be quick I think. I just wanted to make sure that I am not making extra work for myself.

OK, looks like the ticket.

Appreciate,
John…

Hi Ortwin,

Well it’s not quite as easy as I thought. Two reasons:

  1. Replace String isn’t working.

  2. Once the color has been changed I won’t know what the string pattern is. (possibly RegEx).

You mentioned: “I’d use 4DTAGs to change stroke and fill, process them and then export to picture”

How would I embed a 4D tag into the svg I gave an example of earlier?

How would I change it on the fly using the same example?

Thanks,
John…

this is your 4D tag Code :

, find in your example, scroll this xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?> slash Created with Sketch.

and here an example of my usage. Using the $received_T of the saved one as template and processing into another $processed_T, adding 1 parameter which expands into
<code 4D>
$received_T:=Document to text($path;$encoding;Document unchanged)
PROCESS 4D TAGS($received_T;$processed_T;$colorString)
$svgRef:=DOM Parse XML variable($processed_T)
SVG EXPORT TO PICTURE($svgRef;$picture_P;Copy XML data source)
DOM CLOSE XML($svgRef)
</code 4D>

does this get you up and running?

sorry for stressing the forums-parser

Hi Ortwin,

Thank you!

I have to go out for a few hours. When I return I’ll give it a look and see how well I follow your instructions!

Appreciate,
John…

Hi Ortwin (…Miyako),

The 4D Tags idea works great!

I am incorporating it with Miyako’s ideas of using SVG Defs/Use commands.

I setup the svg objects with the placeholders.

Then I load the svg object non-destructively and change the color.

Add to the group of Def’s I will need for the drawing.

Later I’ll use the SVG_Use command to place the image where I need it.

Well conceptually, as I only have a prototype right now.

Anyway, this motivated me to add def/use which Miyako was kind of enough to share an example of a number of months ago. (Thank you again Miyako!)

So it’s all coming together now.

Appreciate the ideas and support,
John…