SVG簡單介紹

admin發表於2019-08-06
SVG
隨著時間的推移，瀏覽器的升級，SVG的應用會越來越廣泛，因為它具有諸多優點。

下面就對SVG進行一下簡單介紹，在隨後的章節會逐步講解SVG的基本操作。

一.SVG是什麼:

SVG是英文“Scalable Vector Graphics”的簡稱，翻譯成中文是“可縮放向量圖形”。

它是基於可擴充套件標記語言（XML）（標準通用標記語言的子集），用於描述二維向量圖形的一種圖形格式。

它由全球資訊網聯盟制定，是一個開放標準。

二.SVG主要特點:

（1）.SVG是可伸縮向量圖形。

（2）.SVG用來定義用於網路的基於向量的圖形。

（3）.SVG使用XML格式定義圖形。

（4）.SVG影像在放大或縮小（改變尺寸）的情況下，其圖形質量不會受受損失。

（5）.SVG是W3C的一個標準。

三.SVG主要優勢:

（1）.SVG可被眾多工具讀取和修改（比如記事本）。

（2）.SVG與JPEG和GIF影像比起來，尺寸更小，且可壓縮性更強。

（3）.SVG是可伸縮的。

（4）.SVG影像可在任何的解析度下被高質量地列印。

（5）.SVG可在影像質量不下降的情況下被放大。

（6）.SVG影像中的文字是可選的，同時也是可搜尋的（很適合製作地圖）。

（7）.SVG可以與Java技術一起執行。

（8）.SVG是開放的標準。

（9）.SVG檔案是純粹的XML。

四.程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
          cx="100" cy="50"
          r="40"
          stroke="black"
          stroke-width="5"
          fill="green" />
</svg>
</body>
</html>

上面是一個極其簡單的SVG程式碼例項，目的是對SVG有一個初步直觀的感受。

相關文章