为什么想象力的SVG到PNG转换如此混乱？

Question

我试图使用imagick将简单的SVG图标转换为PNG。

这是我得到的：

＆lt;＆lt;＆lt;之前|在＆gt;＆gt;＆gt;之后

为什么这么乱？我制作的很多svg图标最终都搞砸了。我怎样才能阻止这种情况发生？

php脚本是：

$svg = file_get_contents($svg_icon_path);

$im = new Imagick();

$im->setBackgroundColor(new ImagickPixel('transparent'));

$im->readImageBlob($svg);

$im->setImageFormat("png24");

$im->writeImage('converted_icon.png');

我从Illustrator CC导出SVG图标

Answer 1

我们在这里看到很多关于ImageMagick的SVG支持的抱怨。它似乎用于SVG转换（librsvg）的库有些错误。您可能需要稍微调整SVG文件以解决rsvg不喜欢的问题。或者，您可能需要考虑切换到更可靠的SVG光栅化器，例如Batik。 http://xmlgraphics.apache.org/batik/

Answer 2

解决我的问题的步骤是：

1. 从Illustrator导出图标到.svg文件
2. 在Illustrator中重新打开.svg文件
3. 再次保存.svg文件（稍微修改一下以便保存）

在第3步重新保存时，Adobe illustrator会显着更改svg xml，这似乎会导致ImageMagick完美地转换它。无论如何，到目前为止完美。

但是，如果我只是从插图画家导出到.svg并且不重新打开并保存它，ImageMagick几乎每次都会搞砸它。

这是我第一次从Illustrator导出时SVG xml的样子：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.29 44.14">
    <title>icon</title>
    <path d="M35.06,13.76a0.71,0.71,0,0,0-.2-0.46L32.4,10.76a0.71,0.71,0,0,0-.51-0.22l-6.07,0a0.71,0.71,0,0,1-.71-0.7l0-2.07c0-.05,0-0.1,0-0.15,0-.83-1.56-5.9-6.35-5.5a6,6,0,0,0-5.55,5.06,0.68,0.68,0,0,0,0,.1l0,2.57a0.71,0.71,0,0,1-.71.7l-6.19,0a0.71,0.71,0,0,0-.51.22L3.49,13.22a0.71,0.71,0,0,0-.19.46L2.18,40.84a0.71,0.71,0,0,0,.71.74H35.62a0.71,0.71,0,0,0,.71-0.74ZM14.14,7.81a0.67,0.67,0,0,1,0-.09,4.9,4.9,0,0,1,5.08-4.23h0.09A5.11,5.11,0,0,1,24.1,7.7l0,2.16a0.71,0.71,0,0,1-.71.72H14.83a0.71,0.71,0,0,1-.71-0.72V7.81ZM6.59,11.7A0.71,0.71,0,0,1,7,11.58H30.92a0.71,0.71,0,0,1,.37.1l0.83,0.9H5.87ZM34.37,40.58H4a0.71,0.71,0,0,1-.71-0.75L4.49,15.26a0.71,0.71,0,0,1,.71-0.67H33.07a0.71,0.71,0,0,1,.71.67l1.3,24.58A0.71,0.71,0,0,1,34.37,40.58Z" style="fill:#231f20" />
    <path d="M24.54,15.53a1.91,1.91,0,0,0-1.91,1.89,1.75,1.75,0,0,0,1.49,1.85h0v4.9a5,5,0,0,1-5,4.52,5.17,5.17,0,0,1-5-4.41v-5a1.89,1.89,0,1,0-1-.09v5.08a6,6,0,0,0,6,5.76s6,0.05,6-5.84v-5A1.88,1.88,0,0,0,24.54,15.53ZM13.13,17.42a0.66,0.66,0,1,1,.66.66A0.66,0.66,0,0,1,13.13,17.42Zm11.29,0.66a0.66,0.66,0,1,1,.66-0.66A0.66,0.66,0,0,1,24.42,18.08Z" style="fill:#231f20" />
</svg>

这是重新打开并保存后的变化：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 38.3 44.1" style="enable-background:new 0 0 38.3 44.1;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#231F20;}
</style>
<title>icon</title>
<path class="st0" d="M35.1,13.8c0-0.2-0.1-0.3-0.2-0.5l-2.5-2.5c-0.1-0.1-0.3-0.2-0.5-0.2h-6.1c-0.4,0-0.7-0.3-0.7-0.7V7.8
    c0-0.1,0-0.1,0-0.2c0-0.8-1.6-5.9-6.4-5.5c-2.8,0.2-5.1,2.3-5.6,5.1c0,0,0,0.1,0,0.1v2.6c0,0.4-0.3,0.7-0.7,0.7H6.3
    c-0.2,0-0.4,0.1-0.5,0.2l-2.3,2.4c-0.1,0.1-0.2,0.3-0.2,0.5L2.2,40.8c0,0.4,0.3,0.7,0.7,0.7c0,0,0,0,0,0h32.7c0.4,0,0.7-0.3,0.7-0.7
    c0,0,0,0,0,0L35.1,13.8z M14.1,7.8C14.1,7.8,14.1,7.7,14.1,7.8c0.3-2.6,2.5-4.4,5.1-4.3h0.1c2.4,0.1,4.4,1.9,4.8,4.2v2.2
    c0,0.4-0.3,0.7-0.7,0.7c0,0,0,0,0,0h-8.6c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0L14.1,7.8L14.1,7.8z M6.6,11.7c0.1-0.1,0.3-0.1,0.4-0.1
    h23.9c0.1,0,0.3,0,0.4,0.1l0.8,0.9H5.9L6.6,11.7z M34.4,40.6H4c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0l1.2-24.6c0-0.4,0.3-0.7,0.7-0.7
    h27.9c0.4,0,0.7,0.3,0.7,0.7l1.3,24.6C35.1,40.2,34.8,40.6,34.4,40.6C34.4,40.6,34.4,40.6,34.4,40.6z"/>
<path class="st0" d="M24.5,15.5c-1,0-1.9,0.8-1.9,1.9c-0.1,0.9,0.6,1.7,1.5,1.9l0,0v4.9c-0.2,2.6-2.4,4.5-5,4.5
    c-2.5-0.1-4.6-1.9-5-4.4v-5c1-0.2,1.7-1.2,1.5-2.2c-0.2-1-1.2-1.7-2.2-1.5s-1.7,1.2-1.5,2.2c0.1,0.7,0.6,1.2,1.2,1.4v5.1
    c0.1,3.2,2.8,5.8,6,5.8c0,0,6,0,6-5.8v-5c1-0.3,1.5-1.4,1.2-2.4C26,16.1,25.3,15.5,24.5,15.5z M13.1,17.4c0-0.4,0.3-0.7,0.7-0.7
    s0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7l0,0C13.4,18.1,13.1,17.8,13.1,17.4z M24.4,18.1c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7
    s0.7,0.3,0.7,0.7l0,0C25.1,17.8,24.8,18.1,24.4,18.1z"/>
</svg>