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

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

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

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

作者詳細(xì)介紹了使用Adobe Illustrator和Gulp構(gòu)建SVG符號的工作流程，并指出此方法與所有現(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來定位和更改整個元素的大小和顏色，但是，除非您的SVG代碼嵌入到HTML頁面中，否則無法通過這種方式修改其單個部分。

問題

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

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

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

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

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

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

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

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

CodePen鏈接1

CodePen鏈接2

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

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

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

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

解決方案

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

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

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

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

讓我們將其應(yīng)用于我們的示例，并為圖像中的每個形狀創(chuàng)建一個符號。它們都共享整個圖像的相同viewBox（0 0 54 54），因此它們無需任何其他指令即可定位在正確的位置。只需注意避免在符號代碼中使用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)在我們可以將它們組合到單個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>

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

CodePen鏈接3

就是這樣。

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

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

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

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

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

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

這可以在Illustrator中非?？焖俚赝瓿桑羟忻總€元素，選擇目標(biāo)畫板并選擇“粘貼到位”命令。

請注意，每個畫板都有一個特定的名稱：它將用于符號ID。

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

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

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

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

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

Gulp的使用

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

我已經(jīng)在SitePoint上寫過關(guān)于Gulp的文章，您也可以在網(wǎng)上找到大量關(guān)于Gulp安裝和所有相關(guān)參數(shù)的資源，因此我假設(shè)您已經(jīng)安裝了它，并且您知道我們在談?wù)撌裁础?/p>

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

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

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

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

<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使用每個文件的名稱來設(shè)置符號id屬性（即，名為umbrella.svg的文件將成為具有id="umbrella"的符號）。如果您使用新的Illustrator“導(dǎo)出為屏幕”面板，則可以避免第一個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ā)布了一個SVGO的在線版本，如果您想手動排列文件，這非常有用）。

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

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

接下來，將文件傳遞給svgstore以組合到一個唯一文件中，然后重命名并保存。

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

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

CodePen鏈接4

是否有任何警告？

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

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

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

額外獎勵

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

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

感謝您的閱讀。

關(guān)于可換膚SVG符號的常見問題

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

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

如何修改SVG符號的顏色？

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

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

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

如何動畫化SVG符號？

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

我可以在HTML中使用SVG符號嗎？

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

如何使我的SVG符號更易訪問？

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

我可以在CSS中使用SVG符號嗎？

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

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

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

我可以在JavaScript中使用SVG符號嗎？

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

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

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

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