Imagick CLI无法渲染SVG中Base64图片并转换为PNG的问题

问题概况 #

• 执行Imagick CLI命令 magick .\test.svg image.png 转换SVG为PNG时，SVG中的Base64编码图片无法渲染
• 同一SVG转为HTML后，Base64图片可正常加载，且Base64编码本身可解码出有效图片
• 已尝试<image>和<img>两种标签写法，问题仍存在
• 环境：ImageMagick 7.1.0-49 Q16-HDRI x64 7a3f3f1:20220924、Windows 10系统

问题SVG代码 #

无法正常渲染的SVG代码如下：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="position: relative; overflow: hidden;" version="1.1" id="natal_chart" width="800" height="800" viewBox="0 0 800 800">

<image x='322' y='402' preserveAspectRatio='none' href='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'/>
<img src='data:image/png;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxwYXRoIGQ9Ik0gMTQuMDAxOTUzIDEyLjUgQyAxMC45Njc4MzMgMTIuNSA5LjAwMjIwMzEgMTMuOTM3NSA3Ljc1MTk1MzEgMTQuOTM3NSBDIDYuNTAxNzAzMSAxNS45Mzc1IDUuOTY1OTI2OCAxNi41IDMuOTk4MDQ2OSAxNi41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMjAuNSBDIDcuMDMyMTY3IDIwLjUgOC45OTk3NSAxOS4wNjI1IDEwLjI1IDE4LjA2MjUgQyAxMS41MDAyNSAxNy4wNjI1IDEyLjAzNDA3MyAxNi41IDE0LjAwMTk1MyAxNi41IEMgMTUuOTY5ODMzIDE2LjUgMTYuNTAzNTgyIDE3LjA2MjU0MSAxNy43NTM5MDYgMTguMDYyNSBDIDE5LjAwNDIzIDE5LjA2MjQ1OSAyMC45NzIxMzMgMjAuNSAyNC4wMDU4NTkgMjAuNSBDIDI3LjAzODQwNiAyMC41IDI5LjAwMjQ1MyAxOS4wNjA1NDcgMzAuMjUxOTUzIDE4LjA2MDU0NyBDIDMxLjUwMTQ1MyAxNy4wNjA1NDcgMzIuMDM2NSAxNi41IDM0LjAwMTk1MyAxNi41IEMgMzUuOTY4NjIgMTYuNSAzNi41MDIxMjkgMTcuMDYyNTQxIDM3Ljc1MTk1MyAxOC4wNjI1IEMgMzkuMDAxNzc3IDE5LjA2MjQ1OSA0MC45NjcwNiAyMC41IDQ0IDIwLjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDE2LjUgQyA0Mi4wMzM5NCAxNi41IDQxLjQ5OTkyNiAxNS45Mzc1NDEgNDAuMjUgMTQuOTM3NSBDIDM5LjAwMDA3NCAxMy45Mzc0NTkgMzcuMDM1Mjg2IDEyLjUgMzQuMDAxOTUzIDEyLjUgQyAzMC45Njk0MDYgMTIuNSAyOS4wMDM0MDYgMTMuOTM5NDUzIDI3Ljc1MzkwNiAxNC45Mzk0NTMgQyAyNi41MDQ0MDYgMTUuOTM5NDUzIDI1Ljk3MTMxMyAxNi41IDI0LjAwNTg1OSAxNi41IEMgMjIuMDM4NTg2IDE2LjUgMjEuNTA0MzMyIDE1LjkzNzU0MSAyMC4yNTM5MDYgMTQuOTM3NSBDIDE5LjAwMzQ4IDEzLjkzNzQ1OSAxNy4wMzYwNzMgMTIuNSAxNC4wMDE5NTMgMTIuNSB6IE0gMTQuMDAxOTUzIDI5LjUgQyAxMC45Njc4MzMgMjkuNSA5LjAwMjIwMzEgMzAuOTM3NSA3Ljc1MTk1MzEgMzEuOTM3NSBDIDYuNTAxNzAzMSAzMi45Mzc1IDUuOTY1OTI2OCAzMy41IDMuOTk4MDQ2OSAzMy41IEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzLjk5ODA0NjkgMzcuNSBDIDcuMDMyMTY3IDM3LjUgOC45OTk3NSAzNi4wNjI1IDEwLjI1IDM1LjA2MjUgQyAxMS41MDAyNSAzNC4wNjI1IDEyLjAzNDA3MyAzMy41IDE0LjAwMTk1MyAzMy41IEMgMTUuOTY5ODMzIDMzLjUgMTYuNTAzNTgyIDM0LjA2MjU0MSAxNy43NTM5MDYgMzUuMDYyNSBDIDE5LjAwNDIzIDM2LjA2MjQ1OSAyMC45NzIxMzMgMzcuNSAyNC4wMDU4NTkgMzcuNSBDIDI3LjAzODQwNiAzNy41IDI5LjAwMjQ1MyAzNi4wNjA1NDcgMzAuMjUxOTUzIDM1LjA2MDU0NyBDIDMxLjUwMTQ1MyAzNC4wNjA1NDcgMzIuMDM2NSAzMy41IDM0LjAwMTk1MyAzMy41IEMgMzUuOTY4NjIgMzMuNSAzNi41MDIxMjkgMzQuMDYyNTQxIDM3Ljc1MTk1MyAzNS4wNjI1IEMgMzkuMDAxNzc3IDM2LjA2MjQ1OSA0MC45NjcwNiAzNy41IDQ0IDM3LjUgQSAyLjAwMDIgMi4wMDAyIDAgMSAwIDQ0IDMzLjUgQyA0Mi4wMzM5NCAzMy41IDQxLjQ5OTkyNiAzMi45Mzc1NDEgNDAuMjUgMzEuOTM3NSBDIDM5LjAwMDA3NCAzMC45Mzc0NTkgMzcuMDM1Mjg2IDI5LjUgMzQuMDAxOTUzIDI5LjUgQyAzMC45Njk0MDYgMjkuNSAyOS4wMDM0MDYgMzAuOTM5NDUzIDI3Ljc1MzkwNiAzMS45Mzk0NTMgQyAyNi41MDQ0MDYgMzIuOTM5NDUzIDI1Ljk3MTMxMyAzMy41IDI0LjAwNTg1OSAzMy41IEMgMjIuMDM4NTg2IDMzLjUgMjEuNTA0MzMyIDMyLjkzNzU0MSAyMC4yNTM5MDYgMzEuOTM3NSBDIDE5LjAwMzQ4IDMwLjkzNzQ1OSAxNy4wMzYwNzMgMjkuNSAxNC4wMDE5NTMgMjkuNSB6Ii8+PC9zdmc+'/>

</svg>

解决建议 #

1. 使用SVG 1.1标准的<image>属性：你的SVG版本是1.1，应使用xlink:href而非href，且<img>不是标准SVG元素，ImageMagick不支持。修改后的<image>标签示例：

   <image x='322' y='402' width='24' height='24' preserveAspectRatio='none' xlink:href='data:image/png;base64,...'/>
   

2. 升级ImageMagick或检查依赖库：旧版本ImageMagick对内嵌Base64图片的支持存在bug，建议升级到最新稳定版；同时确认已正确安装librsvg组件（ImageMagick依赖它处理SVG）。
3. 强制使用librsvg渲染：在转换命令中添加参数强制使用librsvg，命令如下：

   magick .\test.svg -define svg:use-imagemagick=false image.png
   

4. 明确图片尺寸：为<image>标签添加width和height属性，避免ImageMagick无法识别图片尺寸导致渲染失败。

内容的提问来源于stack exchange，提问作者Brett