V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
CSGO
V2EX  ›  问与答

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

  •  
  •   CSGO · 2022-04-08 14:54:55 +08:00 · 1283 次点击
    这是一个创建于 959 天前的主题,其中的信息可能已经有所发展或是发生改变。
    下载的 1 倍图,也就 2000 × 2000 像素,也就是其实每个像素就是一个固定色块,用的 illustrator 临摹它不会按照一个像素一个方块给你转化,是否有其他办法可以转化?
    9 条回复    2022-04-08 18:54:00 +08:00
    noe132
        1
    noe132  
       2022-04-08 15:24:13 +08:00
    我只能说,生成的文件会有点大。
    用开发者工具选中 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
        2
    noe132  
       2022-04-08 15:25:43 +08:00   ❤️ 1
    这是这个 950KB 大小的 PNG.
    villivateur
        3
    villivateur  
       2022-04-08 15:26:46 +08:00 via Android
    这个图本身就是位图,你硬要转换成矢量图有点不划算啊
    CSGO
        4
    CSGO  
    OP
       2022-04-08 17:14:22 +08:00
    @noe132 如果把一个色块用作一个图形勾出来,会不会 svg 小一点? png 或者 jpg 肯定小啊,因为其实就 2000px 图片而已。
    Showfom
        5
    Showfom  
       2022-04-08 17:33:29 +08:00
    @noe132 # 2 你这个不完整呀,看我下载来的 20MB 的超大 png

    https://dulei.si/files/2022/04/08/7b5cae3b1cc073bfffcf7b6c0a56113f.png
    jim9606
        6
    jim9606  
       2022-04-08 18:01:50 +08:00   ❤️ 1
    本身就是位图,硬转成矢量图没有任何意义,无损转成 svg 的话肯定更大。
    原始分辨率是 2000x2000 ,那里给的高分图就是单纯扩增出来的,没有新信息,基本没有使用价值。PNG 本身就是无损的,所以只要未经有损变换,不会丢失任何信息。
    https://www.reddit.com/r/place/comments/txvk2d/rplace_datasets_april_fools_2022/
    试了下转无损模式的 AVIF/HEIF ,反而变大了,看来这种高频很多的图想要无损是没什么太好的压缩方法的。
    ysc3839
        7
    ysc3839  
       2022-04-08 18:05:47 +08:00   ❤️ 1
    本来就是个位图,转成 svg 没意义。
    怀疑这是个 X-Y Problem https://coolshell.cn/articles/10804.html 建议直接说最终需求
    noe132
        8
    noe132  
       2022-04-08 18:10:33 +08:00   ❤️ 1
    @Showfom 你这个图感觉不太对,似乎被缩放 /重采样了。
    原图地址下载下来也只有 1.01MB https://styles.redditmedia.com/t5_2sxhs/styles/image_widget_3egzhxzd7zr81.png
    用 apngopt 压缩一下可以压到 960KB 左右
    CSGO
        9
    CSGO  
    OP
       2022-04-08 18:54:00 +08:00 via Android
    @ysc3839 这个 X-Y Problem 很有意思,经常遇到别人问我问题就是这个。

    不过我这需求是想导入 figma 里,我想这无非就是 400w 个方块,就是无聊,想试一试会怎么样,比如文件多大,卡不卡。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2670 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:14 · PVG 13:14 · LAX 21:14 · JFK 00:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.