【第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文件。