SVG，将线条形成图像答案

【问题标题】：SVG, forming lines into an imageSVG，将线条形成图像
【发布时间】：2017-03-29 07:36:42
【问题描述】：

我正在使用 svgwrite 和 python 从位图在 SVG 中形成图像，其中每条线都围绕一个共同的原点由 theta 旋转成扇形图案。目前这张图片在 128 行中运行大约 10 MB，主要是因为在 79000 多个线段（每个像素一个线段）中保留了过多的浮点数。

我想通过从原点到终点绘制一条线，然后在该 SVG 线上拉伸一条“图像”线来显着减小图像尺寸。使用 SVG 是否可以做到这一点？除此之外，我愿意接受任何可能显着减小尺寸的建议，因此我稍后可以为线条设置动画。

【问题讨论】：

【解决方案1】：

这个解决方案怎么样（见fiddle）：

将图像切成所需的条数。对于链接小提琴中的示例，我使用 ImageMagick 将 128x128 PNG 图像切割成 128 个垂直条带：
convert image.png -crop 1x128 +repage +adjoin strip-%d.png
将所有图像条转换为数据 URI 格式并将它们嵌入到 SVG 中。我使用了这个 bash 单行：
for i in strip-*.png; do echo "data:image/png;base64,$(openssl base64 < $i | tr -d '\n')"; done > data-uris.txt
在 SVG 中，使用 image 条形元素上的 transform() 属性将它们旋转到所需的角度。

对于一个 16.4KB 的 128x128 PNG 图标，我最终得到一个 128.1KB 的 SVG 文件。其中大部分是 base64 编码的图像数据（128 个 PNG 条带的总大小已经是 85.1KB）。通过对一些浮点数进行四舍五入可以进一步减少它，但我认为不会有很多收获。

可能还有另一种方法，您可以将图像作为一个整体嵌入，并一遍又一遍地引用同一图像的另一个剪辑部分，但我无法让它工作。

【讨论】：