【问题标题】：why does ImageMagick crop this SVG image ... rendering of U+1F382 glyph为什么 ImageMagick 会裁剪这个 SVG 图像... U+1F382 字形的渲染
【发布时间】：2018-03-29 15:12:04
【问题描述】：

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

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

原始问题如下

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

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

那么，这个特定 SVG 文件在emacs 中触发裁剪的原因是什么？此外，如何指示 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 标记中的某些属性是否有助于这种图像裁剪？如果是这样，请逐项列出这些元素并解释相互作用。

【问题讨论】：

什么是工具链？ emacs 使用 ImageMagick，但 ImageMagick 用于渲染的是什么？你有安装 librsvg 吗？
我目前没有安装 librsvg。至于你关于工具链的问题，我决定试试convert birthday_cake.svg birthday_cake.png。 birthday_cake.png 显示相同的截断。所以问题是 ImageMagick 和 not emacs。我将进一步研究 ImageMagick，尽管在这里查看任何其他有用的 cmets
ImageMagick 在系统中找到 rendering SVG 时使用 Inkscape 或 librsvg。如果两者都不可用，ImageMagick 将恢复到其内部 SVG 渲染器。
我误读了我的 apt package-manager 输出并且确实安装了 libsrvg。

标签： image svg emacs imagemagick glyph

【解决方案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"

【讨论】：

这是一个很好的说明……雾气被推得更远了。原来我确实安装了 librsvg，但我对 apt package-manager 输出的读取有误。此外，我已经在 librsvg 之上安装了 Inkscape 以及二进制命令行工具。此外，我还学会了如何让 inkscape 纠正错误的 SVG 文件：inkscape --verb=FitCanvasToDrawing --verb=FileSave --verb=FileClose *.svg。生成的 SVG 现在确实在 svg 标签中具有宽度和高度属性。
这样，你可以得到一个没有任何“填充”的紧凑作物。希望这已经足够好了 - 好吧，由于缺少更多信息，无论如何您都必须在视觉上重建它。

【解决方案2】：

使用 Inkscape，您可以：

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

我使用的是 Inkscape 1.0.2。

【讨论】：