备注：译文已获得作者授权，转载请附上原文链接。

在网页上应用 SVG 图标的方式众多，我尚未一一亲身体验。接下来，我要分享的技巧系我们前端团队所采纳，目前它已能有效满足我们的开发要求，诸如：

本文内容将按照以下展开：

第一步：准备图标

在获得设计师提供的SVG图标，或者从绘图软件（例如Adobe等）中获取这些图标后，你可能会直接将它们嵌入到网页中。然而，若能使用你习惯的处理工具对图标进行一些简单的调整，便能有效地预防许多可能出现的麻烦。

图标在 (左) 和 (右)的画板上显示效果

新建一个文件或画板

在常用的绘图软件中，首先创建一个新的文件或画板，然后将图标从中复制并粘贴至画面的中央位置，同时务必保证图标的纯净性，确保其中不含有任何隐藏的图层。

正方形更好

图标并不一定必须呈现为正方形，但若图标过于宽阔或过高，那么制作成正方形图标会更加方便。除非有特定的像素要求，例如在低分辨率屏幕上追求更佳的显示效果，否则正方形图标通常是更佳选择。例如，若图标需适配15x15像素的网格，并且通常使用该尺寸，那么应创建一个15x15像素的画布。不确定的时候，一般建议选择 20x20 的尺寸。

毛边问题

在边缘地带适当保留一些空白，尤其是针对圆形图标。当浏览器对 SVG 进行渲染时，会进行抗锯齿处理，但偶尔会产生额外的像素点，这些点可能会延伸至图标边界之外，使得图标的边缘似乎被截去了一部分，显得略微方形。

图标四周未设置空白区域，因此其边缘在渲染时可能会呈现出直角的线条，尤其在浏览器对 SVG 图形的渲染能力不足时，这种效果会更加明显。

所以，在处理16像素或20像素的图标时，务必确保每一边都保留0.5像素或1像素的空白区域，同时也要确保导出整个画板，而非仅选中位于画板中央的路径，否则边缘的空白将不会被包含在导出的结果中。

导出 SVG

关于 SVG 的知识点

你或许已经掌握了 SVG 的基本知识，并且能够理解其内部构造。至少，你了解以下内容：

在根据HTML内容上下文调整替代文本时，有人建议在SVG文件中加入特定的标签，但经过实际操作，我们发现这种方法并不总是奏效；实际上，许多屏幕语音阅读器都会对此选择忽略。

外部 和内联

截至目前，我们讨论的均为外部因素，然而，旧版的核心浏览器以及所有低于Edge 13版本的IE浏览器，仅对这种内嵌式的引用提供支持。我们可以考虑采用诸如……等方式来实现引用，亦或将SVG元素嵌入至每个页面的HTML文档中。

两种方法各有利弊，比较如下：

我喜欢将两种方法混起来用，创建两个 SVG ：

该SVG文件体积较小，仅包含一些常用图标，且作为内联元素嵌入至各页面，其文件大小控制在5KB以下。

一个规模稍大的SVG文件，囊括了所有图标，充当外部静态资源，其体积限制在50KB以下。

在规模较大的项目中，我们能够将图标进行分类整合，形成多个 SVG 文件，这些文件将服务于网站的具体部分或特定功能。

在 中使用 SVG 图标

译者按：本节所述内容与原文并无直接关联，译者为演示在文本中嵌入 SVG 图标之用法，特此举例说明。

在常规的开发过程中，我不清楚诸位前端开发者是否遇到过这样的困扰sketch导出svg图标，那就是在运用 font- 或其他类似图标字体库时，往往难以达到设计图上的要求。例如，当你需要插入一个代表中国地图的图标时，你会采取何种措施呢？

若为特定项目定制一套图标字体sketch导出svg图标，设计师可能需每次为你制作一套字体文件，每新增一个图标便需寻求设计师协助，随后还需打包生成ttf、woff、woff2、eot等多种格式文件，对我而言，情形大致如此。

此外，目前来看，Vue.js和React.js的兼容性均涵盖IE9及以上版本，因此，若无需考虑IE9以下版本的支持，不妨直接采用SVG技术来制作图标。

本章节将详细阐述 Vue.js 以及 React.js 的具体应用，所采用的工具为 svg--。

demo地址

图标统一放在 /icons 文件夹目录下：

  assets/
    icons/
      cross.svg
      play.svg
      heart1.svg
      ...
    icon-set.js

在 icon-set.js 中 所有图标：

引入Check组件自'./icons/check.svg'文件。
引入Cross图标模块自'./icons/cross.svg'文件。
导入图标Heart1，路径为'./icons/heart1.svg'。
  ...
  export {
    Check,
    Cross,
    Heart1,
    ...
  }

配置中增加 svg--：

  module.exports = {
    ...
    {
      test: /\.svg$/,
      loader: 'svg-sprite',
      include: /assets\/icons/
    },
    ...
  }

此刻的 SVG 文件经过 svg-- 的处理，会在其中嵌入一个内联的 SVG 图像。

  
    
    ...
  

在路径“Check from './icons/check.svg'”中，“Check”这个标识符与相应的id相匹配。

Vue 中 SVG icon 用法示例：

React 中 SVG icon 用法示例：

  import React from 'react';
  import * as iconSet from '../assets/icon-set'
将导出默认类，该类继承自React的Component。
    render() {
      return (
        

          
          ...
        
      );
    }
  }

第四步：用CSS给图标增加样式

我们已投入大量时间讲解 SVG 图标及其制作方法，以及如何将图标嵌入网页，现在将转向介绍如何运用 CSS 为这些图标添加样式。

增加 class 名

我们可以在 CSS 通过元素选择器选中所有的

class*="icon-"

的CSS选择器选中图标。

图标的默认样式

推荐的默认样式如下：

.Icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em; height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
通过调整 color 属性，可以实现对 SVG 图形的颜色/填充进行修改。
  fill: currentColor;
在IE浏览器中，当path和stroke元素超出viewBox定义的区域时，会出现显示问题；同样，这个问题在normalize.css中也有所体现。
  overflow: hidden;
}

上下两行图标都用了默认样式，差别在于父元素的字体和颜色。

当需要定制某个图标的样式时，可以参考下面这段代码：

.MyComponent-button .Icon {
  /* 设置宽高 */
  font-size: 40px;
  /* 设置颜色 */
  color: purple;
  /* 可能需要重置垂直对齐 */
  vertical-align: top;
}

图标的色泽与父级元素的文字色彩保持一致，若图标未能从父级元素那里继承文字色彩，不妨查阅图标源代码，查看其中是否有 fill 属性的设置。

SVG 继承的样式

SVG许多样式属性都是继承来的，比如在最外层的

在iOS平台上进行测试时，竟然发现有一半的SVG图标失效了？这究竟是怎么回事？！

实际上，这种方法并不允许先为SVG指定宽度与高度，然后通过CSS来调整其尺寸；尤其是当试图缩小图标时，图标的容器会相应减小，然而图标本身的内容却不会发生相应的变化。

我们的应对策略是去除 SVG 图标中的 width 属性，仅利用 CSS 来调整图标的大小。这一改动在最新版本中已得到解决，包括 9.1 桌面版以及 iOS 9.3 系统。

：避免在

之前已有提及，当前浏览器能够允许用户在由 标签构建的 DOM 结构中选取内容，因此，若编写了如下CSS：

svg {
  fill: red;
}
.Icon--something {
  fill: green;
}

在 浏览器中就会变成类似这样：

图标在多数浏览器中呈现为绿色，然而，在特定浏览器中它将变为红色，这主要是因为该浏览器中的标签依照CSS样式表的第一行定义，将fill属性设置为红色进行渲染。

还有一种写法可以避免：

:not(use) > svg { … }

如有侵权请联系删除！