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

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

Post by Mahir »

sorry I try like this,as you say but still not working,

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


when I save show me black fill.

I am trying make editor in php, to change svg fill and save in png.
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 »

Just display the svg (echo $svg) after the preg_replace to analyse it.
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 »

still not working but I think you can fix it:
can you pls check cod:

<?php

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

$svg = preg_replace(
'/.cls-1{fill:red;}/'//on this this line is working,because when I try red color display me black fill on "echo",
,'/.cls-1{fill:aqua;}/'//possible problem is here,this command do not add color and then automatically add black color of cls-1 when I try display
,$svg
);

echo $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();

?>
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 »

when I try display $svg ,
display me image with black fill on cls-1
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 »

The echo command should display the SVG text stream (something like "<svg>...</svg>") somewhere in a log file or in the browser where you call the php file.

Please try this echo line and locate where this debug text is displayed.

Code: Select all

echo "DEBUG: MY UPDATED SVG TEXT = ".$svg;
Without that, you can't debug your code.

Moreover the preg_replace command is just a "Find and replace" text. Please read the documentation.
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 »

pls just save this as index.php :

Code: Select all

<?php 

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

$svg = preg_replace(
'/.cls-1{fill:red;}/'//on this this line is working,because when I try red color display me black fill on "echo",
,'/.cls-1{fill:aqua;}/'//possible problem is here,this command do not add color and then automatically add black color of cls-1 when I try display
,$svg
);

echo $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();

?>
and svg format like mahir.svg,
copy both document in same file and you will understund problem,
I think you do not undarstund what is problem,but I think you can fix it,
Thanks
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 »

I fix it,
now preg_replace working perfect,but still not save images with colors,just save black color of fill,
but when I try "echo $svg" display svg image with changed color.
I thing problem is there:

$im->readImageBlob($svg);/////////// do no completly fill object "$im" with "$svg" !!!!

<?php

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

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

echo $svg;

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1);

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

?>
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 »

oh yes this is a known librsvg issue:
Styles are ignored in librsvg. Adding type="text/css" to the style element fixes it
Just update your svg file like this and it works!

Code: Select all

...
<style type="text/css">.cls-1{fill:red;}.cls-1,.cls-2,.cls-3{stroke:#fff;stroke-miterlimit:10;}.cls-3{fill:#207ab2;}
...
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 »

BRABO gringo974 now everything working perfect !!!!!
Thank you.
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 »

this is corect cod:

<?php

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

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

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(50, 45, imagick::FILTER_LANCZOS, 1);

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

?>

and this is svg file:

<?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 type="text/css">.cls-1{fill:#333;}.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>
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 »

hello gringo 974,
now I have new tipe svg file without <style></style> inside file,
so when I try preg_replace like this it not working:

<?php

$svg = preg_replace(
'/id="id-1" fill="#([0-9a-f]{6})/'
,'id="id-1" fill="#333'
,$svg

);

?>

this is now svg file:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g id="Layer_3">
</g>
<text id="id-3" transform="matrix(1 0 0 1 462.667 307.6924)" fill="#FF2A2A" font-family="'ArialMT'" font-size="100">blood</text>
<path id="id-1" fill="#FF2A2A" d="M294.408,217.177c0,0,31.552-11.045,42.991-17.417c0,0,37.076-13.593,41.02,6.372
c0,0,13.015,31.86,31.159,40.781c0,0,42.597,25.487,9.466,58.196c0,0-16.965,33.983-56.009,36.957c0,0-53.638,11.47-80.458-12.318
c-26.82-23.789,1.184-33.984-12.227-54.799C270.348,274.949,258.516,226.948,294.408,217.177z"/>
<text id="id-2" transform="matrix(1 0 0 1 305 302.6924)" fill="#FFFFFF" font-family="'ArialMT'" font-size="100">in</text>
</svg>

can you check this pls?
Thanks
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 »

can someboy help me pls?
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 »

I found solution,I make changes, and display me on browser,but when i try save,not save changes.
maybe I need add something in svg file,but I do not know what.
changes are ignored in librsvg.I think I need add tipe="WHAT I NEED PUT HERE"

THIS IS CODE:

<?php

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


$parts = array(
'id="id-1"'=>'aqua',
'id="id-2"'=>'blue',
'id="id-3"'=>'aqua',
'id="id-4"'=>'red',//optional if svg have more id's
'id="id-5"'=>'red',
'id="id-6"'=>'red',
'id="id-7"'=>'red',
'id="id-8"'=>'red',
'id="id-9"'=>'red',
'id="id-10"'=>'red',
);

foreach ($parts as $part => $color) {
$svg = preg_replace(
'/'.$part.'/'
,'fill="'.$color.'"'
,$svg

);
}



echo $svg;

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(400, 150, imagick::FILTER_LANCZOS, 1);

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

?>
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 »

Hello Mahir,

With this code your svg xml elements contain 2 fill attributes like this:
(In your browser, use Right Click -> View source to visualize xml)
...
<text fill="aqua" transform="matrix(1 0 0 1 462.667 307.6924)" fill="#FF2A2A" font-family="'ArialMT'" font-size="100">blood</text>
...
And librsvg seems to fail to handle elements that contain severals fill attributes.

That's why you need to remove existing fill attributes before adding new one with this code:

Code: Select all

// Remove existing fill attributes
$svg = preg_replace(
'/fill="#([0-9a-f]{6})"/i'
,''
,$svg
);
So your final code should be:

Code: Select all

<?php 

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

// Remove existing fill attributes
$svg = preg_replace(
'/fill="#([0-9a-f]{6})"/i'
,''
,$svg
);


$parts = array(
'id="id-1"'=>'aqua',
'id="id-2"'=>'blue',
'id="id-3"'=>'aqua',
'id="id-4"'=>'red',//optional if svg have more id's
'id="id-5"'=>'red',
'id="id-6"'=>'red',
'id="id-7"'=>'red',
'id="id-8"'=>'red',
'id="id-9"'=>'red',
'id="id-10"'=>'red',
);

foreach ($parts as $part => $color) {
$svg = preg_replace(
'/'.$part.'/'
,'fill="'.$color.'"'
,$svg

);
}



echo $svg;

$im->readImageBlob($svg);

$im->setImageFormat("png24");
$im->resizeImage(400, 150, imagick::FILTER_LANCZOS, 1); 

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

?>

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 »

thanks for replay,
it is working for fill,but when I try same code for font-size,do not working,like this:

// Remove existing font-size attributes
$svg = preg_replace(
'/font-size="?"/'
,''
,$svg
);

$svg = preg_replace(
'/id="id-3"/'
,'font-size="200px"'
,$svg
);


exactly,remove font size attribute but do not add new attribute
Post Reply