SVG圖標(biāo)在現(xiàn)代網(wǎng)頁設(shè)計(jì)中的應(yīng)用日益廣泛，這得益於其可縮放性、小文件尺寸以及CSS樣式化能力，使其成為響應(yīng)式網(wǎng)站的理想選擇。

儘管SVG可以使用CSS進(jìn)行樣式化，但這僅在SVG代碼嵌入HTML頁面時(shí)才有效。這意味著，除非SVG嵌入，否則無法修改SVG的單個(gè)部分。

本文介紹了“可換膚SVG符號(hào)”的概念，其中SVG圖像的“骨架”保持不變，但表面外觀可以輕鬆更改。

文章提出了一種解決無法修改SVG單個(gè)部分問題的方案。這涉及為SVG中的每個(gè)形狀創(chuàng)建一個(gè)符號(hào)，每個(gè)符號(hào)都在同一個(gè)viewBox中，允許根據(jù)需要對(duì)每個(gè)元素進(jìn)行樣式設(shè)置。

作者詳細(xì)介紹了使用Adobe Illustrator和Gulp構(gòu)建SVG符號(hào)的工作流程，並指出此方法與所有現(xiàn)代瀏覽器兼容。

SVG在現(xiàn)代網(wǎng)頁中的廣泛應(yīng)用在2016年得到了顯著提升，這要?dú)w功於其文件大小、可縮放性和CSS樣式化能力。

它可用於圖標(biāo)系統(tǒng)（參見《構(gòu)建您自己的SVG圖標(biāo)》），儘管在某些情況下，圖標(biāo)字體可能更可?。▍⒁姟秷D標(biāo)大戰(zhàn)：字體與SVG》）。

但SVG也可用於徽標(biāo)或圖形元素（至少不是過於復(fù)雜的元素），其天然的靈活性使其成為響應(yīng)式網(wǎng)站的完美解決方案（參見Sara Soueidan的《使用CSS製作響應(yīng)式SVG》） 。

使用SVG可以利用CSS來定位和更改整個(gè)元素的大小和顏色，但是，除非您的SVG代碼嵌入到HTML頁面中，否則無法通過這種方式修改其單個(gè)部分。

問題

讓我們來看一個(gè)更簡單的例子。這裡有一個(gè)圖像，我們需要以多種顏色顯示它。

傳統(tǒng)上，我們會(huì)創(chuàng)建三個(gè)獨(dú)立的圖像——每個(gè)圖像都有不同的“風(fēng)格”。但是，如果我們想使用單個(gè)SVG文件並在渲染時(shí)對(duì)其進(jìn)行樣式設(shè)置呢？

此外，有沒有辦法將我們的圖像製作成“SVG符號(hào)”以利用瀏覽器緩存？

我將其稱為“可換膚SVG符號(hào)”——SVG圖像的“骨架”保持不變，但表面外觀很容易改變。

理想的解決方案是通過CSS選擇器訪問符號(hào)元素並向其添加一些規(guī)則（與嵌入式SVG使用的方法相同）。

在下面的示例中，我已經(jīng)向每個(gè)三角形添加了一個(gè)類（頂部、右側(cè)、底部和左側(cè)），將圖像排列為符號(hào)，並嘗試通過CSS修改它，方法如下：

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

不幸的是，目前這僅適用於Firefox，如下面的CodePen演示所示。只有在Firefox上，第二個(gè)圖像才會(huì)顯示為藍(lán)色色調(diào)（為方便起見，我在筆中嵌入了符號(hào)代碼，但使用外部SVG文件也會(huì)得到相同的結(jié)果）。

CodePen鏈接1

CodePen鏈接2

在大型項(xiàng)目中，我們可能有許多這樣的元素，維護(hù)問題是一個(gè)重要因素，因此我一直在尋找一種更好地組織項(xiàng)目資源的方法。

我的目標(biāo)是純粹的CSS解決方案：之前的示例可以使用單個(gè)三角形SVG來重寫，可以通過CSS進(jìn)行旋轉(zhuǎn)、移動(dòng)和著色。

但我並不喜歡這個(gè)解決方案：在我看來，它只是轉(zhuǎn)移了問題，並沒有解決問題。有多少現(xiàn)實(shí)世界的徽標(biāo)的組件具有相同的形狀？

Sara Soueidan比我更好地解釋了這個(gè)問題，並為我們提供了一個(gè)使用CSS變量的巧妙解決方案。不幸的是，CSS變量仍然是一項(xiàng)實(shí)驗(yàn)性技術(shù)，Microsoft瀏覽器不支持它們。

解決方案

正如經(jīng)常發(fā)生的那樣，解決方案是如此簡單，以至於你會(huì)因?yàn)橹皼]有想到而感到愚蠢。

幾個(gè)月前，我看到新的Medium徽標(biāo)時(shí)發(fā)現(xiàn)了它（似乎Medium已經(jīng)更改了他們的徽標(biāo)代碼——你必須相信我的話）。

您可以看到Medium徽標(biāo)由四個(gè)“形狀”組成，每個(gè)形狀都填充了不同的純色。黑白版本與綠色版本相同（當(dāng)然，顏色除外）。

同時(shí)擁有這兩個(gè)版本的單個(gè)文件的解決方案是為每個(gè)形狀簡單地構(gòu)建一個(gè)符號(hào)，每個(gè)符號(hào)都在同一個(gè)viewBox中。

讓我們將其應(yīng)用於我們的示例，並為圖像中的每個(gè)形狀創(chuàng)建一個(gè)符號(hào)。它們都共享整個(gè)圖像的相同viewBox（0 0 54 54），因此它們無需任何其他指令即可定位在正確的位置。只需注意避免在符號(hào)代碼中使用fill、stroke、style等屬性）。

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

現(xiàn)在我們可以將它們組合到單個(gè)SVG容器中：

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

每個(gè)use元素都可以根據(jù)需要進(jìn)行樣式設(shè)置，最重要的是，它與所有現(xiàn)代瀏覽器兼容：

CodePen鏈接3

就是這樣。

我們只需要這樣排列我們的SVG文件。當(dāng)然，我們可以手動(dòng)完成，但是如果您必須管理許多圖形元素，或者需要在更多項(xiàng)目中快速編輯和重用它們，則需要更智能、更快速的工作流程。我已經(jīng)找到了使用Adobe Illustrator和一些Gulp的解決方案。

SVG符號(hào)構(gòu)建工作流程

此技術(shù)的原理與我在《構(gòu)建您自己的SVG圖標(biāo)》和《使用Illustrator和IcoMoon創(chuàng)建圖標(biāo)字體》文章中介紹的相同，因此請(qǐng)查看它們以了解第一步。

假設(shè)我們有兩個(gè)元素，就像下面的圖像一樣。每個(gè)元素都排列在一個(gè)特定的畫板中：

為方便起見，我們?yōu)樗鼈兲砑恿艘恍╊伾?，儘管我們知道填充顏色（以及如果有的話，描邊顏色、描邊大小等）將通過CSS進(jìn)行編輯。

由於每個(gè)符號(hào)必須有其畫板，因此我們現(xiàn)在必須將每個(gè)圖像分割成與每個(gè)彩色部分一樣多的畫板。

這可以在Illustrator中非?？焖俚赝瓿?，剪切每個(gè)元素，選擇目標(biāo)畫板並選擇“粘貼到位”命令。

請(qǐng)注意，每個(gè)畫板都有一個(gè)特定的名稱：它將用於符號(hào)ID。

現(xiàn)在我們可以使用全新的“文件→導(dǎo)出→導(dǎo)出為屏幕”命令將我們的畫板導(dǎo)出為SVG。

這是最新Illustrator版本的真正有用的新工具：它允許您使用單個(gè)命令以多種格式保存每個(gè)畫板或用戶定義的資源。

從導(dǎo)出面板中選擇“畫板”，將“SVG”設(shè)置為輸出格式，然後選擇目標(biāo)文件夾：

每個(gè)畫板都將導(dǎo)出為單個(gè)SVG文件：

現(xiàn)在我們需要將所有文件組合成SVG符號(hào)，並刪除一些不需要的SVG屬性：一個(gè)小型的gulp腳本將幫助我們快速完成此操作。

Gulp的使用

下一節(jié)內(nèi)容略微技術(shù)性一些，但是——如果您願(yuàn)意——它將為您提供一種快速、簡潔的方法來生成這樣的多功能SVG。

我已經(jīng)在SitePoint上寫過關(guān)於Gulp的文章，您也可以在網(wǎng)上找到大量關(guān)於Gulp安裝和所有相關(guān)參數(shù)的資源，因此我假設(shè)您已經(jīng)安裝了它，並且您知道我們?cè)谡務(wù)撌颤N。

無論如何，如果您不喜歡Gulp，您也可以手動(dòng)完成以下所有步驟。在開始使用Gulp之前，我已經(jīng)多次這樣做過：這絕對(duì)是一種學(xué)習(xí)的好方法，在小型項(xiàng)目或不需要持續(xù)編輯和維護(hù)工作的地方已經(jīng)足夠了。

因此，我們有一些SVG文件，每個(gè)文件都像下面的示例一樣排列（d屬性已縮短，以方便起見）：

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

我們的目標(biāo)是將所有圖像排列為單個(gè)文件中的SVG符號(hào)，同時(shí)去除所有不需要的屬性：

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

除了Gulp之外，我們的工作還需要一些其他擴(kuò)展：

• 首先，gulp-svgstore和gulp-svgmin用於組合和壓縮我們的svg文件
• gulp-rename用於調(diào)整id名稱並為我們的目標(biāo)文件指定名稱。如果您想使用之前的Illustrator SVG導(dǎo)出命令，則尤其需要此模塊，我們稍後將介紹它。

現(xiàn)在我們可以安排我們的Gulpfile（代碼也可以作為公共Gist獲得）：

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

加載模塊後，我們指示要解析的文件（svg_files/*.svg）。

SVGstore使用每個(gè)文件的名稱來設(shè)置符號(hào)id屬性（即，名為umbrella.svg的文件將成為具有id="umbrella"的符號(hào)）。如果您使用新的Illustrator“導(dǎo)出為屏幕”面板，則可以避免第一個(gè)rename命令，因?yàn)槟奈募⑴c它們所屬的畫板完全相同命名。

但是舊版本的Illustrator通過將Illustrator文件名與畫板名稱連接起來創(chuàng)建文件名，因此我們需要重命名文件以刪除Illustrator文件名前綴：

<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<title>umbrella-handle</title>
<path d="..." fill="#603813"></path>
</svg>

現(xiàn)在我們可以清理我們的文件了。 gulp-svgmin是SVGO的Gulp版本，“基於Nodejs的工具，用於優(yōu)化SVG矢量圖形文件”（Jake Archibald發(fā)布了一個(gè)SVGO的在線版本，如果您想手動(dòng)排列文件，這非常有用）。

SVGO有很多可配置的選項(xiàng)（您可以在項(xiàng)目頁面中瀏覽所有選項(xiàng)），但我們只需要幾個(gè)（當(dāng)然，您可以根據(jù)需要自定義腳本）：

• cleanupIDs：從文件中刪除所有id
• removeDoctype、removeComments和removeStyleElement：去除所有文檔類型聲明、註釋和<style></style>元素
• removeDimensions：如果存在viewBox，則刪除所有width和height屬性
• cleanupNumericValues：將數(shù)值四捨五入到合理的精度級(jí)別
• removeAttrs：刪除所有指定的屬性

接下來，將文件傳遞給svgstore以組合到一個(gè)唯一文件中，然後重命名並保存。

使用幾次後，您應(yīng)該能夠在幾分鐘內(nèi)為每個(gè)項(xiàng)目安排它，並且它將使您能夠在需要時(shí)快速重建您的SVG符號(hào)文件。

這是一個(gè)結(jié)果示例（即使在這個(gè)筆中，我也為了方便而嵌入了svg文件，但您可以安全地將其鏈接為外部文件）：

CodePen鏈接4

是否有任何警告？

由於此方法基於樣式化use元素，因此當(dāng)polyfill（例如svg4everybody）刪除它們時(shí)，我們會(huì)遇到問題。

在不支持外部符號(hào)鏈接的瀏覽器（所有IE）中，svg4everybody會(huì)用匹配符號(hào)的內(nèi)容替換所有use元素。因此，應(yīng)用於use的所有css規(guī)則都不會(huì)生效。

這可以通過調(diào)整CSS選擇器以適應(yīng)內(nèi)部符號(hào)元素（path、circle等）來解決，但這可能有點(diǎn)棘手。

額外獎(jiǎng)勵(lì)

此工作流程有無限種變體：您可以處理描邊、文本等。

另一個(gè)值得探索的有趣功能是使用Illustrator符號(hào)：它們導(dǎo)出為SVG符號(hào)，這帶來了許多可能性。

感謝您的閱讀。

關(guān)於可換膚SVG符號(hào)的常見問題

使用SVG符號(hào)而不是其他圖像格式進(jìn)行網(wǎng)頁設(shè)計(jì)的優(yōu)勢是什麼？

與JPEG、PNG或GIF等其他圖像格式相比，SVG符號(hào)具有多種優(yōu)勢。首先，SVG是可縮放矢量圖形，這意味著它們可以重新調(diào)整大小而不會(huì)損失質(zhì)量。這對(duì)於響應(yīng)式網(wǎng)頁設(shè)計(jì)特別有用，在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，需要在不同設(shè)備上以不同大小顯示相同的圖像。其次，SVG符號(hào)可以使用CSS進(jìn)行樣式化，從而提高設(shè)計(jì)靈活性。最後，SVG的文件大小通常小於其位圖對(duì)應(yīng)物，這可以加快加載速度並提高網(wǎng)站性能。

如何修改SVG符號(hào)的顏色？

您可以使用CSS修改SVG符號(hào)的顏色。默認(rèn)情況下，SVG繼承其父元素的顏色。但是，您可以通過在CSS中定位SVG或其子元素並應(yīng)用所需顏色來覆蓋此設(shè)置。例如，您可以使用fill屬性更改SVG內(nèi)部的顏色，或使用stroke屬性更改其輪廓的顏色。

我可以在所有網(wǎng)頁瀏覽器中使用SVG符號(hào)嗎？

SVG符號(hào)在所有現(xiàn)代網(wǎng)頁瀏覽器（包括Chrome、Firefox、Safari和Edge）中得到廣泛支持。但是，舊版本的Internet Explorer（IE8及以下版本）不支持SVG。如果您需要支持這些舊瀏覽器，則可能需要提供PNG或JPEG圖像作為後備。

如何動(dòng)畫化SVG符號(hào)？

可以使用CSS動(dòng)畫或JavaScript動(dòng)畫化SVG符號(hào)。 CSS動(dòng)畫更簡單且性能更高，但JavaScript提供更多控制和靈活性。您可以動(dòng)畫化SVG的各種屬性，例如其位置、大小、旋轉(zhuǎn)、顏色和不透明度。

我可以在HTML中使用SVG符號(hào)嗎？

是的，SVG符號(hào)可以直接嵌入到HTML中。這可以使用<svg></svg>和<symbol></symbol>標(biāo)籤來完成。 <symbol></symbol>標(biāo)籤用於定義SVG符號(hào)，<use></use>標(biāo)籤用於實(shí)例化它。這允許您一次定義SVG符號(hào)，並在整個(gè)HTML中多次重用它。

如何使我的SVG符號(hào)更易訪問？

要使您的SVG符號(hào)更易訪問，您應(yīng)該使用SVG中的<title></title>和<desc></desc>標(biāo)籤提供替代文本。 <title></title>標(biāo)籤為SVG提供簡短的描述性標(biāo)題，<desc></desc>標(biāo)籤提供更長的描述。這些標(biāo)籤由屏幕閱讀器讀取，並為視力障礙用戶提供重要的上下文。

我可以在CSS中使用SVG符號(hào)嗎？

是的，SVG符號(hào)可以用作CSS中的背景圖像。這可以通過將SVG編碼為數(shù)據(jù)URL並將其用作background-image屬性的值來完成。但是，此方法不允許您使用CSS設(shè)置SVG的樣式或?qū)ζ溥M(jìn)行動(dòng)畫處理。

如何優(yōu)化我的SVG符號(hào)以提高性能？

有幾種方法可以優(yōu)化您的SVG符號(hào)以提高性能。首先，您可以壓縮SVG代碼以減小其文件大小。其次，您可以使用gzip壓縮進(jìn)一步減小文件大小。最後，您可以使用HTTP/2來服務(wù)您的SVG，這允許更快、更高效的數(shù)據(jù)傳輸。

我可以在JavaScript中使用SVG符號(hào)嗎？

是的，SVG符號(hào)可以用JavaScript進(jìn)行操作。這允許您動(dòng)態(tài)更改SVG的屬性，例如其顏色、大小、位置和可見性。您還可以使用JavaScript來動(dòng)畫化SVG、創(chuàng)建交互式SVG和動(dòng)態(tài)加載SVG。

如何創(chuàng)建響應(yīng)式SVG符號(hào)？

要?jiǎng)?chuàng)建響應(yīng)式SVG符號(hào)，您應(yīng)該為SVG的寬度和高度使用相對(duì)單位（如百分比），而不是絕對(duì)單位（如像素）。這允許SVG與其父元素一起縮放。您還可以使用viewBox屬性指定SVG的縱橫比和坐標(biāo)系，這允許它按比例縮放。

以上是'可重新連接的SVG符號(hào)：如何製作它們（以及為什麼）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！