如何使用基本形狀簡化SVG代碼

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

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

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

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

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

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

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

使用<line></line>元素簡化關閉圖標

這是從flaticon.com下載並由pixel-perfect構建的“關閉”或“交叉”圖標的代碼：

在這個例子中，所有事情都發生在<path></path>內部，數據屬性（d）中有很多命令和參數。這個SVG所做的是從它的邊界追踪形狀。

如果您熟悉Illustrator，這相當於繪製兩條單獨的線，將它們轉換為形狀，然後使用路徑查找器將兩者組合以創建一個複合形狀。

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

<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個單位的內聯寬度和高度，這避免了繪圖中的額外計算。

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

這就是代碼中的樣子：

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

第二條線將從x=50 y=0開始，結束於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內部移動10個單位，或者將overflow=visible添加到樣式中。

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

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

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

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

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

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

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

讓我們使用一個圓圈和一個具有更簡單命令的路徑從頭開始重新創建這個。同樣，我們需要從一個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）來實現這一點。然後r（半徑）將聲明我們的圓圈有多大。在這個例子中，半徑略小於viewBox，因此當筆劃寬度為10個單位時，它不會被裁剪。

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

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

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

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

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

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

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

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

我們已經有了一些更簡潔的東西：

<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>

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

• 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"作為我們的左上角點。從那裡，我們將創建一個寬度為300個單位，高度為180個單位的矩形。就像時鐘圖標一樣，我們將使用5,5作為起點，因為我們有一個10個單位的筆劃，如果坐標位於0,0，則該筆劃將被裁剪。

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

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

總結

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

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

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

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

以上是如何使用基本形狀簡化SVG代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！