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

Questions and postings pertaining to the development of ImageMagick, feature enhancements, and ImageMagick internals. ImageMagick source code and algorithms are discussed here. Usage questions which are too arcane for the normal user list should also be posted here.
Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-18T09:36:40-07:00

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
Posts: 12428
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

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

Post by snibgo » 2016-11-18T09:46:26-07:00

Does the "preg_replace" do what you want? Why do you have "fill:" when SVG needs "fill="?
snibgo's IM pages: im.snibgo.com

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-18T10:01:56-07:00

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
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-19T10:27:31-07:00

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

snibgo
Posts: 12428
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

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

Post by snibgo » 2016-11-19T14:57:08-07:00

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".
snibgo's IM pages: im.snibgo.com

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-21T11:08:15-07:00

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
Posts: 12428
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

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

Post by snibgo » 2016-11-21T11:31:25-07:00

I suggest you read documentation on preg_replace. You are searching for a string that isn't in your SVG text.
snibgo's IM pages: im.snibgo.com

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-21T14:07:13-07:00

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
Posts: 12428
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

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

Post by snibgo » 2016-11-21T23:45:32-07:00

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.
snibgo's IM pages: im.snibgo.com

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-22T07:54:44-07:00

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

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-22T10:29:40-07:00

can somebody help me please

snibgo
Posts: 12428
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

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

Post by snibgo » 2016-11-22T10:34:35-07:00

You posted the SVG in your own post.
snibgo's IM pages: im.snibgo.com

Mahir
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-22T11:20:33-07:00

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
Posts: 16
Joined: 2016-10-04T07:07:21-07:00
Authentication code: 1151

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

Post by gringo974 » 2016-11-23T02:05:42-07:00

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
Posts: 47
Joined: 2016-10-22T06:58:23-07:00
Authentication code: 1151

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

Post by Mahir » 2016-11-23T04:11:50-07:00

<?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();

?>

Post Reply