开发者

ImageMagick convert SVG to PNG eats rightmost and bottommost pixels

开发者 https://www.devze.com 2023-04-12 11:23 出处:网络
Upon converting an SVG file to PNG with ImageMagick (I\'m using 6.3.7), it seems like the line of pixels at the right and at the bottom开发者_如何学JAVA are lost in the conversion.

Upon converting an SVG file to PNG with ImageMagick (I'm using 6.3.7), it seems like the line of pixels at the right and at the bottom开发者_如何学JAVA are lost in the conversion.

For example, consider this simple SVG that represents a diamond, perfectly fitting in the SVG's 60x60 geometry. When converted to SVG with

convert diamond.svg diamond.png

it generates this PNG (also 60x60 pixels in size). The corners of the diamond at the utmost right and bottom have been shaved off in the PNG. Also, the diamond seems slightly scaled up by 1 pixel.

Can someone confirm this behavior, possibly provide some rationale and maybe provide a fix?


'Can someone confirm this behavior, possibly provide some rationale and maybe provide a fix?'

  1. SVG is a vector format and as such doesn't know of pixels (well, unless you embed pixel images into SVG...).

  2. The dimensions of of your SVG paths however are defined in pixels. That's why its size is given as 60x60.

  3. When you render the SVG (display it in Inkscape or any SVG viewer), you can seemlessly scale the image, and you'll never discover a pixelization (unless you use a loupe to see the pixels of your monitor screen).

  4. However, PNG is not a vector format, it is a bitmap format, consisting of pixels. To draw diagonal black edges, it needs to use "staircased" black pixels (possibly smoothed by adding some grayscale pixels in between to achieve a bit of anti-aliasing effect).

  5. When you ask ImageMagick to convert your diamond into a 60x60 pixel sized PNG it has only a 60x60 grid to create the diagonals.

  6. Now do the math: how can you stuff a "perfekt" pixel staircase which goes from 1 pixel height to 30 pixels hight (this is the 31st step, did you count it?) and back to 1 pixels height (this would be the 61st step, did you count it?)) into such a grid ?!? -- You can't !

  7. The only 'fix' to retain the perfect shape (without 'shaving off' effects as you've observed) that's possible is to scale the PNG to use a size of 61x61 (or 122x122):

    convert diamond.svg -resize 61x61 +antialias diamond.png
    
    rsvg-convert -w 61 -h 61 -o diamond-rsvg.png diamond.svg
    
  8. Converting small vector graphics to small pixel graphics will always 'loose' something, and will always require you for some compromise to be accepted!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号