0

I'm using the following script to generate an scaled up PNG version of an SVG.

<img src="barrington.svg" width="418" height="188"/> //comparison
<?php
    $im = new Imagick();
    $im->setBackgroundColor(new ImagickPixel('transparent'));
    $svg = file_get_contents("barrington.svg");
    $im->setresolution(144,144);
    $im->readImageBlob($svg);
    $im->setImageFormat("png32");
    echo '<img src="data:image/png32;base64,' . base64_encode($im) . '"  />'
?>

When displayed/compared to the SVG version at the same size, the PNG has jagged edges around some of the image.

(see image here: https://i.stack.imgur.com/WGKIH.png)

I'm using ImageMagick (if it wasn't already obvious) and would like to fix this problem.

EDIT: To clarify, for my purposes I need a PNG and not an SVG. This isn't an issue of fixing compatibility in browsers or something.

Steve
  • 1
  • 2
  • Since you're outputting to the browser, why do you need to convert to PNG? The browser should be perfectly fine displaying SVG, except for old versions of IE, which won't like the base64 `src='data:...'` format either anyway. – Spudley Jul 20 '12 at 21:27
  • This script is more of a proof-of-concept type thing. My eventual goal is create a form that displays a rasterized SVG based on user preferences and is able to be downloaded. – Steve Jul 20 '12 at 21:36
  • Were you able to get a workaround on this. I have the very same issue? Plus i am loosing some of the details of svg file while converting to either jpeg or png. – codingbbq Dec 31 '12 at 07:14

1 Answers1

1

Generally there is confusion on setImageResolution and setResolution. So you may want to try setImageResolution along with setResolution and see if your edge issue is corrected. From my understanding setResolution is correct for density, but you want to still set your image size. Plus 144 may not be enough high enough density.

If not, then resizing an image is always a possibility. Make the image 2x larger then it needs to be and then resize it.

Joseph Montanez
  • 1,598
  • 1
  • 17
  • 31
  • Thank you for your suggestion. I tried both setResolution and setImageResolution with the number has high as 720. I could see minor image improvements. It did improve but did not notice much. I will try other options. – codingbbq Dec 31 '12 at 09:54