在普通人眼中， SVG（Scalable Vector Graphics,可伸縮矢量圖）可能最多就是在某些網站偶爾看到而已，最多只是知道這是某種圖片格式，并不會對這種格式產生任何多余的想法。但是對于網頁設計師來說，svg圖片在很大程度上為他們的工作提供了相比其他格式圖片的絕對性便利。所以，svg的哪些特性吸引了我們呢？今天的文章主要就是為大家講一下，svg最吸引我們的特性。

伸縮自如 依舊清晰
與其他圖片格式不同，SVG格式的圖片是一種矢量圖形，用矢量點和路徑來定義圖片，并不是傳統的像素點的疊加。它所擁有的優勢是它不會因為圖片的伸縮而改變圖片的清晰度，因為這一整張圖片都是以相對點來儲存數據的。它所記錄的是圖片上每個點的相對位置，而不是一個個的擁有rgb顏色的點，無論放大或縮小，它的顯示效果是一樣的。
我們可以看一下位圖與svg圖片同樣放大時的顯示效果，位圖的圖像有明顯的顆粒感。

位圖放大效果

svg圖放大效果

圖片更小 響應更快
如上文所講的一樣，因為矢量圖是使用相對點來保存數據的，而位圖則是無數個像素點組成，越大越清晰的位圖所占用的數據大小就會越大，而svg的圖片則不會有這種結果。所以，相比于同尺寸的JPG、JPEG、PNG等傳統格式，svg格式的圖片的文件大小會更小，因而擁有更快的響應速度。
一個網頁的響應速度肯定是網頁設計的重要考量因素之一，為了給用戶更好的體驗，svg圖片的選擇便成了我們的首選。
更高的可編輯性
因為svg圖片是基于XML語言編輯而成的，天生擁有更貼合HTML的屬性，可以自由的在HTML、CSS中引用。
當我們打開SVG圖片時，你看到的是一行行更具閱讀性的代碼，你可以清晰地了解圖片的構成，而不是位圖的一大堆看不懂的亂碼。
下面是上圖星星圖片的代碼

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --><title>Star 1</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon></g> </svg>

同時，由于XML的屬性，SVG圖片上顯示的文字是可以選取、復制的，不像位圖一樣僅僅是一張圖，不具備在線編輯的可能。
而且，你可以通過CSS、JavaScript來為SVG圖片設計動畫，這是位圖所無法實現的功能。只需幾行代碼，就可以為你的SVG圖片添加你想要的動畫效果，這在很多的頁面設計中可以看到，能夠為用戶提供更好的交互體驗。

總結

以上是生活随笔為你收集整理的网页设计师为什么要用SVG图片？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。