Как преобразовать строку SVG в PNG?

Я знаю, что есть разные темы по этому поводу, но я не нашел правильного ответа...

Мне нужно преобразовать строку SVG в изображение png, это должно быть изображение png, потому что мне нужна прозрачность, и для того, что я пытаюсь использовать, он принимает только изображения png (или подарок)...

Мне нужно сделать это через php или javascript...

Я читал о Рафаэле, но он только возвращает изображение, и мне нужен файл изображения !!!!

Также я пытался использовать магию изображений (php ext), и это дало мне эту ошибку:

нет делегата декодирования для этого формата изображения

Я надеюсь, что кто-нибудь может помочь !!!

Спасибо!

Это мой файл 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>

javascript svg php jquery-svg
person Ricardo ACB    schedule 15.10.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете поделиться текстовой структурой файла 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>
person Smita    schedule 15.10.2012
comment
У меня была похожая проблема... PHP Imagick выдавал ошибки при попытке readImageBlob - просто добавление объявления XML в начале исправляло ошибки. Однако я просто получаю пустое (белое) изображение? Любые идеи? - person Mat; 28.05.2013
comment
Вы можете поделиться своими тегами пути? что-то может быть с этим не так, поэтому он не рисуется, и вы получаете пустое изображение. - person Smita; 29.05.2013
comment
Файлы SVG извлекаются из базы данных и имеют довольно большую длину, но я создал статический файл здесь. Это может быть как-то связано с недостатком высоты/ширины, но командная строка convert.exe работает как шарм. - person Mat; 29.05.2013
comment
да, если вы не установили высоту ширины, это может быть проблемой. попробуйте так: ‹?xml версия=1.0 кодировка=UTF-8 автономная=нет?›‹svg ширина=720 высота=445 xmlns:svg=w3.org/2000/svg version=1.1›теги пути‹/svg› - person Smita; 29.05.2013
comment
а в php я сделал $im-›readImageBlob($svg); $im-›setImageFormat(png24); $im-›resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); $im-›writeImage(myImage.png); - person Smita; 29.05.2013