【第3333期】SVG 的 “三角妥协”

主要观点总结

本文介绍了在使用SVG（可缩放矢量图形）时面临的三角妥协（Triangle of Compromise），即在样式化、可缓存和尺寸化之间的权衡。文章详细解释了如何使用<img>、<use>、<symbol>等HTML标签来引用和显示SVG文件，并讨论了不同方法的优缺点。同时，还提到了其他处理SVG文件的选项，如创建两种状态的SVG文件和使用SMIL进行动画。

关键观点总结

关键观点1: SVG的三角妥协

在使用SVG时，需要在样式化、可缓存和尺寸化之间做出权衡。这意味着需要根据项目的需求来选择最合适的方法来使用SVG。

关键观点2: 使用<img>标签显示外部SVG

通过<img>标签可以引用和显示SVG文件，这种方法适用于网页中的图像，支持样式化、可缓存和尺寸化。但需要注意的是，SVG文件必须与页面位于同一域名下。

关键观点3: 使用<use>标签显示内部SVG

通过<use>标签可以在网页中直接包含整个SVG元素，这种方法可以直接通过CSS进行样式设置，并且可以通过JavaScript进行操作。但这种方法不支持缓存。

关键观点4: 其他处理SVG文件的方法

除了上述方法外，还可以创建两种状态的SVG文件、使用<object>标签等多媒体对象、使用SMIL进行动画等方法来处理SVG文件。

文章预览

前言 介绍了如何在网页上使用 SVG，并通过所谓的 “SVG 三角 compromise” 来平衡样式化、可缓存和尺寸化的需求。今日前端早读课文章由 @飘飘翻译分享。 正文从这开始～～ 在网页上的 SVG，可能会关心以下几个属性： 样式化：可通过 CSS 进行颜色设置（包括前景色、背景色、 :hover  状态等） 可缓存：加载一次，在其他页面上重用 尺寸化：具有固有的宽度和高度（尤其是对于内联文本非常有用，这样就可以使用  height:1em ，并且它会根据当前文本大小的比例缩放） SVG 的 “三角妥协”（Triangle of Compromise）是指在网页上使用 SVG（可缩放矢量图形）时，通常需要在三个主要特性之间做出权衡。 【第3240期】不一样的SVG！SVG 渐变边框在 CSS 中的应用 使用   标签显示外部 SVG 文件 ✅ 样式化 ✅ 可缓存 ✅ 尺寸化 下一段中漂亮的小 Finder 图标来自 IcoMoon。它 ………………………………