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

[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]

Just display the svg (echo $svg) after the preg_replace to analyse it.

[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]

when I try display $svg ,
display me image with black fill on cls-1

[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]

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]

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]

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]

BRABO gringo974 now everything working perfect !!!!!
Thank you.

[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]

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]

can someboy help me pls?

[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]

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]

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