爲什麼imagick SVG將PNG轉換搞亂了？

Question

我試圖用imagick將一個簡單的SVG圖標轉換爲PNG。

這裏是我所得到的：

< < <之前|之後>>>

爲什麼這麼搞砸了？我製作的許多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

Answer 1

解決我的問題的步驟是：從Illustrator

1. 出口圖標.svg文件
2. 重新打開在Illustrator中
3. 保存再次.svg文件.svg文件（修改它可以節省）

當在步驟3重新保存時，Adobe illustrator會顯着改變svg xml，這似乎會導致ImageMagick完全轉換它。無論如何，這是完美的。

但是，如果我只是從Illustrator導出到.svg並且不重新打開並保存它，ImageMagick幾乎每次都會弄亂它。

這是SVG XML是什麼樣子，當我第一次從Illustrator出口：

<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> 

Answer 2

導出SVG圖標，我們看到了很多關於ImageMagick的SVG支持這裏的投訴。看來它用於SVG轉換的庫（librsvg）有點bug。你可能需要調整一下你的SVG文件來解決rsvg不喜歡的問題。或者，您可能需要考慮切換到更可靠的SVG光柵化器，例如Batik。 http://xmlgraphics.apache.org/batik/