什么是优化SVG的一些select?

我有多个SVG,其中一些相当大(11MB),它们是使用pdf2svg从PDF创build的。

问题是SVG太大,需要很长的时间才能打开,而且不必要的复杂。 它主要包含文本和一些图像(思考报纸),文本被分成小块的文字,甚至不是文字。

我需要对其进行优化,首先要减小尺寸,并且要减less元素的数量,使其加载速度更快。 我到目前为止唯一想到的就是查看一行中的字符,并将它们join到一个<tspan>

这应该会减less文本元素的数量,因为它看起来像是1-5个字母的组。

但我正在寻找更多的东西,我可以做的SVG缩小尺寸。 还有一个主要字体,用于大约95%的文本,但是现在,所有文本都被定义为字形(呈现形状)。

是否可以embedded字体,所以文本呈现为文本,而不是形状?

另外如果你知道任何更好的库转换PDF格式为SVG,我会很感激任何input。 唯一的要求是它的SVG输出看起来应该和PDF完全一样。

我还想指出速度并不重要。 只要产生了所需的结果,转换花费的时间就不重要了。

SVG清理似乎完美:比其他更快,更好的压缩,在我的testing强大,batch file夹进程,嘿! 给我们一个windows安装程序懒人!

我的尝试:原始文件大小:241 KB,在InkScape删除参考:149K后,使用工具清理:38 KB,清理和压缩:5 KB(.sgvz文件扩展名)。

我试图打开最后一个,期待一个空白的绘图…但我的graphics仍然在那里完好无损!

在这里下载(Windows,Ubuntu或Source)

我最近开始制作一个Python程序来优化SVG,你可以在https://github.com/petercollingridge/SVG-Optimiser

有一个非常初步的在线版本: http : //petercollingridge.appspot.com/

有关更多信息,请访问: http : //www.petercollingridge.co.uk/blog/svg-optimiser

它远非完整的,可能是高度错误的,但它涉及Chasbeen提到的一些问题,例如去除不必要的精度和缺省样式属性。 如果你知道你在找什么,也可以去除不必要的属性和名称空间,并将样式转换为CSS,这样可以更容易地看到如何改进。

我不明白你的意思是embedded字体。 如果你粘贴一个SVG的示例片段来显示这个gyphs和多个字符元素,我可能会包含一个方法来组合它们。

我可以推荐Scour,因为我已经使用了很多自己的东西,当清除不必要的SVG文件时,这是我的一个爱好。

一个可能为您提供服务的示例命令行(我倾向于从中开始):

 scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg 

一定要比较旧的和新的,以确保它没有破坏任何东西,并尝试降低-p小数精度(默认值是5,如果你不给一个); 在某种程度上,它可能开始扭曲的东西很糟糕,但一个或两个小数更高应该看起来不错。

如果您想采取更为人性化的方法,那么Kilobyte SVG Challenge变更集中有很多关于交易的技巧,这些变化意味着这种types的学习和教学。

是的,您可以在SVG文件中embedded字体,或者链接外部字体,如Mike Bostock在WebPlatform.org徽标上所示 ( 这里是非html-wrapped版本 )。

如果你对使用的字体有详细的了解,比select一个任意的pdf并将其转换,这当然要容易得多。 我不知道有什么工具可以在你自己做大部分(或全部)工作的情况下,使用embedded的原始PDF格式创build无名字体。

此外,在Kilobyte SVG挑战自述文件工具部分,还有越来越多的SVG优化工具。

https://github.com/svg/svgo

 sudo npm install -g svgo 

优化当前目录中的所有svgs:

 svgo -f . 

如果你没有npm,你可以像这样在Ubuntu上安装它:

 sudo apt-get update && sudo apt-get install nodejs-legacy npm 

我认为你转换的SVG可能是非常臃肿的。 我不确定Inkscape会不会 有菜单选项,如“转换为文本”,但这些不一定工作。

您可以在文件上进行search和replace,以删除对默认SVG属性值的引用,例如… stroke:#000000; 笔划宽度:1px的; 冲程的linecap:对接; 冲程linejoin:斜切; 行程不透明度:1; 无论如何,这些都是默认的,所以search和replace什么都没有。

如何减less不必要的精度也是惊人的。 在您对该特定文件的转换中,您可能会发现小数末尾.0000001或.99999675所有这些重复也可以被删除/减less

使用包含SVG消毒function的python库feedparser ,我写了这个函数,它将svg包装成一个RSS项目,以parsing它。

 import feedparser def sanitize_svg(svg): feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>""" parsed = feedparser.parse(feed) return parsed.entries[0].description.encode('utf-8') 

虽然在devise上考虑到了安全性,但是它也使得svg尺寸大大减小。