SVG圖像：網(wǎng)頁(yè)設(shè)計(jì)的理想選擇

可縮放矢量圖形（SVG）是網(wǎng)頁(yè)圖形格式的絕佳選擇，原因有很多，其中一個(gè)重要原因就是其相對(duì)較小的文件大小。然而，這並非絕對(duì)的。讓我們深入探討一下。

(本文是與SiteGround合作創(chuàng)作系列文章的一部分。感謝您支持使SitePoint成為可能的合作夥伴。)

矢量圖像的優(yōu)勢(shì)

光柵圖像（例如.JPEG、.PNG等）由網(wǎng)格中排列的方形像素構(gòu)成。因此，圖像越大，使用的像素就越多，導(dǎo)致文件大小增加。

不僅如此，基於像素的圖形縮放效果並不好。這意味著什麼？這是一張?jiān)紝挾葹?00 x 225像素的花朵.JPEG圖像：

這是同一張圖像在更高分辨率下的顯示效果：

注意其模糊的邊緣、模糊的表面以及圖像整體質(zhì)量的顯著下降。

鑑於視網(wǎng)膜屏幕如今在用戶設(shè)備上很常見(jiàn)，您的網(wǎng)站上使用光柵圖像出現(xiàn)這種情況的風(fēng)險(xiǎn)很高。一種替代方法是提供高分辨率圖形，但這當(dāng)然會(huì)嚴(yán)重影響網(wǎng)頁(yè)性能。

srcset 和 <picture></picture> 元素

幸運(yùn)的是，現(xiàn)代HTML通過(guò)響應(yīng)式圖像（即srcset和<picture></picture>元素）來(lái)解決這個(gè)問(wèn)題。在撰寫(xiě)本文時(shí)，除了IE11和Opera Mini之外，所有主流瀏覽器的最新版本都支持這兩個(gè)元素。

響應(yīng)式圖像的目標(biāo)是為使用的設(shè)備提供最佳質(zhì)量的圖像。這涉及提供各種分辨率的圖像，但允許瀏覽器僅加載適合訪問(wèn)設(shè)備功能的圖像。

如果您想了解更多關(guān)於這些技術(shù)如何工作的信息，Saurabh Kirtani撰寫(xiě)的《如何使用srcset構(gòu)建響應(yīng)式圖像》深入探討了這一主題。

以下是srcset在實(shí)踐中的樣子：

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg"  class="lazy" alt="Is Using SVG Images Good for Your Website&#x27;s Performance? " />

下面是<picture>元素的示例：

<picture>
  <source media="(orientation: landscape)" srcset="retina-horizontal-使用SVG圖像適合您的網(wǎng)站的性能嗎？.jpg 2x, horizontal-使用SVG圖像適合您的網(wǎng)站的性能嗎？.jpg">
  <source media="(orientation: portrait)" srcset="retina-vertical-使用SVG圖像適合您的網(wǎng)站的性能嗎？.jpg 2x, vertical-使用SVG圖像適合您的網(wǎng)站的性能嗎？.jpg">
  <img src="/static/imghw/default1.png"  data-src="使用SVG圖像適合您的網(wǎng)站的性能嗎？.jpg"  class="lazy" alt="使用SVG圖像適合您的網(wǎng)站的性能嗎？">
</picture>

如您所見(jiàn)，儘管根據(jù)訪問(wèn)設(shè)備只會(huì)提供一個(gè)圖像副本，但這兩種技術(shù)都需要您準(zhǔn)備並上傳多個(gè)圖像副本到您的服務(wù)器。這不會(huì)影響您網(wǎng)站的性能，但會(huì)對(duì)您的時(shí)間和服務(wù)器帶寬產(chǎn)生負(fù)面影響。

SVG是分辨率無(wú)關(guān)的

縮放是矢量圖形的DNA，而SVG是一種基於XML的矢量圖像格式。 SVG由幾何繪圖指令（例如形狀、路徑、線條等）組成，這些指令與像素大小無(wú)關(guān)。從文件大小的角度來(lái)看，圖像以什麼大小呈現(xiàn)並不重要，因?yàn)檫@些指令保持不變。

分辨率無(wú)關(guān)的另一個(gè)含義是，您不需要為不同的設(shè)備準(zhǔn)備同一圖像的不同副本；一個(gè)尺寸適合所有設(shè)備，並且在任何屏幕分辨率下都顯得清晰銳利。

也就是說(shuō)，某些因素會(huì)對(duì)SVG文件大小產(chǎn)生負(fù)面影響，例如圖像的複雜程度。繪圖指令越複雜，文件大小就越大。

高效SVG文件的建議

一般來(lái)說(shuō)，用於網(wǎng)頁(yè)的SVG非常簡(jiǎn)單，例如徽標(biāo)、地圖、圖標(biāo)等。與它們的光柵對(duì)應(yīng)物相比，此類簡(jiǎn)單的SVG圖像可能具有較小的文件大小。

但是，您可以採(cǎi)取一些步驟來(lái)進(jìn)一步優(yōu)化文件大小，並確保您的訪問(wèn)者在您的網(wǎng)站上獲得出色的體驗(yàn)。

以下是一些技巧：

從一開(kāi)始就在設(shè)計(jì)中融入性能

您可以自己編寫(xiě)簡(jiǎn)單的SVG圖形，也可以使用像Snap.svg這樣的JavaScript庫(kù)來(lái)繪製矢量圖形。通常，為了完成工作，您只需啟動(dòng)一個(gè)矢量圖形編輯器，例如Adobe Illustrator。

如果您使用圖形編輯器，那麼在設(shè)計(jì)階段考慮簡(jiǎn)化SVG代碼可以降低在以後優(yōu)化時(shí)破壞作品的風(fēng)險(xiǎn)。

您可以朝這個(gè)方向邁出的第一步是在您選擇的圖形編輯器中正確設(shè)置畫(huà)布大小。 Sarah Drasner建議將其設(shè)置為100 x 100像素，具體取決於您的項(xiàng)目。這確保畫(huà)布不會(huì)太小，從而產(chǎn)生大量小數(shù)位，您幾乎無(wú)法在後期減少這些小數(shù)位而不會(huì)弄亂圖形。另一方面，這個(gè)尺寸也不算太大。事實(shí)上，較大的畫(huà)布意味著相應(yīng)的路徑點(diǎn)數(shù)量較多。

接下來(lái)，減少路徑點(diǎn)的數(shù)量對(duì)於減少SVG文件的大小至關(guān)重要。這意味著盡可能使用形狀而不是路徑，但也將多個(gè)路徑組合成較少的路徑，除非您計(jì)劃單獨(dú)為它們製作動(dòng)畫(huà)。 Adobe Illustrator提供“簡(jiǎn)化”面板以進(jìn)一步減少路徑點(diǎn)。這是一個(gè)簡(jiǎn)短的視頻教程，用於說(shuō)明其用法。

以智能方式導(dǎo)出SVG

充分利用圖形編輯器的導(dǎo)出功能。如果不這樣做，可能會(huì)導(dǎo)致一些SVG代碼中充斥著您不需要的專有標(biāo)記和膨脹。

例如，如果您擁有最新版本的Adobe Illustrator（在撰寫(xiě)本文時(shí)為CC 2017），請(qǐng)使用“導(dǎo)出為”選項(xiàng)導(dǎo)出SVG圖形，然後選擇.svg文件類型：

Illustrator的面板提供了一些設(shè)置，可幫助您減小文件大小並輸出乾淨(jìng)、幾乎可用於網(wǎng)絡(luò)的標(biāo)記。您甚至可以通過(guò)單擊面板內(nèi)的“顯示代碼”按鈕來(lái)預(yù)覽代碼。

有關(guān)Illustrator中每個(gè)選項(xiàng)的詳細(xì)演練，Geoff Graham撰寫(xiě)的《從Adobe Illustrator獲取SVG的不同方法》是一篇很棒的文章。

使用SVG優(yōu)化工具壓縮更多字節(jié)

導(dǎo)出SVG圖形後，您仍然可以使用可用的出色SVG優(yōu)化工具進(jìn)一步縮小它。

SVGOMG（及其基於Web的GUI對(duì)應(yīng)版本）以及Peter Collingridge的SVG編輯器是最流行的工具。

查看Guillaume Cedric Marty撰寫(xiě)的《優(yōu)化SVG圖像》，了解有關(guān)如何使用SVGOMG的更多信息。

啟用Gzipped SVG文件的交付

SVG優(yōu)化待辦事項(xiàng)列表中的最後一步是在服務(wù)器上啟用gzip壓縮。 SVG只是XML標(biāo)記，因此它可以輕鬆進(jìn)行壓縮而不會(huì)出現(xiàn)任何問(wèn)題。

在文件縮減方面的好處是顯著的。 SVG 1.1規(guī)範(fàn)的附錄J顯示了未壓縮和壓縮SVG文件示例之間的比較表。結(jié)果壓倒性地有利於壓縮，文件大小減少了77-84%。

結(jié)論

SVG圖形是網(wǎng)頁(yè)的絕佳選擇。用於簡(jiǎn)單的圖標(biāo)、徽標(biāo)等時(shí)，通常比其光柵對(duì)應(yīng)物性能更好，尤其是在您採(cǎi)取本文中列出的少量預(yù)防措施時(shí)。

我上面提到的技巧絕非詳盡無(wú)遺。您可以進(jìn)一步提高效率。有關(guān)詳細(xì)的優(yōu)化技術(shù)，以下資源是必讀的：

• W3C SVG 1.1規(guī)範(fàn)
• 網(wǎng)頁(yè)上的SVG
• Sarah Drasner撰寫(xiě)的《高性能SVG》
• Sara Soueidan撰寫(xiě)的《優(yōu)化SVG在網(wǎng)頁(yè)上的交付的技巧》
• Andreas Larsen撰寫(xiě)的《優(yōu)化SVG》

您的SVG優(yōu)化工作流程是什麼？點(diǎn)擊評(píng)論框分享吧！

關(guān)於SVG和網(wǎng)站性能的常見(jiàn)問(wèn)題解答（FAQ）

使用SVG對(duì)網(wǎng)站性能有什麼好處？

可縮放矢量圖形（SVG）為網(wǎng)站性能提供了許多好處。首先，SVG與分辨率無(wú)關(guān)，這意味著無(wú)論屏幕大小或分辨率如何，它們都能保持其質(zhì)量。這對(duì)於響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)尤其有利。其次，與JPEG或PNG等其他圖像格式相比，SVG通常具有較小的文件大小，這可以顯著提高頁(yè)面加載速度。最後，SVG可以用CSS和JavaScript進(jìn)行動(dòng)畫(huà)處理和操作，從而提供更大的靈活性和交互性，而無(wú)需額外的HTTP請(qǐng)求。

SVG如何影響SEO？

SVG可以通過(guò)多種方式積極影響SEO。由於SVG文件較小，因此可以提高頁(yè)面加載速度，這是Google的排名因素。此外，與其他圖像格式不同，SVG可以被搜索引擎索引和抓取。這意味著您可以為SVG添加替代文本和其他元數(shù)據(jù)，從而進(jìn)一步增強(qiáng)您的SEO工作。

SVG可以用於復(fù)雜的圖形嗎？

是的，SVG非常適合複雜的圖形，例如徽標(biāo)、圖標(biāo)和插圖。與光柵圖像不同，SVG在放大或縮小後不會(huì)失真，因此非常適合需要以各種尺寸顯示的複雜設(shè)計(jì)。此外，SVG可以用CSS和JavaScript進(jìn)行樣式設(shè)置和動(dòng)畫(huà)處理，從而實(shí)現(xiàn)更複雜和交互式的設(shè)計(jì)。

使用SVG有什麼缺點(diǎn)嗎？

雖然SVG提供了許多好處，但也有一些潛在的缺點(diǎn)需要考慮。一些舊的瀏覽器可能不支持SVG，這可能會(huì)影響您的網(wǎng)站對(duì)某些用戶的顯示方式。此外，雖然SVG非常適合簡(jiǎn)單或中等複雜度的圖形，但對(duì)於高度詳細(xì)或照片類型的圖像，它們可能不是最佳選擇。

如何優(yōu)化SVG以獲得更好的性能？

有多種方法可以優(yōu)化SVG以獲得更好的性能。一種方法是縮小SVG代碼，這將刪除不必要的字符和空格，從而減小文件大小。您還可以使用gzip壓縮來(lái)進(jìn)一步減小文件大小。此外，考慮使用CSS和JavaScript來(lái)製作SVG動(dòng)畫(huà)或操作SVG，而不是嵌入多個(gè)SVG文件。

SVG可以提高移動(dòng)網(wǎng)站的性能嗎？

是的，SVG可以顯著提高移動(dòng)網(wǎng)站的性能。由於SVG與分辨率無(wú)關(guān)，因此它們可以在任何屏幕尺寸上保持其質(zhì)量，這使得它們非常適合響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。此外，它們較小的文件大小可以提高頁(yè)面加載速度，這對(duì)於可能具有較慢互聯(lián)網(wǎng)連接的移動(dòng)用戶尤其重要。

就性能而言，SVG與其他圖像格式相比如何？

SVG在性能方面通常優(yōu)於其他圖像格式。它們的文件大小較小，可以提高頁(yè)面加載速度。與在放大時(shí)可能會(huì)變得像素化的光柵圖像不同，它們?cè)谌魏纬叽缦露寄鼙３制滟|(zhì)量。但是，對(duì)於高度詳細(xì)或照片類型的圖像，JPEG或PNG等格式可能更合適。

我可以使用SVG製作動(dòng)畫(huà)嗎？

是的，可以使用CSS或JavaScript為SVG製作動(dòng)畫(huà)。這允許更具交互性和吸引力的設(shè)計(jì)，而無(wú)需額外的HTTP請(qǐng)求。但是，請(qǐng)記住，複雜的動(dòng)畫(huà)可能會(huì)增加文件大小並可能影響性能。

SVG是否易於訪問(wèn)？

是的，可以通過(guò)添加替代文本和其他元數(shù)據(jù)來(lái)使SVG易於訪問(wèn)。這允許屏幕閱讀器向視力障礙的用戶描述圖像，從而提高您網(wǎng)站的可訪問(wèn)性。

如何學(xué)習(xí)創(chuàng)建和使用SVG？

網(wǎng)上有很多資源可以學(xué)習(xí)SVG。 MDN Web文檔、CSS-Tricks和各種編碼訓(xùn)練營(yíng)等網(wǎng)站提供有關(guān)創(chuàng)建和使用SVG的教程和指南。此外，還有許多工具（如Adobe Illustrator和Inkscape）可以幫助您創(chuàng)建SVG圖形。

以上是使用SVG圖像適合您的網(wǎng)站的性能嗎？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！