SVG 图标制作指南 - JavaScript 编程网

SVG 的知识基础

你可能学习过关于 SVG 的基础知识，并且能读懂 SVG 的结构。至少你知道：

SVG 元素： <svg>，<symbol> ，<g>， <path>SVG

属性： d， fill， stroke， stroke-width

注意：从绘图工具中导出的 SVG 经常带着一些不必要的内容和标签等（其中 d 下面包含了清晰的路径数据），可以使用工具比如 SVGOMG ，然后比较一下处理前后哪些东西是移除或简化过的。

移除颜色数据

通常单色图标的源文件中， path 的颜色都是黑色 #000000。并且没有 fill 属性。如果我们在 SVG 文件中设置了 fill 属性，就不能通过 CSS 来改变颜色了。可以手动删掉像 fill="#000000" 这种属性。

制作 SVG Sprite

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

使用 Inkscape 导出可用的 svg 图片

在 Inkscape 中，选择 “Save As” 并选择格式为 “Optimized SVG”

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="210mm" height="210mm" version="1.1" viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg">
 <rect x="23.068" y="28.835" width="159.55" height="152.83" fill="#800000" stroke-width=".26458"/>
</svg>

修改代码如下，只保留 viewBox 属性及必要的部分，也可以使用一些 SVG 优化工具，来确保SVG代码干净整洁。

<svg viewBox="0 0 210 210">
 <rect x="23.068" y="28.835" width="159.55" height="152.83" fill="#800000" stroke-width=".26458"/>
</svg>

添加到 SVG Sprite 文件

将 <svg viewBox="…"> 写成 <symbol id="…" viewBox="…"> 格式，放到 SVG sprite 文件中去。

<svg>
    <symbol id="one" viewBox="0 0 210 210">
        <rect x="23.068" y="28.835" width="159.55" height="152.83" fill="#800000" stroke-width=".26458"/>
    </symbol>
    <symbol id="two" viewBox="0 0 210 210">
        <rect x="23.068" y="28.835" width="159.55" height="152.83" fill="#800000" stroke-width=".26458"/>
    </symbol>
</svg>

有很多图形工具和命令行工具也可以导出 SVG sprite 文件

图标使用方法：

外部 sprite ：

当不需要增加替代文本时（网页上经常已经存在相关文字内容了），可以设置 aria-hidden="true" 来确保屏幕语音阅读时会跳过图标：

<a href="/news/">
  <svg aria-hidden="true">
    <use xlink:href="/path/to/icons.svg#newspaper"></use>
  </svg>
  Latest News
</a>

其次，当遇到 a 标签或者 button 的内容是图标时，我们会在上面设置aria-label 。

<a href="/news/" aria-label="Latest News">
  <svg aria-hidden="true">
    <use xlink:href="/path/to/icons.svg#newspaper"></use>
  </svg>
</a>

内联 sprite：

老版本浏览器，只支持 <use xlink:href="#some-id"/> 这种内联的引用。可以将 SVG sprite 元素写到每个页面的 HTML 中去。

<body>
  <!-- Hidden icon data -->
  <svg aria-hidden="true" style="display:none">
    <symbol id="icon-play">…</symbol>
    <symbol id="icon-cross">…</symbol>
    <symbol id="icon-search">…</symbol>
  </svg>

  <!-- A visible icon: -->
  <button aria-label="Start playback">
    <svg aria-hidden="true"><use xlink:href="#icon-play"/></svg>
  </button>
</body>

给 SVG 增加 CSS 样式

可以给每个图标增加 class 名，使用类似 svg[class*="icon-"] 的CSS选择器选中图标：

<svg class="icon icon-arrow" aria-hidden="true">
    <use xlink:href="/path/to/icons.svg#arrow"></use>
</svg>

增加 CSS 样式：

.icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em; height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 normalize.css 中也包含这行 */
  overflow: hidden;
}

双色图标

当一个图标包含两个 <path> 时就可以设置两种不同的 fill 值，即显示两种颜色。

<symbol id="check" viewBox="0 0 20 20">
  <!-- 继承 CSS 中设置的 fill 值 -->
  <path d="…" />
  <!-- 继承 CSS 中设置的 color 值-->
  <path fill="currentColor" d="…" />
</symbol>

CSS配合还可以做出动画效果

参考：

https://zhuanlan.zhihu.com/p/20753791

修改时间 2021-12-25

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。