SVG妥协三角形（已解决）

This post was updated on 2024-07-30 in response to feedback from Hacker News and Mastodon. It turns out that I was wrong about the original thrust of my post 😅. I've added new sections and updated existing ones, and I hope the current version makes sense whether you saw the original version or not.

根据来自Hacker News和Mastodon的反馈，此帖子于2024-07-30进行了更新。事实证明，我对帖子的原始主旨是错误的 😅。我添加了新的部分并更新了现有部分，希望当前版本无论您是否看到了原始版本都能理解。

The original title was "SVG triangle of compromise", because I didn't know about the <use> tag which hits the sweet spot of stylable, cacheable, and dimensional.

原始标题是“妥协的SVG三角形”，因为我不知道<use>标签，它是可定制的、可缓存的和可定位的完美选择。

A complete list of updates is at the end of the post.

完整的更新列表在帖子末尾。

Thanks to everyone on HN and Mastodon for the discussion, and especially to Scott Jehl for making a great interactive demo that shows how the <use> tag works.

感谢HN和Mastodon上的所有人的讨论，特别感谢Scott Jehl制作了一个很棒的交互式演示，展示了<use>标签的工作原理。

Table of Contents

With SVGs on the web, you might care about a few different properties:

在Web上使用SVG，您可能会关心一些不同的属性：

Stylable: can be colored with CSS (including foreground, background, :hover states, etc)
可定制的：可以使用CSS进行着色（包括前景、背景、:hover状态等）
Cacheable: load once, use on other pages is free
可缓存：加载一次，其他页面上的使用是免费的
Dimensional: has an intrinsic width and height (especially useful for inline text so you can do height:1em and have it scale in the correct proportions to fit the current text size)
Dimensional：具有固有的宽度和高度（对于内联文本非常有用，因此您可以使用height:1em并使其按比例缩放以适应当前文本大小）

stylable cacheable dimensional <iframe> with inline inline

可样式化的可缓存的带有内联内联

stylable
可样式化
cacheable
可缓存
dimensional
可定制的

The nice little Finder icon in the next paragraph is from IcoMoon. It can be styled with CSS, including setting the icon's color to the color of the surrounding text with fill:currentColor; it could be used elsewhere on the page but will be downloaded only once; and it scales proportionally with the surrounding text size with height:1em. The SVG even supports the :hover state, try it!

下一段中的漂亮的Finder图标来自IcoMoon。它可以使用CSS进行样式设置，包括将图标的颜色...