change image color in svg format and save to png or jpg

[Mahir]

Hello,
I am trying change some part of images in svg format and save as png or jpg but I just save format,without changing collors.
can you help me pls, this is svg format:

this is svg image:
https://upload.wikimedia.org/wikipedia/ ... _only).svg

and this is php cod:

<?php

$usmap = 'images/mahir.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

/*loop to color each state as needed, something like*/


$idColorArray = array(
"AL" => "339966"
,"AK" => "0099FF"
,"WI" => "FF4B00"
,"WY" => "A3609B"
);

foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
$svg = preg_replace(
'/id="'.$state.'" style="fill:#([0-9a-f]{6})/'
, 'id="'.$state.'" style="fill:#'.$color
, $svg
);
}


$im->readImageBlob($svg);

/*png settings*/
//$im->setImageFormat("png24");
//$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); /*Optional, if you need to resize*/

/*jpeg*/
$im->setImageFormat("jpeg");
$im->adaptiveResizeImage(720, 445); /*Optional, if you need to resize*/

file_put_contents ("converted/test.jpg", $im); // works, or:
$im->clear();
$im->destroy();

?>

can you help me pls!
Thanks

[snibgo]

Does the "preg_replace" do what you want? Why do you have "fill:" when SVG needs "fill="?

[Mahir]

preg_replace not working what I wanth,
I cange fill: to fill='?' but still not working,
like this

foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
$svg = preg_replace(
'/id="'.$state.'" style="fill= #([0-9a-f]{6})/'
, 'id="'.$state.'" style="fill= #'.$color
, $svg
);
}

[Mahir]

any suggestion?
can somebody show me sample code how to change fill in svg pls.?
Thanks

[snibgo]

If preg_replace still doesn't do what you want: I would expect one of those string to be searched for in the SVG. But neither will, because your SVG doesn't contain the word "style".

[Mahir]

this is new svg and new php code,it is simple code but still not working.
Can you pls check what is problem?
this is svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1645.9 589.78">
<defs>
<style>.cls-1{fill:red;}.cls-1,.cls-2,.cls-3{stroke:#fff;stroke-miterlimit:10;}.cls-3{fill:#207ab2;}
</style>
</defs>
<title>mahir</title>
<circle class="cls-1" cx="185.19" cy="185.19" r="184.69"/>
<circle class="cls-2" cx="795.91" cy="321.42" r="267.86"/>
<circle class="cls-3" cx="1486.21" cy="247.44" r="159.18"/>
</svg>

and php code:

<?php

$usmap = 'mahir.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

$svg = preg_replace(
'/.class="cls-1" style="fill:#([0-9a-f]{6})/'
,'/.class="cls-1" style="fill:red/'
,$svg
);

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); /*Optional, if you need to resize*/

file_put_contents ("test.png", $im);
$im->clear();
$im->destroy();

?>

Thanks

[snibgo]

I suggest you read documentation on preg_replace. You are searching for a string that isn't in your SVG text.

[Mahir]

Sorry sinbo but I do not undarstund what you mean by : "You are searching for a string that isn't in your SVG text".
I am trying access class "cls-1" and change fill.that is all what I wanth,
and I have "cls-1" in my new svg format.
Can you pleas make simple code to change this?
Thanks.

[snibgo]

Sorry, I don't use PHP myself, and I can't debug your code.

You search for a pattern that contains the sequence of characters:

Code: Select all

class="cls-1" style=

That sequence does not appear in your SVG.

[Mahir]

okay, undarstund.
But which sequence appear in my SVG?

[Mahir]

can somebody help me please

[snibgo]

You posted the SVG in your own post.

[Mahir]

yes this is my svg:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1645.9 589.78">
<defs>
<style>.cls-1{fill:red;}.cls-1,.cls-2,.cls-3{stroke:#fff;stroke-miterlimit:10;}.cls-3{fill:#207ab2;}
</style>
</defs>
<title>mahir</title>
<circle class="cls-1" cx="185.19" cy="185.19" r="184.69"/>
<circle class="cls-2" cx="795.91" cy="321.42" r="267.86"/>
<circle class="cls-3" cx="1486.21" cy="247.44" r="159.18"/>
</svg>

[gringo974]

Your preg_replace is looking for the pattern:

Code: Select all

class="cls-1" style="fill:#

which doesn't appear in your svg stream because the style is defined into the class.


So if you want to change the cls-3 fill, your preg_replace should be:

Code: Select all

$svg = preg_replace(
'/.cls-3{fill:#([0-9a-f]{6})/'
,'/.cls-3{fill::red/'
,$svg
);

And if you want to change the cls-1 fill, your preg_replace should be:

Code: Select all

$svg = preg_replace(
'/.cls-1{fill:red;}/'
,'/.cls-1{fill:yellow;}/'
,$svg
);

Or you can also update your svg to match your searched pattern:

Code: Select all

...
<circle class="cls-1" style="fill:#207ab2" cx="185.19" cy="185.19" r="184.69"/>
...

I'm not sure what you're trying to do...

[Mahir]

<?php

$usmap = 'images/mahir.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

$svg = preg_replace(
'/.cls-1{fill:#([0-9a-f]{6})/'
,'/.cls-1{fill::red/'
,$svg
);

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); /*Optional, if you need to resize*/

file_put_contents ("converted/test.png", $im);
$im->clear();
$im->destroy();

?>