SVG的優點
當你建立一個網站並向該網站添加圖像時，如果你必須確定的最重要的事情是哪一種文件格式是正確使用的文件格式。 根據圖形，一種格式可能比其他格式好得多。
許多網頁設計師都很喜歡JPG文件格式，這種格式非常適合深度較深的圖像，如照片。 雖然這種格式也適用於簡單的圖形，如圖示的圖標，但它並不是在該實例中使用的最佳格式。 對於這些圖標，SVG將是更好的選擇。 我們來看看究竟是為什麼：
SVG是矢量技術
這意味著它不是光柵技術。 矢量圖像是使用數學創建的線條的組合。 光柵文件使用像素或顏色的小方塊。 這是SVG可擴展和完美的響應式網站的一個原因，它必須隨著設備的屏幕尺寸一起擴展。 因為矢量圖形存在於數學世界中，所以要改變大小，只需更改數字即可。 在進行大小調整時，光柵文件通常需要進行重大修改。 當你想放大矢量圖像時，不會出現失真，因為系統是數學的，瀏覽器只是重新計算數學運算並將線條渲染為一如既往的平滑。 當您放大光柵圖像時，會失去圖像質量，並且在開始查看這些像素的顏色時，文件開始變得模糊。 數學擴展和契約，像素不。 如果你想讓你的圖片獨立解析，SVG會給你這個能力。
SVG是基於文本的
當您使用圖形編輯器生成圖像時，該程序會拍攝完成的圖稿。 SVG的工作方式不同。 您仍然可以使用一些軟件程序，並感覺您正在繪製圖片，但最終產品是矢量線或字的集合（它們實際上只是頁面上的矢量）。 搜索引擎會查看單詞，特別是關鍵字。 如果您上傳JPG ，您將自己限制為圖形的標題，也可能是替代文本短語。 借助SVG編碼，您可以擴展可能性並創建更適合搜索引擎的圖像。
SVG是XML並且以其他語言格式工作
這返回到基於文本的代碼。 你可以在SVG中製作你的基本圖像，並使用CSS來擦亮它。 是的，您可以擁有一個實際上是SVG文件的圖像，但您也可以將SVG直接編碼到頁面中並在將來進行編輯。 你可以用CSS改變它，就像你改變頁面文本一樣。這是非常強大的，它使得編輯變得簡單。
SVG很容易編輯
這可能是最大的優勢。 當你拍攝一個廣場的照片時，它就是這樣。 要進行更改，您必須重置場景並拍攝新照片。 在你知道它之前，你有40個正方形的圖像，但仍然沒有完全正確。 使用SVG，如果您犯了一個錯誤，請在文本編輯器中更改坐標或單詞，然後完成。 我可以涉及到這個，因為我畫了一個沒有正確定位的SVG圓 。 我所要做的就是調整坐標。
JPG圖像可能很重
如果你希望你的圖像在物理尺寸上增長，它的文件大小也會增加。 有了SVG，無論你做多大，一英鎊仍然是一磅。 2英寸寬的正方形的重量與100英寸寬的正方形的重量相同。 文件大小不會改變，從頁面性能的角度來看，這是非常好的！
那哪個更好？
那麼什麼是更好的格式 - SVG或JPG？ 這取決於圖像本身。 這就像問：“什麼更好，錘子還是螺絲刀？” 這取決於你需要完成什麼！ 這些圖像格式也是如此。 如果您需要顯示照片，那麼JPG是您的最佳選擇。 如果你添加一個圖標，那麼SVG可能是一個更好的選擇。 您可以在這裡了解更多關於何時適合使用SVG文件的信息 。
Jennifer Krynin的原創文章。 由Jeremy Girard於6/6/17編輯