使用可縮放矢量圖形的好處
可縮放矢量圖形或SVG在當今的網站設計中發揮著重要作用。 如果您目前沒有在您的網頁設計工作中使用SVG，那麼您應該開始這樣做的原因以及可以用於不支持這些文件的舊瀏覽器的回退。
解析度
SVG最大的好處是獨立於分辨率。 由於SVG文件是矢量圖形而不是基於像素的光柵圖像，因此可以調整大小而不會丟失任何圖像質量。 當您創建響應式網站時，此功能尤其有用，因為這些網站需要在各種屏幕尺寸和設備上看起來很好，並能夠很好地工作 。
SVG文件可以放大或縮小，以適應響應式網站不斷變化的大小和佈局需求，而且您無需擔心這些圖形質量受到影響。
文件大小
在響應式網站上使用光柵圖像（JPG，PNG，GIF）的挑戰之一是這些圖像的文件大小。 由於柵格圖像不會按照矢量圖像的方式進行縮放，因此您需要以最大尺寸顯示基於像素的圖像。 這是因為您可以始終使圖像變小並保持其質量，但對於增大圖像的效果並非如此。 最終的結果是，您經常擁有的圖像比在人物屏幕上顯示的圖像大得多，這意味著他們無需被迫下載一個非常大的文件。
SVG解決了這個挑戰。 由於矢量圖形是可縮放的，因此無論需要顯示多大的圖像，您都可以擁有非常小的文件大小。 這最終將對網站的整體性能和下載速度產生積極影響。
CSS樣式
SVG代碼也可以直接添加到頁面的HTML中。 這就是所謂的“內聯SVG”。使用內聯SVG的好處之一是，由於圖形實際上是由瀏覽器根據您的代碼繪製的，因此不需要發出HTTP請求來獲取圖像文件。 另一個好處是內聯SVG可以用CSS進行樣式化。
需要更改SVG圖標的顏色？ 不需要在某種編輯軟件中打開該圖像並再次導出和上傳文件，只需使用幾行CSS即可更改SVG文件。
您還可以在SVG圖形上使用其他CSS樣式來改變懸停狀態或某些設計需求。 你甚至可以動畫這些圖形來為頁面添加一些移動和交互性。
動畫
由於內聯SVG文件可以使用CSS進行樣式化，因此您也可以使用CSS動畫。 CSS轉換和轉換是向SVG文件添加一些生命的兩種簡單方法。 您可以在頁面上獲得類似Flash的豐富體驗，而不會屈服於今天在網站上使用Flash的缺點 。
SVG的用途
像SVG一樣強大，這些圖形無法取代您在網站上使用的所有其他圖像格式。 需要深色深度的照片仍然需要是JPG或PNG文件，但像圖標這樣的簡單圖像非常適合作為SVG執行。
SVG也適用於更複雜的插圖，如公司徽標或圖表和圖表。 所有圖形都將受益於可擴展性，能夠使用CSS進行樣式設計，以及本文中列出的其他優點。
支持較舊的瀏覽器
目前對SVG的支持在現代Web瀏覽器中非常出色。 唯一真正缺乏對這些圖形支持的瀏覽器是舊版本的Internet Explorer（版本8及以下版本）和一些舊版本的Android。 總而言之，只有很少一部分瀏覽人口仍然使用這些瀏覽器，而且這個數字還在繼續縮小。 這意味著SVG可以在今天的網站上相當安全地使用。
如果您確實想為SVG提供回退功能，則可以使用Filament Group中的類似Grumpicon的工具。 該資源將為您的SVG圖像文件創建舊版瀏覽器的PNG回退。
由Jeremy Girard於17年1月27日編輯