在網(wǎng)頁中使用 SVG 圖標(biāo)的方法有很多種。 我還沒有全部嘗試過。 我要介紹的方法是我們前端團(tuán)隊(duì)使用的sketch導(dǎo)出svg圖標(biāo)，目前可以很好地滿足我們的開發(fā)需求，比如：

本文內(nèi)容將擴(kuò)展如下：

第一步：準(zhǔn)備圖標(biāo)

當(dāng)你從設(shè)計(jì)器或繪圖工具（如Adobe、、、等）獲得一個(gè)SVG圖標(biāo)時(shí)，你可能會(huì)直接將其放入網(wǎng)頁中，但如果你能對圖標(biāo)進(jìn)行一些處理（使用你常用的處理工具）sketch導(dǎo)出svg圖標(biāo)，這樣可以避免很多令人頭疼的事情。

（左）、（右）畫板上的圖標(biāo)顯示效果

創(chuàng)建新文檔或畫板

在常用的繪圖工具中創(chuàng)建一個(gè)新文件或畫板，然后將圖標(biāo)復(fù)制并粘貼到中間。 最好保證圖標(biāo)純凈，沒有隱藏層。

正方形比較好

圖標(biāo)不必是方形的。 除非圖標(biāo)太寬或太高，否則建議將其設(shè)置為方形圖標(biāo)，以便于操作。 當(dāng)您有像素級(jí)的要求時(shí)，例如希望在低分辨率屏幕上獲得更好的顯示效果，則需要確定圖標(biāo)大小。 例如，如果圖標(biāo)需要適合 15x15 像素網(wǎng)格，并且經(jīng)常以此尺寸使用，則應(yīng)創(chuàng)建一個(gè) 15x15 像素畫板。 如有疑問，一般建議選擇 20x20 尺寸。

毛刺問題

在邊緣周圍留一點(diǎn)空白，尤其是圓形圖標(biāo)。 瀏覽器在渲染 SVG 時(shí)會(huì)執(zhí)行抗鋸齒處理。 然而，有時(shí)抗鋸齒生成的額外像素會(huì)跑到外面，導(dǎo)致圖標(biāo)的邊緣看起來被切斷，使其看起來有點(diǎn)方形。

圖標(biāo)的邊緣不留空，因此可能會(huì)呈現(xiàn)方形邊緣。 當(dāng)瀏覽器不能很好地渲染SVG時(shí)，效果就更差了。

因此，每次處理16px或20px的圖標(biāo)時(shí)，記得在每個(gè)邊緣留出0.5px或1px的空白，并且記得導(dǎo)出整個(gè)畫板而不是選擇中間的路徑，否則邊緣的空白將不會(huì)出現(xiàn)。被出口。

導(dǎo)出 SVG

關(guān)于SVG的知識(shí)點(diǎn)

您可能已經(jīng)學(xué)習(xí)了 SVG 的基礎(chǔ)知識(shí)并可以理解它的結(jié)構(gòu)。 至少你知道：

應(yīng)根據(jù) HTML 內(nèi)容的上下文確定替代文本。 有人建議給SVG添加標(biāo)簽，但經(jīng)過實(shí)踐我們發(fā)現(xiàn)它并不總是有效，而且很多屏幕語音朗讀都會(huì)忽略它。

外部和內(nèi)聯(lián)

到目前為止我們提到的是外部的，但舊版本的內(nèi)核瀏覽器以及所有版本的 IE（Edge 13 以下）僅支持此類內(nèi)聯(lián)引用。 例如，考慮引入等待或?qū)?SVG 元素寫入每個(gè)頁面的 HTML 中。

 ?
 ?
 ?
 ?
 ? ?
 ?

兩種方法各有優(yōu)缺點(diǎn)，比較如下：

我喜歡混合使用這兩種方法并創(chuàng)建兩個(gè) SVG：

包含常用圖標(biāo)的較小 SVG 作為內(nèi)聯(lián)元素放置在每個(gè)頁面上，大小小于 5KB。

較大的 SVG 包含所有圖標(biāo)作為外部靜態(tài)資源，大小在 50KB 以內(nèi)。

在較大的項(xiàng)目中，我們可以將圖標(biāo)分組打包成多個(gè)SVG，以服務(wù)于網(wǎng)站的某個(gè)部分或特定功能。

使用 SVG 圖標(biāo)

譯者注：本節(jié)內(nèi)容與原文無關(guān)。 這是翻譯器使用 SVG 圖標(biāo)進(jìn)行顯示的示例。

在日常開發(fā)中，不知道有沒有前端朋友遇到過一個(gè)問題，那就是使用font-或者類似的icon-font包無法滿足設(shè)計(jì)稿中的需求。 例如，出現(xiàn)一個(gè)中國地圖形狀的圖標(biāo)。 你會(huì)怎么辦？

如果你專門為項(xiàng)目維護(hù)一個(gè)圖標(biāo)字體，你可能每次都需要設(shè)計(jì)師來幫你制作字體文件。 每次添加圖標(biāo)都得向設(shè)計(jì)者求助，然后打包生成ttf、woff、woff2、eot。 一堆文件，至少對我來說是這樣。

另外，目前Vue.js和React.js的兼容性是IE9+，所以如果不關(guān)心IE 9以下的兼容性，直接使用SVG制作圖標(biāo)即可。

示例將分別介紹在Vue.js和React.js中的用法，工具使用svg--。

演示地址

圖標(biāo)放置在 /icons 文件夾目錄中：

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

icon-set.js 中的所有圖標(biāo)：

 ?import Check from './icons/check.svg'
 ?import Cross from './icons/cross.svg'
 ?import Heart1 from './icons/heart1.svg'
 ?...
 ?export {
 ? ?Check,
 ? ?Cross,
 ? ?Heart1,
 ? ?...
 ?}

將 svg-- 添加到配置中：

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

此時(shí)，通過 svg-- 處理 svg 文件，下面會(huì)插入一個(gè)內(nèi)聯(lián) SVG：

 ?
 ? ?
 ? ?...
 ?

在Check from './icons/check.svg'中，Check是對應(yīng)的id。

Vue 中 SVG 圖標(biāo)的使用示例：

 ?
 ?

React 中 SVG 圖標(biāo)使用示例：

 ?import React from 'react';
 ?import * as iconSet from '../assets/icon-set'
 ?export default class App extends React.Component {
 ? ?render() {
 ? ? ?return (
 ? ? ? ?

 ? ? ? ? ?
 ? ? ? ? ?...
 ? ? ? ?
 ? ? ?);
 ? ?}
 ?}

第四步：使用CSS給圖標(biāo)添加樣式

我們花了很多時(shí)間討論SVG圖標(biāo)和SVG制作，以及如何將圖標(biāo)放入網(wǎng)頁中。 接下來我們將介紹如何通過CSS為圖標(biāo)添加樣式。

添加班級(jí)名稱

我們可以通過CSS中的元素選擇器來選擇所有

我們建議使用 SUIT CSS 命名約定（您可以選擇您喜歡的命名樣式），這樣您就可以使用 CSS 選擇器（如 svg[class*="icon-"]）來選擇圖標(biāo)。

圖標(biāo)的默認(rèn)樣式

推薦的默認(rèn)樣式如下：

.Icon {
 ?/* 通過設(shè)置 font-size 來改變圖標(biāo)大小 */
 ?width: 1em; height: 1em;
 ?/* 圖標(biāo)和文字相鄰時(shí)，垂直對齊 */
 ?vertical-align: -0.15em;
 ?/* 通過設(shè)置 color 來改變 SVG 的顏色/fill */
 ?fill: currentColor;
 ?/* path 和 stroke 溢出 viewBox 部分在 IE 下會(huì)顯示 ? ? normalize.css 中也包含這行 */
 ?overflow: hidden;
}

上下兩行圖標(biāo)均使用默認(rèn)樣式。 區(qū)別在于父元素的字體和顏色。

當(dāng)需要自定義圖標(biāo)樣式時(shí)，可以參考以下代碼：

.MyComponent-button .Icon {
 ?/* 設(shè)置寬高 */
 ?font-size: 40px;
 ?/* 設(shè)置顏色 */
 ?color: purple;
 ?/* 可能需要重置垂直對齊 */
 ?vertical-align: top;
}

圖標(biāo)的顏色與父元素的文本顏色相同。 如果圖標(biāo)沒有繼承父元素()的文字顏色，檢查圖標(biāo)源碼中是否有fill屬性。

SVG 繼承樣式

SVG的很多樣式屬性都是繼承的，比如最外面的

然后我們在iOS上測試的時(shí)候，有一半的SVG圖標(biāo)壞了？ 我勒個(gè)去？ ！

其實(shí)/不支持先設(shè)置SVG的寬高屬性，然后通過CSS改變大小。 特別是如果你想讓圖標(biāo)變小，圖標(biāo)的容器就會(huì)變小，但是圖標(biāo)的內(nèi)容不會(huì)生效。

我們的解決方案是去掉SVG上的寬度和屬性，只通過CSS控制圖標(biāo)大小。 最新版本已經(jīng)修復(fù)了這個(gè)問題（9.1桌面版和iOS 9.3）。

：避免在

上一節(jié)提到，瀏覽器目前支持選擇標(biāo)簽創(chuàng)建的 DOM 中的內(nèi)容，因此如果你這樣編寫 CSS：

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

在瀏覽器中它將如下所示：

 ?

圖標(biāo)在其他瀏覽器中是綠色的，但是在瀏覽器中會(huì)是紅色的，因?yàn)閮?nèi)層標(biāo)簽是根據(jù)CSS第一行的fill: red來渲染的。

還有另一種方法可以避免這種情況：

:not(use) > svg { … }

如有侵權(quán)請聯(lián)系刪除！