☰

如何将 svg 结果转换为 png？

tag-icon • tag-icon png svg diagrams
如何将 svg 结果转换为 png？

我正在使用这个包来生成序列图

https://github.com/francoislaberge/diagrams

这是一个非常简单的序列图文件：

  Alice->Bob:Hello

我运行了这个命令

 diagrams sequence test.sequence test.svg

该diagrams实用程序会生成一个 svg 文件

在此处输入图片描述

然后我想把它转换成 png 格式

convert a.svg a.png

但是它会发出以下错误消息：

转换：不符合要求的绘图图元定义‘，’@error/draw.c/RenderMVGContent/4430。

这是 png 文件

在此处输入图片描述

有什么办法可以修复这个问题吗？

以下是一些版本信息：

$ convert -version
Version: ImageMagick 7.0.9-16 Q16 x86_64 2020-01-12 https://imagemagick.org
Copyright: © 1999-2020 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(3.1)
Delegates (built-in): bzlib freetype heic jng jp2 jpeg lcms ltdl lzma openexr png tiff webp xml zlib

操作系统是 MacOS Mojave

编辑：

根据 @harrymc 的评论，我尝试将 svg 文件添加到问题中。但是图像托管服务不接受 svg 文件。我将直接在此处粘贴 svg 文件中的 xml：

<svg height="174" version="1.1" width="176.796875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.4</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><marker id="raphael-marker-endblock55-obj19" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000000" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker></defs><rect x="10" y="20" width="68" height="38" rx="0" ry="0" fill="#ffffff" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="20" y="39" text-anchor="start" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Andale Mono&quot;, monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Alice</tspan></text><rect x="10" y="116" width="68" height="38" rx="0" ry="0" fill="#ffffff" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="20" y="135" text-anchor="start" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Andale Mono&quot;, monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Alice</tspan></text><path fill="none" stroke="#000000" d="M44,58L44,116" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><rect x="98" y="20" width="48.796875" height="38" rx="0" ry="0" fill="#ffffff" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="107.9921875" y="39" text-anchor="start" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Andale Mono&quot;, monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Bob</tspan></text><rect x="98" y="116" width="48.796875" height="38" rx="0" ry="0" fill="#ffffff" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="107.9921875" y="135" text-anchor="start" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Andale Mono&quot;, monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Bob</tspan></text><path fill="none" stroke="#000000" d="M122.3984375,58L122.3984375,116" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="59.19921875" y="83" text-anchor="start" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Andale Mono&quot;, monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Hello</tspan></text><path fill="none" stroke="#000000" d="M44,96C44,96,100.13640903495252,96,117.4049332986342,96" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj19)" stroke-dasharray="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>

答案1

此 SVG 文件的行为很奇怪。在 Windows 上，我观察到以下情况：

  • 所有浏览器均可显示：Chrome、Firefox、Internet Explorer、Pale Moon
  • 一些绘画程序不接受它：Paint.NET、PhotoShop 6
  • 有一个绘画程序可以接受它：Zoner Photo Studio
  • 在网络上，至少有一个免费的在线转换网站可以处理它： SVG 转 PNG。

看来该diagrams软件包生成的 SVG 图像有轻微错误，因此显示程序需要以宽松的方式进行编程。需要完全正确文件的程序将会失败。

我建议使用任何可以处理这些非标准文件的工具，例如上述网站。

您也可以在该项目的 Github 上发布针对此问题的错误报告diagrams。

相关内容