用CSS伪类方法添加SVG

我相信大家再网页上引用图标的时候，往往会使用 FontAwesome、IcoMoon 等这些图标字体。但是如果一些特殊的 Icon，例如自己的 SVG Logo，一些不在图标库中的 Icon，自己绘制的 Icon 等，这些图标该如何引入呢？

Font Awesome 是如何引入的？

Font Awesome 由若干图标字体文件和一个 CSS 样式组成。你首先需要再页面中引入 Font Awesome 的 CSS，这些 CSS 再引入若干图标字体文件，你在使用时只需填入相关的 Class 即可。

1.引入 Font Awesome CSS

<link rel="stylesheet" href="css/font-awesome.css">

我们打开这个 CSS 文件，可以看到用了 @font-face 语法引入并定义了一个名字叫 FontAwesome 的字体：

@font-face {
 font-family: 'FontAwesome';
 src: url('font/fontawesome-webfont.eot');
 src: url('font/fontawesome-webfont.eot') format('embedded-opentype'), 
      url('font/fontawesome-webfont.woff2') format('woff2'), 
      url('font/fontawesome-webfont.woff') format('woff'), 
      url('font/fontawesome-webfont.ttf') format('truetype'), 
      url('font/fontawesome-webfont.svg') format('svg');
 font-weight: normal;
 font-style: normal
}

我们来举个例子，查看一下 Home 图标的 CSS：

.fa-home:before {
  content: "\f015";
  font-family: FontAwesome;
}

我们发现是用 content 属性定义了，指出了 Home 图标在字体文件中的位置。其中，\f015 的意思是 Home 图标对应字符的编码。

2.填入 Class

这样，我们随时引用 fa-home 的 Class 即可显示出相应的 Icon 图标：

<i class="fa fa-home"></i>

如何引入自定义 SVG？

咱们也用 CSS伪类 content 属性来引入：

比如，这是一个 Home SVG 图标，它的 SVG 代码如下：

<svg t="1628322850713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2009" width="150" height="150"><path d="M168.832 359.04L489.813333 162.986667a42.666667 42.666667 0 0 1 44.458667 0l320.938667 196.096A85.333333 85.333333 0 0 1 896 431.872V810.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-378.794667a85.333333 85.333333 0 0 1 40.832-72.832zM426.666667 554.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v128a42.666667 42.666667 0 0 0 42.666667 42.666667h170.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-128a42.666667 42.666667 0 0 0-42.666667-42.666666h-170.666666z" fill="#000000" p-id="2010"></path></svg>

把这段 SVG 代码直接放到 content 属性中肯定是不对的，需要进行编码才行。这里的编码可以选择 base64编码、URL编码等。

1.URL编码

将以上 SVG 代码进行 URL 编码后，结果如下：

%3Csvg%20t%3D%221628322850713%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222009%22%20width%3D%22150%22%20height%3D%22150%22%3E%3Cpath%20d%3D%22M168.832%20359.04L489.813333%20162.986667a42.666667%2042.666667%200%200%201%2044.458667%200l320.938667%20196.096A85.333333%2085.333333%200%200%201%20896%20431.872V810.666667a85.333333%2085.333333%200%200%201-85.333333%2085.333333H213.333333a85.333333%2085.333333%200%200%201-85.333333-85.333333v-378.794667a85.333333%2085.333333%200%200%201%2040.832-72.832zM426.666667%20554.666667a42.666667%2042.666667%200%200%200-42.666667%2042.666666v128a42.666667%2042.666667%200%200%200%2042.666667%2042.666667h170.666666a42.666667%2042.666667%200%200%200%2042.666667-42.666667v-128a42.666667%2042.666667%200%200%200-42.666667-42.666666h-170.666666z%22%20fill%3D%22%23000000%22%20p-id%3D%222010%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E

接下来，我们需要用以下方式引入：

.fa-home:before {
  content: url('data:image/svg+xml;charset=utf8,这里放URL编码');
}

data 表示数据，image/svg+xml 表示格式，%20charset=utf8 表示编码，最后的地方放置刚刚转换好的URL编码。最后的 CSS 如下：

.fa-home:before {
  content: url('data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221628322850713%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222009%22%20width%3D%22150%22%20height%3D%22150%22%3E%3Cpath%20d%3D%22M168.832%20359.04L489.813333%20162.986667a42.666667%2042.666667%200%200%201%2044.458667%200l320.938667%20196.096A85.333333%2085.333333%200%200%201%20896%20431.872V810.666667a85.333333%2085.333333%200%200%201-85.333333%2085.333333H213.333333a85.333333%2085.333333%200%200%201-85.333333-85.333333v-378.794667a85.333333%2085.333333%200%200%201%2040.832-72.832zM426.666667%20554.666667a42.666667%2042.666667%200%200%200-42.666667%2042.666666v128a42.666667%2042.666667%200%200%200%2042.666667%2042.666667h170.666666a42.666667%2042.666667%200%200%200%2042.666667-42.666667v-128a42.666667%2042.666667%200%200%200-42.666667-42.666666h-170.666666z%22%20fill%3D%22%23000000%22%20p-id%3D%222010%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

这样就可以显示出 SVG 图标了。但是 URL 编码有一个致命的缺点，带有 fill 颜色填充样式的 SVG 进行 URL转换后，无法显示出颜色，依旧是默认的黑色，且因为安全问题也无法使用 CSS 样式进行控制。

2.base64编码

将以上 SVG 代码进行 base64 编码后，结果如下：

PHN2ZyB0PSIxNjI4MzIyODUwNzEzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwMDkiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48cGF0aCBkPSJNMTY4LjgzMiAzNTkuMDRMNDg5LjgxMzMzMyAxNjIuOTg2NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDQuNDU4NjY3IDBsMzIwLjkzODY2NyAxOTYuMDk2QTg1LjMzMzMzMyA4NS4zMzMzMzMgMCAwIDEgODk2IDQzMS44NzJWODEwLjY2NjY2N2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMyA4NS4zMzMzMzNIMjEzLjMzMzMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMy04NS4zMzMzMzN2LTM3OC43OTQ2NjdhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA0MC44MzItNzIuODMyek00MjYuNjY2NjY3IDU1NC42NjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMC00Mi42NjY2NjcgNDIuNjY2NjY2djEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2NyA0Mi42NjY2NjdoMTcwLjY2NjY2NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2Ny00Mi42NjY2Njd2LTEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwLTQyLjY2NjY2Ny00Mi42NjY2NjZoLTE3MC42NjY2NjZ6IiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIyMDEwIj48L3BhdGg+PC9zdmc+

很相似，base64 引入方法如下：

.fa-home:before {
  content: url('data:image/svg+xml;base64,这里放base64编码');
}

只需修改编码参数即可，完整 CSS 如下：

.fa-home:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB0PSIxNjI4MzIyODUwNzEzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwMDkiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48cGF0aCBkPSJNMTY4LjgzMiAzNTkuMDRMNDg5LjgxMzMzMyAxNjIuOTg2NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDQuNDU4NjY3IDBsMzIwLjkzODY2NyAxOTYuMDk2QTg1LjMzMzMzMyA4NS4zMzMzMzMgMCAwIDEgODk2IDQzMS44NzJWODEwLjY2NjY2N2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMyA4NS4zMzMzMzNIMjEzLjMzMzMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxLTg1LjMzMzMzMy04NS4zMzMzMzN2LTM3OC43OTQ2NjdhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA0MC44MzItNzIuODMyek00MjYuNjY2NjY3IDU1NC42NjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMC00Mi42NjY2NjcgNDIuNjY2NjY2djEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2NyA0Mi42NjY2NjdoMTcwLjY2NjY2NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDQyLjY2NjY2Ny00Mi42NjY2Njd2LTEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwLTQyLjY2NjY2Ny00Mi42NjY2NjZoLTE3MC42NjY2NjZ6IiBmaWxsPSIjMDAwMDAwIiBwLWlkPSIyMDEwIj48L3BhdGg+PC9zdmc+');
}

base64 编码可以保留 SVG 的 Fill 颜色填充样式，可以控制 SVG 的颜色，推荐使用 base64 编码方法。

优化 SVG 代码

我们发现复杂的 SVG 转换后的编码往往会更多更长，你可以参考 Optimizing SVGs in data URIs，来压缩你的 SVG 代码，减少编码长度。

其他讨论

引入 SVG 其实还有一个好处，就是能提升清晰度。虽然 FontAwesome 和 SVG 图标都是矢量，但是 FontAwesome 可能会被操作系统当作文字来渲染，当放大时，可能会有明显的锯齿边缘。而使用 SVG 替换，就可以提升素材清晰度，SVG 也慢慢成为一种更好的主流方法了。

阅读: 1,521

Web 全栈

程序应用

操作系统