Convert SVG image with filters to PNG /PDF

Question

I have the following svg image to the png image & pdf image with 300 DPI.

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <filter height="200%" width="200%" y="-50%" x="-50%" id="svg_1_blur">
   <feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Layer 1</title>
  <image filter="url(#svg_1_blur)" xlink:href="images/logo.png" id="svg_1" height="162.999996" width="223.999992" y="99" x="185"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_2" y="210" x="289" stroke-width="0" stroke="#000000" fill="#000000">sdfdsdsfsdf</text>
 </g>
</svg>

I want to do this using PHP and I have applied filters to the blur filter to the image and I want to retain that.

Also I have problem in viewing this image in the IE, because it doesn't show the blur effect on IE9. Any suggestions?

Yeah I'm thinking of using imagik, but will I be able to control the DPI & will the blur effect come in the final output? Also how to make the blur effect visible in the IE? — User 99x, Sep 26 '12 at 04:52
dpi does nothing to affect image size. it's a conversion factor for going from screen<->print. e.g. a 100x100 picture is ALWAYS a 100x100 pixel picture, but changing dpi will only affect how large its pixels appears on a page. — Marc B, Sep 26 '12 at 04:55
Thanks for the info... cant I use svgweb or some other options to solve this svg filters issues? — User 99x, Sep 26 '12 at 08:00
I tried to do with Imagemagick and I got the following error Fatal error: Uncaught exception 'ImagickException' with message 'no decode delegate for this image format `' @ blob.c/BlobToImage/348' When i try to read the svg image — User 99x, Sep 26 '12 at 08:41
Friends, I have somehow converted the image using the imagick, but my issue now is the filter effects does not work in the imagick convered png. — User 99x, Sep 26 '12 at 08:54

score 1 · Answer 1 · answered Oct 23 '12 at 14:12

1

You can produce something like that with GD's imagefilter:

imagefilter($image_res, IMG_FILTER_GAUSSIAN_BLUR);

or

imagefilter($image_res, IMG_FILTER_SMOOTH, (int) $levelOfSmoothness);

But, for a more complex svg, you will need an SVG renderer.

Edit:

Or, if you know enough about convolution matrices:

$gaussian = array(array(1.0, 2.0, 1.0), array(2.0, 4.0, 2.0), array(1.0, 2.0, 1.0));
imageconvolution($image, $gaussian, 16, 0);

answered Oct 23 '12 at 14:12

pozs

34,608
5
57
63

This approach only works for the spefic case where the graphics to be processed are raster images (it is not always the case with svg), but still it is an interesting solution for this case. – yms Oct 23 '12 at 19:42

score 0 · Answer 2 · answered Oct 23 '12 at 16:57

If you have the possibility of executing scripts (exec, popen, etc.), phantomjs uses webkit (same as Chrome/Safari) and is available on all major platforms. You can't get closer than this to what a browser would render. Try something like this:

exec("phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png)";

Don't forget to sanitize (escape paths and characters not allowed in a file name or path) the params you are passing to phantomjs (file paths).

Convert SVG image with filters to PNG /PDF

2 Answers2