包阅导读总结
1. 关键词:SVG、前端、样式化、网页、图标
2. 总结:本文主要介绍了在网页中使用 SVG 的相关知识,包括 SVG 的“三角妥协”,通过`
3. 主要内容:
– SVG 的“三角妥协”
– 指在网页使用 SVG 时需在样式化、可缓存和尺寸化需求间权衡
– 使用`
– 创建包含`
– 通过 CSS 样式化`
– 在 HTML 中用`
– 其他 SVG 相关内容
– 适用于 SVG 的 CSS 属性与 HTML 元素有时不同
– 使用``标签显示外部 SVG 类似其他图像
– `
– 在`
– 其他处理 SVG 文件的方法,如创建不同状态的 SVG 文件等
思维导图:
文章地址:https://mp.weixin.qq.com/s/pQSPVmh_EaZlYW6uFGf3hg
文章来源:mp.weixin.qq.com
作者:飘飘
发布时间:2024/8/2 0:00
语言:中文
总字数:2810字
预计阅读时间:12分钟
评分:91分
标签:SVG,前端开发,样式化,可缓存,尺寸化
以下为原文内容
本内容来源于用户推荐转载,旨在分享知识与观点,如有侵权请联系删除 联系邮箱 media@ilingban.com
前言
介绍了如何在网页上使用 SVG,并通过所谓的 “SVG 三角 compromise” 来平衡样式化、可缓存和尺寸化的需求。今日前端早读课文章由 @飘飘翻译分享。
正文从这开始~~
在网页上的 SVG,可能会关心以下几个属性:
SVG 的 “三角妥协”(Triangle of Compromise)是指在网页上使用 SVG(可缩放矢量图形)时,通常需要在三个主要特性之间做出权衡。
【第3240期】不一样的SVG!SVG 渐变边框在 CSS 中的应用
使用<use>
标签显示外部 SVG 文件
下一段中漂亮的小 Finder 图标来自 IcoMoon。它可以通过 CSS 进行样式设置,包括使用fill:currentColor
将图标颜色设置为周围文本的颜色,可以在页面的其他地方使用该图标,但只会下载一次;并且使用height:1em
可以使图标与周围文本的大小成比例缩放。SVG 甚至支持:hover
状态,快来试试吧!
<svg viewBox="0 0 100 100">
<use href="icons.svg#icon-finder"></use>
</svg>
如何工作的
要获得这三种属性,请创建一个 SVG 文件,其中包含你想要使用的图标,每个图标都包裹在一个带有<symbol>
标签和id
属性的元素中。我将使用包含检查标记和 X 标记图标的 SVG 文件。如果在浏览器中加载该文件,它不会显示任何内容,因为它只定义了图标而没有显示它们。但是,您可以在下面看到其内容以及用于格式化它的 CSS 代码。
【早阅】SVG vs AVIF
如何在网页上使用<use>
标签来显示外部 SVG?
css
样式化 SVG:通过 CSS 来样式化<use>
引用的 SVG 元素。可以使用 currentColor 来设置与周围文本相同的颜色,或者使用 fill 属性来设置其他颜色。同时,可以为:hover 状态定义特定的样式。
span.example-svg-use {
color: blueviolet;
}
span.example-svg-use svg {
height: 1em;
fill: currentColor;
}
span.example-svg-use svg:hover {
fill: aquamarine;
}
HTML
引用 SVG 文件:在 HTML 文档中,使用<use>
标签来引用 SVG 文件中的符号。<use>
标签的 href 属性指向 SVG 文件的 URL,并通过 #后跟 id 来指定要使用的符号。嵌入到 HTML 中:将<use>
标签嵌入到 HTML 元素中,例如<span>
或<div>
,以便在网页上显示。
<p>
<span class="example-svg-use">
Nice icon
<svg viewBox="0 0 100 100"><use href='icons.svg#icon-finder'/></svg>
:)
</span>
</p>
SVG
创建 SVG 符号库:首先,创建一个 SVG 文件,其中包含你想要重用的图形元素,每个元素都被包裹在<symbol>
标签中,并且每个<symbol>
标签都有一个独特的 id 属性。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-check" viewBox="0 0 512 512">
<!-- Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
1.1, Code: MIT License) -->
<title>Check mark icon</title>
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095
72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/>
</symbol>
<symbol id="icon-times" viewBox="0 0 352 512">
<!-- Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
1.1, Code: MIT License) -->
<title>X icon</title>
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93
89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28
12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
</symbol>
<symbol id="icon-finder" viewBox="0 0 32 32">
<!-- IcoMoon - https://icomoon.io/ - GPL -->
<title>Finder icon</title>
<path d="M17.788 24.32c-0-0.001-0-0.003-0-0.004 0 0.001 0 0.003 0 0.004z"></path>
<path d="M17.831 25.454c-0-0.007-0.001-0.015-0.001-0.022 0 0.007 0.001 0.015 0.001 0.022z"></path>
<path d="M17.807 24.885c-0-0.006-0-0.011-0.001-0.017 0 0.006 0 0.011 0.001 0.017z"></path>
<path d="M30 0h-28c-1.1 0-2 0.9-2 2v28c0 1.1 0.9 2 2 2h15.432c0.001 0 0.003 0 0.004 0s0.003-0 0.004-0h12.56c1.1 0 2-0.9 2-2v-28c0-1.1-0.9-2-2-2zM6 7c0-0.552
0.448-1 1-1s1 0.448 1 1v2c0 0.552-0.448 1-1 1s-1-0.448-1-1v-2zM30 30h-11.721c-0.209-1.315-0.341-2.671-0.418-3.988 0 0.004 0 0.007 0.001 0.011-0.616 0.067-1.237
0.102-1.862 0.102-4.177 0-8.199-1.52-11.328-4.281-0.466-0.411-0.51-1.122-0.099-1.588s1.122-0.51 1.588-0.099c2.717 2.398 6.211 3.718 9.839 3.718 0.596 0
1.189-0.036 1.776-0.107-0.069-3.694 0.215-6.622 0.22-6.669 0.028-0.281-0.064-0.561-0.254-0.77s-0.459-0.329-0.741-0.329h-2.974c0.043-1.082 0.159-2.932
0.467-5.006 0.589-3.961 1.625-7.055 3.005-8.994h12.502v28z"></path>
<path d="M25 10c-0.552 0-1-0.448-1-1v-2c0-0.552 0.448-1 1-1s1 0.448 1 1v2c0 0.552-0.448 1-1 1z"></path>
<path d="M16.89 26.101c-0.114 0.006-0.228 0.011-0.342 0.014 0.114-0.004 0.228-0.008 0.342-0.014z"></path>
<path d="M16 26.125c0.147 0 0.293-0.002 0.439-0.006-0.146 0.004-0.292 0.006-0.439 0.006z"></path>
<path d="M16.846 23.85c0.024-0.001 0.049-0.003 0.073-0.004-0.024 0.002-0.049 0.003-0.073 0.004z"></path>
<path d="M16.409 23.869c0.034-0.001 0.067-0.002 0.101-0.003-0.034 0.001-0.067 0.003-0.101 0.003z"></path>
<path d="M27.427 20.256c-0.411-0.466-1.122-0.51-1.588-0.099-2.27 2.004-5.083 3.254-8.063 3.612 0.013 0.727 0.040 1.484 0.086 2.255 3.499-0.382 6.806-1.832
9.466-4.18 0.466-0.411 0.51-1.122 0.099-1.588z"></path>
<path d="M17.859 26.023c-0.144 0.016-0.288 0.029-0.433 0.041 0.145-0.012 0.289-0.026 0.433-0.041z"></path>
<path d="M17.359 26.070c-0.122 0.010-0.244 0.018-0.367 0.025 0.122-0.007 0.245-0.015 0.367-0.025z"></path>
</symbol>
</svg>
适用于 SVG 的 CSS 属性有时不同于适用于 HTML 元素的 CSS 属性,比如 fill 而不是 color ,但归根结底都是 CSS,你可以使用相同的样式表来为 SVG 元素以及页面上的其他元素进行样式设置。
正如前面所提到的,SVG 文件必须包含每个你想要使用的图标的<symbol>
标签,而且一个 SVG 文件可以包含多个以这种方式定义的图标。FontAwesome 可以做到这一点。这可以让你在一个地方定义网站的所有图标,并在每个页面上引用它们,不过这是否是个好主意取决于你的使用模式。
此外,Scott Jehl 的互动演示也值得一试。https://scottjehl.com/posts/svgtopia/
注意事项
使用这种方法时,需要考虑以下几点。
-
最重要的是,它要求 SVG 文件必须与页面位于同一域名下。CORS 完全没有作用。
-
如果 SVG 中没有
<symbol>
标记,这种方法将无法使用,因此可能需要修改 SVG 文件才能使用这种方法。 -
网页提要(RSS)阅读器似乎完全不支持这种方法,这意味着任何包含这种引用 SVG 的帖子在提要阅读器中都会显示为损坏。
-
SVG 被加载到 shadow DOM 中,这意味着无法直接在 JavaScript 中与它进行交互,并且无法像在嵌入式 SVG 中那样直接对每个元素进行样式控制。正如我们上面所看到的,这些限制允许设置 fill 颜色,并且还允许设置诸如 font-family 等属性以及其他一些属性。然而,它们不允许像
<circle>
等这样的 SVG 内部的单个元素的 CSS 选择器。
使用<img>
标记显示外部 SVG
通过<img>
标签引用的 SVG 文件与任何其他图像类似。如果您在多个页面上加载同一图像,它将被缓存,而不会重新下载。可以不指定宽度和高度,让它以自然大小显示,或者只指定其中一个,让它按比例显示,或者让它自动适应容器大小。其他图像类型 (如 PNG 或 JPEG 文件) 仅支持以这种方式引用。
使用<svg>
标签在网页中显示一个内嵌的 SVG 图形
HTML 支持<svg>
标签,可以在文档中直接包含整个 SVG 元素。与带有<use>
标签的<svg>
不同,内联<svg>
可以直接通过常规 DOM 的 CSS 进行样式设,不受任何限制,并且可以像其他任何元素一样通过 JavaScript 进行操作。当您将鼠标悬停在文本标签上时,上面维恩图的圆圈就是这样突出显示的。
当然,将 SVG 放在 HTML 中意味着它无法在多次使用时被缓存,就像<p>
或<div>
在多个页面上重复使用时无法被缓存一样。
在一个<iframe>
标签中包含一个<svg>
标签
这种方法与其他方法相比并没有什么优势,但我还是把它包括进来,因为我在最初的帖子中提到了它,而且我觉得它很酷。没有什么可以推荐这种方法,但我包括它,因为我在这篇文章的第一个版本中提到它,我认为它是干净的。
这个想法是创建一个仅包含<svg>
标签的 HTML 文件,并在网站上通过<iframe>
进行引用。可以通过在 HTML 文件中包含<style>
标签来使用 CSS 对其进行样式设置,这意味着它可以与网站的其余部分共享样式,尽管不如从父文档直接使用 CSS 的效果好。然而,<iframe>
本身没有内在的宽度或高度,因此您需要在加载后使用 JavaScript 对其进行测量,或者预先设置其尺寸。
如果上述内容无法打消你的念头,你或许会对我过去为将推文存档到 HTML 文件中所采用的框架测量解决方案感兴趣。
其他选项
值得一提的是,还有其他几种处理 SVG 文件的方法:
-
您可以创建两个 SVG 文件,一个用于正常状态,另一个用于悬停状态,通过
<img>
标记引用它们,并在用户将鼠标悬停在元素上时通过 CSS 进行切换。至少在本文撰写之时, 这是我为网站头部的标志所做的事情。如果你只需要悬停和正常这两种状态,那么这种方法就很有效。不过这种方法已经过时了。 -
您可以使用
<object>
标签,它类似于<iframe>
, 但用于 SVG 等多媒体对象。它与<iframe>
标签一样存在尺寸问题,并且无法通过来自父文档的 CSS 进行样式化,但可以通过来自父文档的 JavaScript 进行操作。 -
SMIL 可以用来为 SVG 动画。它可以与 CSS 一起使用,并且两者各有其独特的功能。
关于本文
译者:@飘飘
作者:@mrled
原文:https://me.micahrl.com/blog/svg-triangle-of-compromise/
这期前端早读课
对你有帮助,帮”赞“一下,
期待下一期,帮”在看” 一下 。