Page 2 of 2
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T04:15:58-07:00
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.
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T05:16:15-07:00
by gringo974
Just display the svg (echo $svg) after the preg_replace to analyse it.
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T06:53:16-07:00
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();
?>
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T06:54:38-07:00
by Mahir
when I try display $svg ,
display me image with black fill on cls-1
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T07:48:09-07:00
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.
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T08:19:33-07:00
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
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T09:11:37-07:00
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();
?>
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T09:43:40-07:00
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;}
...
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T11:08:35-07:00
by Mahir
BRABO gringo974 now everything working perfect !!!!!
Thank you.
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-23T11:11:30-07:00
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>
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-28T16:39:52-07:00
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
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-29T04:34:57-07:00
by Mahir
can someboy help me pls?
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-29T16:39:36-07:00
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();
?>
Re: change image color in svg format and save to png or jpg
Posted: 2016-11-30T01:54:29-07:00
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();
?>
Re: change image color in svg format and save to png or jpg
Posted: 2016-12-01T05:56:23-07:00
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