设计与产品blog.leahhanson.us
500 字节图像：Haiku 矢量图标格式
500 Byte Images: The Haiku Vector Icon Format
2016 — 2024，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这篇文章介绍 Haiku 操作系统的矢量图标格式 HVIF（Haiku Vector Icon Format）：它的目标是把图标文件压到极小，小到能塞进文件系统的 inode（文件的元数据）里，这样列出一个文件夹时每个文件只需一次磁盘读取。作者通过实际例子讲解了该格式如何在字节层面精打细算地编码形状、坐标和颜色，并与位图图标对比体积与显示效果。
为什么经久不衰：它是一次极致的"常数因子优化"示范——大多数软件早已不再关心这类效率，而这里展示了在字节级别雕琢格式的巧思；文中关于矢量图标在小尺寸下是否真的好用的讨论，至今仍有启发。
HN 评论精选
矢量不等于一个文件通吃所有尺寸，小尺寸仍需专门简化过的图像。
"矢量格式意味着每个图标只需要一个文件，无论你想渲染成多少种尺寸都无所谓"——这话并不完全对。即便用矢量，也最好针对不同尺寸准备不同图像：大尺寸增加细节，小尺寸删减细节、放大部件，这样图标在各尺寸下才好看。作者展示的录音机图标就能看出来：大尺寸下矢量版明显优于位图版，但小尺寸下反而是位图版更好，矢量版糊成一团、元素难以分辨；位图把各部件按比例放大，你认为重要的视觉元素依然清晰。
mcphage查看英文原文
> [Vector format] means that you only need one file per icon; it doesn’t matter how many sizes you want to render icons at. That's not really true, even with vectors it's good to have different images for different sizes, that add details (for larger sizes) or remove details and increase component sizes (for smaller sizes), so the icons look good at different sizes. You can see in the tape recorder icon the author shows: at larger sizes, it looks much better than the bitmap images, but at smaller sizes the bitmapped icons look better; the vector icons become a mush of unclear elements. The bitmap shows pieces as proportionally larger than they should be, so the visual elements that you consider important still show clearly.
SWF 的按位对齐形状编码比 HVIF 更省，SVG 则极其臃肿。
对紧凑矢量图形感兴趣的人可以看看 SWF（Macromedia/Adobe Flash）的形状格式，它同样高效、甚至可能更小，因为它不把坐标和颜色索引限制为字节的整数倍——字段是按位对齐的。相比之下 SVG 臃肿得离谱，连 PostScript 和 PDF 都更高效。
userbinator查看英文原文
For anyone interested in compact vector graphics, SWF (Macromedia/Adobe Flash) has a shape format which is also similarly efficient and might be even smaller, since it doesn't restrict things like coordinates and colour indices to multiples of bytes --- fields are bit-aligned. SVG is ridiculously bloated in comparison. Even PostScript and PDF are more efficient.
小尺寸下专做的位图反而比矢量渲染更清晰。
矢量图标的问题在于，它们的缩放效果并不像大家以为的那么好。能光栅化到任意尺寸，不代表图标在那个尺寸下还讲得通。图标很小时，通常需要同一图标的简化版才保持可辨识。文章里 16x16 的例子就很明显：位图版是专为低分辨率做的，依然清晰；矢量版却糊成一团。要妥善处理，要么准备多个版本，要么用一种能随尺寸调整细节量的矢量格式，而且还得保证小尺寸下渲染像素级精确、不糊。矢量图像做大图标很棒，做小图标则力有不逮。
Aaargh20318查看英文原文
The problem with vector icons is that they don't really scale as well as people seem to think. Just because you can rasterise it at any size, doesn't mean that the resulting icon makes sense at that size. When icons are really small you usually want a simpler version of the same icon for it to remain recognisable. You can see it clearly in the examples used in the article for the 16x16 icon. Compare the bitmap version (https://www.haiku-os.org/docs/userguide/images/apps-images/i-o-m-bitmap16.png) to the vector version (https://www.haiku-os.org/docs/userguide/images/apps-images/i-o-m-vector16.png) , the bitmap version is specifically made for the low resolution and is still very clear, the vector version is a blurry mess. To properly handle this you'd need either multiple versions or a vector format that can scale the amount of detail with the size. In either case you'd need to ensure that the rendering has pixel-perfect results at small sizes so it doesn't become a blurry-mess, kind of defeating the purpose of using a vector format. Vector images work great for large icons, but for small ones they fall short.
指出文中位图体积数据有误，并给出无损压缩后的实测值。
文章写错了。第一张图其实是 375 字节，不是 1024；我用 PNGOUT 无损压到了 298 字节。较小的那张图是 257 字节，我压到了 186 字节。
imaginenore查看英文原文
The article is wrong. The very first image is 375 bytes, not 1024: https://www.haiku-os.org/docs/userguide/images/apps-images/i-o-m-terminal-bitmap32.png And I was able to losslessly reduce it to 298 bytes with PNGOUT. The smaller image is 257 bytes, and I reduced it to 186.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com