将SVG转换为具有锐利边缘的PNG

时间:2019-01-03 22:14:02

标签: svg imagemagick png inkscape librsvg

我需要转换图像以进行对象检测。我从具有多个多边形的svg图像开始。示例:

<svg ...>
<rect width = "100%" height = "100%" fill = "rgb(0,0,0)" />
<polygon points="..." fill="rgb(221,221,221)" fill-opacity="1.0" />
<polygon points="..." fill="rgb(100,100,100)" fill-opacity="0.5" />
</svg>

结果是黑色背景,对象A的颜色为rgb(221,221,221),对象B的颜色为rgb(50,50,50),并且两个对象在任何地方重叠rgb(160,160,160)。检测算法(无法修改)通过像素值确定对象。

我已经使用inkscape,svgr-convert或ImageMagikk成功地从svg转换为png。但是,这些png图像的边缘总是模糊不清,这干扰了我的目标检测。

有没有什么方法可以转换具有清晰边缘的? This image shows the conversion adding blurred pixels with incorrect values. I have zoomed into an edge to make it obvious.

编辑:完整图片示例

<svg viewBox="17.874 6.66874 74.0131 70.817" xmlns="http://www.w3.org/2000/svg">
<rect width = "100%" height = "100%" fill="black" fill-opacity="1.000000" stroke="black" stroke-opacity="1.000000" stroke-width ="0.000000"/>
<polygon points="66.499391,34.862972 35.730400,51.495089 68.667463,64.499553 " fill="rgb(221,221,221)" fill-opacity="1.000000" />
<polygon points="47.613765,49.254424 23.219703,52.458598 47.246912,50.965952 48.078815,51.599703 49.620943,52.471096 62.516253,65.471290 65.077318,43.877861 51.086443,12.014429 34.861708,20.532821 " fill="rgb(100,100,100)" fill-opacity="0.500000" />
</svg>

2 个答案:

答案 0 :(得分:1)

<svg>元素中添加属性(所有子元素都继承了该属性)

shape-rendering="crispEdges"

尽管从我的短期测试来看,Inkscape似乎不兑现这一点,但rsvg-convert确实如此。对于您的Imagemagick设置,应确保它委托给librsvg而不是Inkscape。

答案 1 :(得分:0)

您需要做的是在读取SVG文件时提高密度。您可以将密度增加一些因子并保存该结果,也可以将因子增加密度,然后通过反因子调整大小。 SVG的默认浓度为96 dpi。因此,在Imagemagick 6中,基本命令将是:

convert test.svg test.png


enter image description here

相同
convert -density 96 test.svg test1.png


enter image description here

现在您可以将密度增加4到384。

convert -density 384 test.svg test2.png


enter image description here

或者对于需要保留原始分辨率的带有线条图的较大图像,可以将尺寸缩小1/4或25%

convert -density 384 test.svg -resize 25% test3.png


enter image description here

对于Imagemagick 7,请转换为magick。

添加:

这里是使用密度1200放大的版本,除非您缩放到超过全分辨率,否则它将看起来很平滑。

convert -density 1200 test.svg test4.png


enter image description here