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 - 精灵SVG

创建Sprite并将其连接到HTML

行动计划如下：

创建精灵
将其连接到HTML
从精灵中调用SVG图像
样式图标

创建精灵

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

为此，每个图标的代码都包含<symbol id =" .. "> ... </ symbol>个标记，并带有唯一标识符，后面跟<use>

模板精灵：

<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文件设置图标样式。

将精灵文件添加到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>

从精灵添加图标

<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;"的图标属性具有最高优先级。因此，我们删除了这些属性。看上面精灵的例子。

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

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

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

svg path：hover {fill：yellow;}

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

如果你是第一次沿着这条路走，那么不可避免地会有很多问题 问，不要害羞。

所有迟早都会完成并定制精灵主要建议是第一次手动完成所有操作，了解它的排列方式，然后您就可以公开使用特殊实用程序来自动创建精灵。

Answer 2

您应该将所有.svg文件转换为一个字体文件，方法如下：

How to convert .svg files to a font?

添加内联SVG的最有效方法是什么？

2 个答案:

创建Sprite并将其连接到HTML