svg symbol提供了一种强大的图标管理方式，本教程将详细阐述如何在html中通过<use>元素引用SVG Symbol，涵盖了将Symbol定义内联嵌入HTML和从外部SVG文件引用的两种主要方法，并解释了为何直接使用<img>标签引用Symbol通常无效。
在现代web开发中，可伸缩矢量图形（svg）因其高清晰度、可伸缩性和轻量级特性而广受欢迎。svg中的<symbol>元素提供了一种创建可重用图形模板的机制，这对于管理和部署网站图标集尤为高效。本文将深入探讨如何在html中正确地引用和使用这些svg symbol，包括两种常见的方法及其最佳实践。
理解SVG Symbol与<use>元素
首先，我们需要明确<symbol>和<use>元素的作用：
- <symbol>元素：它是一个图形容器，用于定义一个可重用的图形模板。<symbol>本身不会直接渲染，它需要被其他元素引用才能显示。它通常包含一个id属性，以便被唯一标识。viewBox属性在<symbol>中定义了其内部坐标系统，这对于确保图标在不同尺寸下保持一致的比例至关重要。
- <use>元素：这个元素用于引用SVG文档中的其他元素。通过其href（或旧版SVG中的xlink:href）属性，<use>可以指向一个<symbol>或其他SVG元素，并在当前位置渲染它的一个实例。
为什么不能直接使用<img>标签引用Symbol？
用户常常尝试使用<img>标签并通过URL片段标识符（如test.svg#icon-checkmark）来引用SVG文件中的特定Symbol。然而，这种方法通常无法按预期工作。<img>标签主要用于嵌入完整的SVG图像文件，或者通过#svgView(viewBox(…))引用SVG文件中的特定视图。它不会解析SVG文件内部的<symbol>定义并将其作为独立图形渲染。对于Symbol的引用，<use>元素是专门为此目的设计的标准机制。
方法一：内联SVG Sprite（推荐用于小型图标集）
这是最常见且兼容性最好的方法之一。它涉及将所有<symbol>定义放置在一个隐藏的<svg>元素内，然后通过<use>元素在HTML中引用它们。
立即学习“前端免费学习笔记（深入）”；
1. 定义SVG Symbol Sprite
首先，在HTML文档的<body>标签内部（通常是开头或结尾）创建一个隐藏的<svg>容器，并在其中定义所有的<symbol>元素。通过display: none;样式隐藏这个容器，确保它不会直接显示在页面上。
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="icon-checkmark" viewBox="0 0 16 13"> <!-- 这是一个示例的对勾图标路径 --> <title>checkmark icon</title> <path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/> </symbol> <!-- 可以在这里定义更多Symbol，例如： <symbol id="icon-star" viewBox="0 0 24 24"> <title>star icon</title> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/> </symbol> --> </svg>
2. 在HTML中引用Symbol
一旦Symbol被定义，就可以在页面的任何位置使用<svg>和<use>元素来引用它。<use>元素的href属性应指向Symbol的id。
<!-- 使用icon-checkmark --> <svg class="icon"> <use href="#icon-checkmark"></use> </svg> <!-- 也可以在其他地方多次引用 --> <button> <svg class="icon"> <use href="#icon-checkmark"></use> </svg> 确认 </button>
方法二：外部SVG Sprite（推荐用于大型或共享图标集）
当图标数量较多，或者需要在多个页面甚至多个项目间共享图标时，将SVG Symbol定义放在一个独立的.svg文件中作为外部SVG Sprite是更优的选择。这种方法能够更好地分离内容和样式，并利用浏览器缓存。
1. 创建外部SVG文件
创建一个名为icons.svg（或任何你喜欢的名称）的文件，并将所有<symbol>定义放入其中。注意，这个文件应仅包含SVG根元素和Symbol定义，不包含任何display: none;样式。
icons.svg 内容示例：
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-checkmark" viewBox="0 0 16 13"> <title>checkmark icon</title> <path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/> </symbol> <symbol id="icon-star" viewBox="0 0 24 24"> <title>star icon</title> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/> </symbol> </svg>
2. 在HTML中引用外部Symbol
在HTML中，通过<use>元素的href属性指向外部SVG文件的路径，并追加#和Symbol的id。
<!-- 假设icons.svg文件与当前HTML文件在同一目录下 --> <svg class="icon"> <use href="icons.svg#icon-checkmark"></use> </svg> <!-- 如果icons.svg在其他路径，例如 /assets/svg/ --> <svg class="icon"> <use href="/assets/svg/icons.svg#icon-star"></use> </svg>
注意事项：
- 跨域问题（CORS）：当外部SVG文件与HTML文件不在同一域（协议、域名、端口）时，浏览器可能会阻止其加载，导致图标不显示。确保服务器配置了正确的CORS头，或者将SVG文件部署在与HTML相同的域下。
- 浏览器兼容性：现代浏览器对外部SVG Sprite的支持良好。对于ie浏览器，尤其是IE11，可能需要Polyfill（如svg4everybody）来支持外部引用。
Styling SVG Symbols
SVG Symbol的样式可以通过css进行控制。通常，我们会给包裹<use>元素的<svg>标签添加一个类，然后通过这个类来定义样式。
.icon { /* 移除默认的描边 */ stroke: unset; /* 或者 stroke: none; */ stroke-width: 0px; /* 让图标颜色继承父元素的文本颜色 */ fill: currentColor; /* 将SVG图标作为行内块元素显示 */ display: inline-block; /* 设置图标的尺寸，em单位使其与字体大小相关联 */ width: 1em; height: 1em; /* 调整垂直对齐，使其与文本基线对齐 */ vertical-align: -0.15em; }
样式解释：
- `stroke:
评论（已关闭）
评论已关闭