2017-10-17 55 views
0

UPDATE SVG图像裁剪问题已被缩减为ImageMagick。也就是说,convert birthday_cake.svg birthday_cake.png在我的特定安装中,即在Ubuntu上生成了剪辑birthday_cake.png。我目前正在进一步调查。ImageMagick为什么裁剪此SVG图像... U + 1F382字形的渲染

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

原始的问题遵循

我下载的SVG文件然后装成emacs的,但倒数第三是越来越裁剪。另外,从右侧裁剪的数量也很少。但是,该文件是而不是在Firefox或Google Chrome中被裁剪掉。顺便说一下,这个SVG是U + 1F382生日蛋糕Unicode字形的渲染。

SVG image getting cropped when loaded into emacs

我以前从来没有注意到这个裁剪任何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 ...) 

这里是与12KB路径SVG文件缩短这个帖子的删节版:

<?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标签中的属性有助于这种图像裁剪?如果是这样,那么请列举这些元素并解释相互作用。

+0

什么是工具链? emacs使用ImageMagick,但ImageMagick用于渲染的是什么?你有没有安装librsvg? – ccprog

+0

我目前没有安装librsvg。至于你在工具链上的问题,我决定尝试'convert birthday_cake.svg birthday_cake.png'。 ''birthday_cake.png'显示相同的截断。所以问题是ImageMagick和**不是** emacs。我会进一步调查ImageMagick,尽管在这里查看任何其他有用的评论 –

+0

ImageMagick如果在系统中发现它们,则使用Inkscape或librsvg [渲染SVG](http://www.imagemagick.org/script/formats.php) 。如果两者都不可用,则ImageMagick将恢复到其内部的SVG渲染器。 – ccprog

回答

1

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

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

要查找的内容边界框,你可以将其加载到浏览器上的Javascript执行

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

控制台中的结果是

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

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

我不知道怎么的源网页,www.fileformat.info,呈现此SVG,但你可以复制他们的渲染与视框属性

viewBox="-50 60 400 400" 
+0

这是一个很好的说明...而雾气被推开了一点。结果我确实安装了librsvg,但是我错误地阅读了我的apt-package-manager输出。另外,我已经安装了Inkscape以及librsvg之上的二进制命令行工具。此外,我已经学会了如何使用inkscape来纠正错误的SVG文件:'inkscape --verb = FitCanvasToDrawing --verb = FileSave --verb = FileClose * .svg'。所得到的SVG现在在svg标签中具有宽度和高度属性。 –

+0

通过这种方式,您可以获得没有任何“填充”的紧凑作物。希望这已经足够好了 - 呃,由于缺少更多的信息,你必须重建视觉。 – ccprog