如何将 SVG 字符串转换为 PNG？

【问题标题】：How to convert SVG String to PNG?如何将 SVG 字符串转换为 PNG？
【发布时间】：2012-10-05 17:01:49
【问题描述】：

我知道有各种各样的话题，但我没有找到正确的答案......

我需要将 SVG 字符串转换为 png 图像，它必须是 png 图像，因为我需要透明度并且我尝试使用它只接受 png（或礼物）图像...

我需要通过 php 或 javascript...

我一直在阅读有关 Raphael 的文章，但它只以某种方式返回图像，我需要图像文件！！！

我也一直在尝试使用 image magick (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>

【问题讨论】：

    标签： php javascript svg jquery-svg


    【解决方案1】：

    你能分享你的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>

    【讨论】：

    • 我遇到了类似的问题... PHP 的 Imagick 在尝试 readImageBlob 时出现错误——只需在 XML 声明前添加即可修复错误。但是，我只是得到一个空白（白色）图像？有什么想法吗？
    • 你能分享你的路径标签吗？这可能有问题，这就是为什么它没有被绘制并且你得到空白图像。
    • SVG 文件是从数据库中提取的，而且很长，但我创建了一个static file here。这可能与缺少高度/宽度有关，但命令行 convert.exe 就像一个魅力。
    • 是的，如果你没有设置宽度高度，那可能是个问题。试试这样： w3.org/2000/svg" version=" 1.1">路径标签
    • 在 php 中，我已经完成了 $im->readImageBlob($svg); $im->setImageFormat("png24"); $im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1);$im->writeImage("myImage.png");
    猜你喜欢
    • 2015-08-16
    • 1970-01-01
    • 2021-05-01
    • 2015-01-31
    • 2011-08-31
    • 2011-12-31
    • 2018-09-07
    • 1970-01-01
    • 2017-08-30
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode