如何把SVG String轉換爲PNG？

我知道有這個各種主題，但我還沒有找到正確的答案...如何把SVG String轉換爲PNG？

我需要一個SVG字符串轉換成PNG圖像，它必須是一個PNG圖像，因爲我需要的透明度和我嘗試使用它只接受PNG（或禮品）圖片...

我需要通過PHP或的JavaScript做到這一點...

我一直閱讀關於拉斐爾，但它只是以某種方式返回圖像，我需要圖像文件！

而且我一直在試圖用難懂的（PHP EXT），它給我這個錯誤：

no decode delegate for this image format

我希望有人能幫助！

謝謝！

這是我的SVG文件...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="560" height="300"> 
<defs> 
<clipPath id="highcharts-6"> 
<rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300" stroke-width="0.000001"> 
</rect> 
</clipPath> 
<clipPath id="highcharts-7"> 
<rect fill="none" x="0" y="0" width="560" height="300"> 
</rect> 
</clipPath> 
</defs> 
<g class="highcharts-series-group" > 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-shadow" > 
<path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</path> 
<path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#4572A7" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#AA4643" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#89A54E" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#80699B" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#3D96AE" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-point" > 
<path fill="#DB843D" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> 
</path> 
<path fill="rgb(192,192,192)" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> 
</path> 
</g> 
<g class="highcharts-legend" > 
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7" stroke-width="1" stroke="#909090" visibility="hidden"> 
</rect> 
<g clip-path="url(#highcharts-6)"> 
<g> 
</g> 
</g> 
</g> 
<g class="highcharts-tooltip" style="padding:0;white-space:nowrap;" visibility="hidden"> 
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="5" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> 
</rect> 
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="3" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> 
</rect> 
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="1" fill-opacity="0.85" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"> 
</rect> 
<rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="10" height="10" stroke-width="2" fill-opacity="0.85"> 
</rect> 
<text x="5" y="18" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" > 
</text> 
</g> 
<g class="highcharts-tracker" > 
</g> 
</svg>

來源

2012-10-15 Ricardo ACB

你可以分享你的SVG文件的文本結構？我也有同樣的錯誤，然後我發現問題是在svg文件本身的文本結構。現在我的SVG文件看起來像下面，預期其工作原理：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1">path tags</svg>

來源

2012-10-15 17:58:15 Smita

我有一個類似的問題... PHP的Imagick被攪動了錯誤，試圖'readImageBlob'時 - 只是在前面加上修復錯誤的XML聲明。但是，我只是得到一個空白（白色）圖像？有任何想法嗎？ – Mat

你能分享你的路徑標籤嗎？這可能是錯誤的，這就是爲什麼它沒有被繪製，你得到空白圖像。 – Smita

SVG文件是從數據庫中提取的，並且相當長，但是我在這裏創建了一個[靜態文件]（http://railmanager.co.uk/assets/img/004.svg）。這可能與缺少高度/寬度有關，但命令行'convert.exe'就像魅力一樣。 – Mat

如何把SVG String轉換爲PNG？

回答

相關問題