为什么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或谷歌浏览器中被裁剪。顺便说一句，这个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标签中的某些属性是否有助于此图像裁剪？如果是，那么请逐项列出这些元素并解释互动。

Answer 1

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

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

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

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"