SVG Symbol提供了一种强大的图标管理方式，本教程将详细阐述如何在HTML中通过元素引用SVG Symbol，涵盖了将Symbol定义内联嵌入HTML和从外部SVG文件引用的两种主要方法，并解释了为何直接使用标签引用Symbol通常无效。
在现代web开发中，可伸缩矢量图形（svg）因其高清晰度、可伸缩性和轻量级特性而广受欢迎。svg中的元素提供了一种创建可重用图形模板的机制，这对于管理和部署网站图标集尤为高效。本文将深入探讨如何在html中正确地引用和使用这些svg symbol，包括两种常见的方法及其最佳实践。
理解SVG Symbol与元素
首先，我们需要明确和元素的作用：
元素：它是一个图形容器，用于定义一个可重用的图形模板。本身不会直接渲染，它需要被其他元素引用才能显示。它通常包含一个id属性，以便被唯一标识。viewBox属性在中定义了其内部坐标系统，这对于确保图标在不同尺寸下保持一致的比例至关重要。元素：这个元素用于引用SVG文档中的其他元素。通过其href（或旧版SVG中的xlink:href）属性，可以指向一个或其他SVG元素，并在当前位置渲染它的一个实例。
为什么不能直接使用标签引用Symbol？
用户常常尝试使用标签并通过URL片段标识符（如test.svg#icon-checkmark）来引用SVG文件中的特定Symbol。然而，这种方法通常无法按预期工作。
标签主要用于嵌入完整的SVG图像文件，或者通过#svgView(viewBox(…))引用SVG文件中的特定视图。它不会解析SVG文件内部的定义并将其作为独立图形渲染。对于Symbol的引用，元素是专门为此目的设计的标准机制。
方法一：内联SVG Sprite（推荐用于小型图标集）
这是最常见且兼容性最好的方法之一。它涉及将所有定义放置在一个隐藏的元素内，然后通过元素在HTML中引用它们。
立即学习“前端免费学习笔记（深入）”；
1. 定义SVG Symbol Sprite
首先，在HTML文档的
标签内部（通常是开头或结尾）创建一个隐藏的容器，并在其中定义所有的元素。通过display: none;样式隐藏这个容器，确保它不会直接显示在页面上。
checkmark icon <!-- 可以在这里定义更多Symbol，例如：star icon -->
2. 在HTML中引用Symbol
一旦Symbol被定义，就可以在页面的任何位置使用和元素来引用它。元素的href属性应指向Symbol的id。
方法二：外部SVG Sprite（推荐用于大型或共享图标集）
当图标数量较多，或者需要在多个页面甚至多个项目间共享图标时，将SVG Symbol定义放在一个独立的.svg文件中作为外部SVG Sprite是更优的选择。这种方法能够更好地分离内容和样式，并利用浏览器缓存。
1. 创建外部SVG文件
创建一个名为icons.svg（或任何你喜欢的名称）的文件，并将所有定义放入其中。注意，这个文件应仅包含SVG根元素和Symbol定义，不包含任何display: none;样式。
icons.svg 内容示例：
checkmark icon star icon
2. 在HTML中引用外部Symbol
在HTML中，通过元素的href属性指向外部SVG文件的路径，并追加#和Symbol的id。
注意事项：
跨域问题（CORS）：当外部SVG文件与HTML文件不在同一域（协议、域名、端口）时，浏览器可能会阻止其加载，导致图标不显示。确保服务器配置了正确的CORS头，或者将SVG文件部署在与HTML相同的域下。浏览器兼容性：现代浏览器对外部SVG Sprite的支持良好。对于IE浏览器，尤其是IE11，可能需要Polyfill（如svg4everybody）来支持外部引用。
Styling SVG Symbols
SVG Symbol的样式可以通过CSS进行控制。通常，我们会给包裹元素的标签添加一个类，然后通过这个类来定义样式。
.icon { /* 移除默认的描边 */ stroke: unset; /* 或者 stroke: none; */ stroke-width: 0px; /* 让图标颜色继承父元素的文本颜色 */ fill: currentColor; /* 将SVG图标作为行内块元素显示 */ display: inline-block; /* 设置图标的尺寸，em单位使其与字体大小相关联 */ width: 1em; height: 1em; /* 调整垂直对齐，使其与文本基线对齐 */ vertical-align: -0.15em; }
样式解释：
`stroke:
以上就是如何在HTML中高效引用外部SVG文件中的Symbol图标的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575631.html
微信扫一扫 
支付宝扫一扫 
