为什么 ImageMagick 会裁剪这个 SVG 图像...渲染 U+1F382 字形

Question

更新 SVG 图像裁剪问题已减少到 ImageMagick。也就是说，convert birthday_cake.svg birthday_cake.png 在我的特定安装中生成一个剪辑 birthday_cake.png，即 Ubuntu。我目前正在进一步调查。

我的 convert 版本是 6.7.7-10，我看到最新版本目前是 7.0.7-8，所以可能是问题所在。

原始问题如下

我下载了一个 SVG 文件，然后将其加载到 emacs 中，但底部的三分之一被裁剪了。此外，从右侧裁剪了少量。但是，该文件在 Firefox 或 Google Chrome 中未被裁剪。顺便说一句，这个SVG是U+1F382生日蛋糕Unicode字形的渲染。

我以前从未注意到任何 SVG 或图像文件的这种裁剪。所以我怀疑 emacs 和这个特定的 SVG 文件之间存在一些奇怪的交互。

那么在 emacs 中触发裁剪的特殊 SVG 文件是什么？此外，如何指示 emacs 显示此 SVG 文件的整个高度和宽度？

$ wget -q http://www.fileformat.info/info/unicode/char/1f382/birthday_cake.svg
$ emacs-snapshot -Q birthday_cake.svg --geometry 60x24 -eval '(set-frame-name "BAD SVG")'
$ emacs-snapshot --version | head -1
GNU Emacs 25.1.50.2
$ firefox birthday_cake.svg

SVG 包含在 imagemagick-types:

(member 'SVG (imagemagick-types))
(SVG SVGZ TEXT TGA THUMBNAIL TIFF TIFF64 TILE TIM TTC TTF TXT ...)

这里是 SVG 文件的删节版本，为这篇文章缩短了 12KB 的路径：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto"
     color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square"
     stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none"
     font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;"
     font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
  <!--Unicode Character 'BIRTHDAY CAKE' (U+1F382)-->
  <defs id="genericDefs" />
  <g><g>
    <path d="M285.1875 252 Q285.1875 274.5 ... 118.5469 221.3438 Z" stroke="none" />
  </g></g></svg>

SVG-tag 中的某些属性是否有助于此 image-cropping？如果是，请逐项列出这些元素并解释交互作用。

Answer 1

您正在通过多部分工具链获取渲染图像。 emacs 使用 ImageMagick 渲染图像，ImageMagick 使用 librsvg 将矢量图像转换为光栅图像。

您看到的错误根源不在渲染器中，而是在错误的 SVG 文件中。它既不定义 width 或 height 属性，也不定义 viewBox 属性。因此无法确定图像的固有宽度和高度。 librsvg 试图通过利用包含的图形元素的组合边界框来找到一些替代值来解决这个问题。不幸的是，这样做出错了。

要找到内容的边界框，您可以将其加载到浏览器中并执行

document.querySelector('svg').getBBox()

在 Javascript 控制台上结果是

 {
     x: 11.531200408935547,
     y: 68.4843978881836,
     width: 273.65631103515625,
     height: 272.8125
 }

librsvg 在输出图像为 273px × 272px 的情况下得到相同的结果，但内容不会被翻译，使得框的左上边框与图像视口的左上边框重合，因此它在右侧和下方被裁剪。

我不知道源网页 www.fileformat.info 如何呈现此 SVG，但您可以使用 viewBox 属性复制它们的呈现

viewBox="-50 60 400 400"

Answer 2

使用 Inkscape，您可以执行以下操作：

inkscape --batch-process --actions="select-all:all;FitCanvasToSelection;FileSave;FileClose;" your-file.svg

我正在使用 Inkscape 1.0.2。

为什么 ImageMagick 会裁剪这个 SVG 图像...渲染 U+1F382 字形

why does ImageMagick crop this SVG image ... rendering of U+1F382 glyph

image

svg

emacs

imagemagick

glyph

原始问题如下