處理圖標的方法有很多，但最佳方案始終包括SVG，無論它是內(nèi)聯(lián)實現(xiàn)還是作為圖像文件鏈接。這是因為它們是在代碼中“繪制”的，使它們在任何環(huán)境中都靈活、適應性和可擴展性。

但是，在使用SVG時，總有可能包含許多不必要的代碼。在某些情況下，內(nèi)聯(lián)SVG的代碼可能很長，以至于文檔滾動更長，使用起來不舒服，是的，比它需要的要重一些。

我們可以使用<use></use>元素重用代碼塊，或者應用原生變量來在一個地方管理我們的SVG樣式。或者，如果我們在服務器端環(huán)境中工作，我們總是可以添加一些PHP（或類似的）來提取SVG文件的內(nèi)容，而不是直接將其放入。

這都很好，但是如果我們可以在文件級別解決這個問題，而不是求助于基于代碼的方法，那不是很好嗎？我想關(guān)注一個不同的視角：如何使用基本形狀用更少的代碼制作相同的圖形。這樣，我們就可以在項目中獲得更小、更可控和語義化的圖標的好處，而不會犧牲質(zhì)量或視覺變化。我將介紹不同的示例，探討常用圖標的代碼以及如何使用我們可以制作的一些最簡單的SVG形狀來重新繪制它們。

以下是我們將要處理的圖標：

讓我們看看我們可以用來制作這些圖標的基本形狀，這些形狀使代碼保持小巧和簡單。

噓！ 這是我在holasvg.com上創(chuàng)建的更長的簡單圖標列表！閱讀完本文后，您將知道如何修改它們并使它們成為您自己的。

使用<line></line>元素簡化關(guān)閉圖標

這是從flaticon.com下載并由pixel-perfect構(gòu)建的“關(guān)閉”或“交叉”圖標的代碼：

在這個例子中，所有事情都發(fā)生在<path></path>內(nèi)部，數(shù)據(jù)屬性（d）中有很多命令和參數(shù)。這個SVG所做的是從它的邊界追蹤形狀。

如果您熟悉Illustrator，這相當于繪制兩條單獨的線，將它們轉(zhuǎn)換為形狀，然后使用路徑查找器將兩者組合以創(chuàng)建一個復合形狀。

<path></path>元素允許我們繪制復雜的形狀，但在這種情況下，我們可以用兩條線創(chuàng)建相同的圖形，同時保持相同的外觀：

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
? ?<line x1="0" x2="50" y1="0" y2="50"></line>
? ?<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

我們首先定義一個viewBox，從0,0到50,50。您可以選擇任何您喜歡的尺寸；SVG將始終很好地縮放至您定義的任何寬度和高度。為了簡化操作，在本例中，我還定義了50個單位的內(nèi)聯(lián)寬度和高度，這避免了繪圖中的額外計算。

要使用<line></line>元素，我們需要聲明線的第一個點的坐標和最后一個點的坐標。在本例中，我們從x=0 y=0開始，結(jié)束于x=50 y=50。

這就是代碼中的樣子：

<code><line x2="50" y2="50"></line></code>

第二條線將從x=50 y=0開始，結(jié)束于x=0 y=50：

<code><line x1="50" y2="50"></line></code>

SVG筆劃默認沒有顏色——這就是為什么我們在stroke屬性中添加黑色值的原因。我們還為stroke-width屬性提供了10個單位的寬度，并將stroke-linecap設置為圓形值，以復制原始設計的那些圓角。這些屬性直接添加到<svg></svg>標簽中，因此兩條線都將繼承它們。

由于筆劃比其默認大小1個單位大10個單位，因此viewBox可能會裁剪該線。我們可以將點向viewBox內(nèi)部移動10個單位，或者將overflow=visible添加到樣式中。

等于0的值可以刪除，因為0是默認值。這意味著兩行最終只有兩行非常小的代碼：

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

僅僅通過將<path></path>更改為<line></line>，我們不僅創(chuàng)建了一個更小的SVG文件，而且創(chuàng)建了一個更具語義和可控的代碼塊，這使得任何未來的維護都更容易。視覺效果與原圖完全相同。

相同的交叉，不同的代碼。

使用<circle></circle>和<path></path>元素簡化時鐘圖標

我從The Noun Project的barracuda那里獲得了這個時鐘圖標示例：

此形狀也使用<path></path>繪制，但我們還有許多與所用軟件和文件許可相關(guān)的命名空間和XML指令，我們可以刪除這些指令而不會影響SVG。你能說出使用哪個插圖編輯器創(chuàng)建圖標嗎？

讓我們使用一個圓圈和一個具有更簡單命令的路徑從頭開始重新創(chuàng)建這個。同樣，我們需要從一個viewBox開始，這次是從0,0到100,100，并且寬度和高度與這些單位匹配。

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

我們將<svg></svg>標簽中的樣式保持與之前的圖標相同。fill默認為黑色，因此我們需要顯式地為其賦予none值才能將其刪除。否則，圓圈將具有純黑色填充，遮擋其他形狀。

要繪制<circle></circle>，我們需要指示半徑將位于其中的中心點。我們可以通過cx（中心x）和cy（中心y）來實現(xiàn)這一點。然后r（半徑）將聲明我們的圓圈有多大。在這個例子中，半徑略小于viewBox，因此當筆劃寬度為10個單位時，它不會被裁剪。

所有這些字母是怎么回事？查看Chris Coyier的插圖指南，了解SVG語法的入門知識。

我們可以對時鐘指針使用<path></path>，因為它有一些非常有用和簡單的繪圖命令。在d（數(shù)據(jù)）中，我們必須以M（移動到）命令開頭，后跟我們將開始繪制的坐標，在本例中為50,25（靠近圓的頂部中心）。

在V（垂直）命令之后，我們只需要一個值，因為我們只能使用負數(shù)或正數(shù)向上或向下移動。正數(shù)將向下移動。H（水平）也是如此，后跟一個正數(shù)75，這將向右繪制。所有命令都是大寫的，因此我們選擇的數(shù)字將是網(wǎng)格中的點。如果我們決定使用小寫字母（相對命令），則數(shù)字將是我們在一個方向上移動的單位數(shù)量，而不是坐標系中的絕對點。

相同的時鐘，不同的代碼。

使用<rect></rect>和<polyline></polyline>元素簡化信封圖標

我在Illustrator中繪制了信封圖標，沒有擴展原始形狀。這是從導出中獲得的代碼：

Illustrator提供了一些導出圖形的SVG選項。我在“CSS屬性”下拉菜單中選擇了“樣式元素”，這樣我就可以擁有一個包含類別的標簽，我可能希望將其移動到CSS文件中。當然，應用SVG樣式的方法有很多種。

我們在這個代碼中已經(jīng)有了一些基本形狀！我沒有選擇Illustrator中的“形狀到路徑”選項，這在這里幫助很大。我們可以使用SVGOMG進一步優(yōu)化它，以刪除注釋、XML指令和不必要的數(shù)據(jù)，例如空元素。如果需要，我們可以從那里手動刪除其他額外內(nèi)容。

我們已經(jīng)有了一些更簡潔的東西：

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
? .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
? <rect height="180" width="300" x="5" y="5"></rect>
? <polyline points="5 5 155 110 305 5"></polyline></svg></code>

我們可以刪除更多內(nèi)容而不會影響信封的視覺外觀，包括：

• version="1.1"（自SVG 2以來已棄用）
• （這沒有意義或用途）
• x="0"（這是一個默認值）
• y="0"（這是一個默認值）
• xml:space="preserve"（自SVG 2以來已棄用）

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
? .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
? 
? <rect height="180" width="300" x="5" y="5"></rect>
? <polyline points="5 5 155 110 305 5"></polyline></svg></code>

如果我們真的想變得非常激進，我們可以將CSS樣式移動到單獨的樣式表中。

<rect></rect>需要一個起點，我們將從那里擴展寬度和高度，因此讓我們使用x="5"和y="5"作為我們的左上角點。從那里，我們將創(chuàng)建一個寬度為300個單位，高度為180個單位的矩形。就像時鐘圖標一樣，我們將使用5,5作為起點，因為我們有一個10個單位的筆劃，如果坐標位于0,0，則該筆劃將被裁剪。

<polyline></polyline>類似于<line></line>，但此元素始終定義一個封閉的形狀。這是一個直接來自MDN的示例：

記住我們之前為時鐘圖標繪制的圓圈？將r（半徑）替換為rx和ry?，F(xiàn)在您有兩個不同的半徑值。這是來自MDN的另一個示例：

總結(jié)

我們在短時間內(nèi)涵蓋了很多內(nèi)容！雖然我們使用示例來演示優(yōu)化SVG的過程，但我希望您從這篇文章中獲得以下幾點：

• 請記住，壓縮始于在插圖軟件中繪制SVG的方式。
• 使用可用的工具，如SVOMG，來壓縮SVG。
• 必要時手動刪除不必要的元數(shù)據(jù)。
• 將復雜的路徑替換為基本形狀。
• <use></use>是“內(nèi)聯(lián)”SVG以及建立您自己的可重用圖標庫的好方法。

通過組合這些基本形狀可以創(chuàng)建多少個圖標？

我在holasvg.com/icons上制作我的列表，我將不斷在此處上傳更多圖標和功能，現(xiàn)在您知道如何通過更改幾個數(shù)字輕松修改它們。繼續(xù)，讓它們成為你自己的吧！

以上是如何使用基本形狀簡化SVG代碼的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！