Javascript 可视化:svg 地图的可接受大小?
我正在尝试使用 Raphael.js 从 svg 文件制作地图。我的问题是原始地图非常详细。我想我必须减少 Illustrator 中的点数,但我不确定我必须将其推到什么程度。
您认为 svg 文件的可接受大小大致是多少?这个想法是在我提取路径并使用 Raphael.js 将它们可视化后,向地图添加一些交互性。
目前,该文件大约有 180 kb,包含大约 300 个多边形和 17,000 个点。
-詹斯
I'm trying to make a map from an svg file using Raphael.js. My problem is that the original map is quite detailed. I think I have to reduce the number of points in Illustrator, but I'm not sure how far I have to push it.
What would you, roughly, say is an acceptable size of the svg file? The idea is to add some interacitvity to the map once I extracted the paths and visualized them using Raphael.js.
At the moment the file, which holds about 300 polygons an 17.000 points, is about 180 kb.
-jens
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您将网络服务器设置为压缩它所提供的内容(deflate 是最常见的算法),那么文件自然会被压缩,并且由于数据结构的重复,SVG 文件很容易压缩。
如果仍然太大,请考虑插图的目的是什么;有必要这么详细吗?
If you set your webserver to compress what it serves (deflate is the most common algorithm) then the file will be compressed as a matter of course, and SVG files compress readily thanks to the repetition of the data structure.
If it's still too big, consider what the purpose of the illustration is; does it need to be that detailed?
我最近遇到了类似的问题,但它是字母而不是地图。如果你看一下 SVG 的源代码,它看起来像这样......
所有这些额外的数字都是你不需要的精确度,你可以保留一到两位小数,它看起来会完全相同。我将它们移除并实现了 60-70% 的压缩。
您可以使用正则表达式替换来删除它们。
I encountered a similar problem recently, but it was letterforms instead of a map. If you take a look at the source code of the SVG it will look something like...
All those extra digits are preciseness you don't need, you can get away with one or two decimals and it will look exactly the same. I removed them and achieved 60-70% compression.
You can remove them with a regex replace.