html - 添加内联 SVG 的最有效方法？

Question

我有一个网页，其中包含许多 HTML 中的 SVG 图标。与其将它们作为 IMG 标记包括在内并可能通过这些 HTTP 请求降低页面速度，我将 SVG 代码放置如下:

<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>

注意:在它说“这里有很多代码”的地方，有一串巨大的数字/字母组成了这个 SVG 的路径。

这产生的问题是，当在 HTML 中不容易维护时，它非常丑陋(到了我的编辑器陷入困境的地步，因为这些 SVG 字符串太长了)。

有没有一种更干净、更简单的方法可以在我的 HTML 中包含这些 SVG 图标，同时仍然消除额外的 HTTP 请求？

感谢您的宝贵时间。

Answer 1

最有效的方法是将所有图标 SVG 收集到一个文件中 - sprite SVG

创建 Sprite 并将其连接到 HTML

行动计划如下:

1. 创建 Sprite
2. 将其连接到 HTML
3. 从 Sprite 调用 SVG 图像
4. 样式化图标

创建 Sprite

Sprite 的主要任务是成为图标的存储库，在调用特定位置之前 HTML 页面应该是不可见的。

为此，每个图标的代码都用 <symbol id =" .. "> ... </ symbol> 包裹起来具有唯一标识符的标签，后面将跟上 <use>

模板 Sprite :

<div id="container"> 
  <svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 126 126" >
  <symbol id="picasa">
        <path     d="M113.5 57.... 72.8z" /> 
  </symbol>

     <symbol id="wordpress"  viewBox="0 0 126 126"> 
       <path stroke ="black"  d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
     </symbol>

       <symbol id="twitter">
          <path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
       </symbol>
  <symbol id="apple">
     <path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
  </symbol>
</div>  

如您所见，所有 <path>属性被删除，以便以后从外部 CSS 文件中设置图标样式。

将 Sprite 文件添加到 HTML

有several ways将 SVG 文件添加到 HTML，但最可靠的方法是使用 <object> 添加它

<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
  Your browser does not support SVG
</object>

从 Sprite 中添加图标

<div id="container"> 
     <svg  viewBox="0 0 126 126" >
        <use xlink:href="#apple"></use>  
   </svg>
</div>  

viewBox属性应该像 svg图标或根据需要更改 HTML 内的缩放比例。

图标作为链接

为此，在 SVG 中，与 HTML 不同，它有自己的记录形式

<svg viewBox="0 0 126 126" >
     <a xlink:href="https://www.apple.com/ru/"><use                          xlink:href="#apple"></use></a>  
</svg> 

样式化图标

使用 <use> 时命令，图标落入影子 DOM 中，其属性表现异常，- 有图标的图标，但无法从外部控制。

另外，图标属性例如:style = "fill: gray; stroke: crimson;"具有最高优先级。因此，我们删除了这些属性。请参阅上面的 Sprite 示例。

解决shadow DOM中对象继承父属性的问题，必须使用强制继承

svg path{
fill:inherit;
 stroke:inherit;
 } 

然后到图标，您已经可以应用外部表中的 CSS 规则

svg 路径:悬停{填充:黄色;}

   #picasa{fill:black;}  
   #apple{fill:purple;}
   #twitter{fill:black;}        
   #wordpress{fill:blue;}     

如果你是第一次走这条路，难免会有很多问题。
问，不要害羞。

这一切迟早要完成并定制 Sprite 。
主要建议是第一次自己手动做所有事情，了解它是如何安排的，然后你就可以公开使用特殊的实用程序来自动创建 Sprite 。