我們稱HTML5 SVG(Scalable Vector Graphics)為“被遺忘的圖像格式”是有它的歷史原因的。SVG一直以來都受到開發者的青睞和各種WEB社區的廣泛支持。從1999年開始，SVG已經開始被人們關注。但是因為瀏覽器的原因，它很少被人們正式使用，其中最大的禍首是IE瀏覽器。下面的圖片是使用SVG格式的圖片，你可以縮放瀏覽器來看看它的矢量圖效果：

現在，IE9瀏覽器和其他所有的現代瀏覽器都已經完全支持SVG了，包括它們的移動設備版本。

從SVG的縮寫可以看出，它是一種矢量格式。矢量圖形包含線條、描邊和填充顏色等元素。SVG也可以在文字上使用。

SVG的主要優點如下：

SVG圖形可無限放大縮小，不會因此而產生失真。

SVG使用XML創建，所以它是開源、可以自由使用的。你可以用像Notepad這樣的文本編輯器來創建SVG圖形。正因為如此，你可以在許多開源代碼和開源社區中找到SVG的身影。很多網站的logo和維基百科上的許多圖表都是使用SVG來制作的。

因為SVG是矢量的，所以文件大小往往非常小。(SVG文件甚至可以通過gzip來進一步壓縮)

作為一個XML文件，SVG可以被javascript和其它語言讀取和操作，所以它能被用來制作動畫、互動和其它效果(視頻遮罩、CSS路徑動畫等等)

你可以使用標簽來顯示一個SVG圖像。和支持SVG作為它們的背景圖像(通過CSS background images)。你甚至可以直接在頁面上使用標簽來創建矢量圖像。

當你使用文本編輯器打開一個SVG文件，可以看到類似下面的代碼：

上面的代碼看上去十分像XHTML開始的代碼。如果要手工書寫上面的SVG代碼中的點和線的坐標是一件非常困難的事情，正因為這個原因，所以一般都是使用一些矢量圖制作軟件先做好圖形，再將圖形導出成為SVG文件。可以參考：html5 svg線條動態繪制文字輪廓邊框動畫。

SVG 和 Canvas有什么不同？

是一個HTML5“畫板”，它可以直接被javascript操縱。能夠很好的繪制圖像，但是是它繪制的圖像都是位圖。如果你需要縮放一張繪制好的圖像，使用SVG是更好的選擇。某些技術(如WebGL)在輸出位圖時，需要的支持。

總結

以上是生活随笔為你收集整理的html5svg在线编辑器,HTML5 SVG简介的全部內容，希望文章能夠幫你解決所遇到的問題。

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