reddit r/place 有没办法转化成 SVG 格式呢？

[CSGO]

下载的 1 倍图，也就 2000 × 2000 像素，也就是其实每个像素就是一个固定色块，用的 illustrator 临摹它不会按照一个像素一个方块给你转化，是否有其他办法可以转化？

[noe132]

我只能说，生成的文件会有点大。
用开发者工具选中 canvas 元素然后运行下面的代码
d = $0.getContext('2d')
rects = Array(2000).fill(0).flatMap((_, rowIndex) => Array(2000).fill(0).map((_, columnIndex) => {
const rgb = d.getImageData(rowIndex,columnIndex,1,1).data.slice(0, 3)
const rect = `<rect x="${rowIndex}" y="${columnIndex}" width="1" height="1" fill="rgb(${rgb[0]},${rgb[1]},${rgb[2]})" />`
return rect
})).join('\n')
svg = `<svg width="2000" height="2000" viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg">
${rects}
</svg>`
console.log(svg)

生成的 svg 大小是 261MB 。这个 svgchrome 打开不到一般，tab 内存占用飙到 6G 后页面崩溃了。
相对于直接导出成 png ，文件大小是 2.5M 。使用更高压缩比例可以压到 950KB 。

[noe132]

这是这个 950KB 大小的 PNG.

[villivateur]

这个图本身就是位图，你硬要转换成矢量图有点不划算啊

[CSGO]

@noe132 如果把一个色块用作一个图形勾出来，会不会 svg 小一点？ png 或者 jpg 肯定小啊，因为其实就 2000px 图片而已。

[Showfom]

@noe132 # 2 你这个不完整呀，看我下载来的 20MB 的超大 png

https://dulei.si/files/2022/04/08/7b5cae3b1cc073bfffcf7b6c0a56113f.png

[jim9606]

本身就是位图，硬转成矢量图没有任何意义，无损转成 svg 的话肯定更大。
原始分辨率是 2000x2000 ，那里给的高分图就是单纯扩增出来的，没有新信息，基本没有使用价值。PNG 本身就是无损的，所以只要未经有损变换，不会丢失任何信息。
https://www.reddit.com/r/place/comments/txvk2d/rplace_datasets_april_fools_2022/
试了下转无损模式的 AVIF/HEIF ，反而变大了，看来这种高频很多的图想要无损是没什么太好的压缩方法的。

[ysc3839]

本来就是个位图，转成 svg 没意义。
怀疑这是个 X-Y Problem https://coolshell.cn/articles/10804.html 建议直接说最终需求

[noe132]

@Showfom 你这个图感觉不太对，似乎被缩放 /重采样了。
原图地址下载下来也只有 1.01MB https://styles.redditmedia.com/t5_2sxhs/styles/image_widget_3egzhxzd7zr81.png
用 apngopt 压缩一下可以压到 960KB 左右

[CSGO]

@ysc3839 这个 X-Y Problem 很有意思，经常遇到别人问我问题就是这个。

不过我这需求是想导入 figma 里，我想这无非就是 400w 个方块，就是无聊，想试一试会怎么样，比如文件多大，卡不卡。