最新的Web開發教程
 

SVG教程


SVG表示可縮放矢量圖形。

SVG定義XML格式基於矢量的圖形。


每章的例子

我們的“試一試”的主編,您可以編輯SVG,並點擊一個按鈕來查看結果。

SVG示例

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
試一試»

你應該已經知道了

在繼續之前,您應該具備以下的一些基本認識:

  • HTML
  • 基本的XML

如果你想先學習這些內容,請看我們的教程主頁


什麼是SVG?

  • SVG表示可縮放矢量圖形
  • SVG是用來定義基於矢量的圖形為Web
  • SVG定義XML格式的圖形
  • SVG圖形不丟失任何的質量,如果他們縮放或調整
  • 每一個元素和SVG文件每個屬性都可以是動畫
  • SVG是W3C推薦
  • SVG與其他W3C標準如DOM和XSL集成

SVG是W3C推薦

SVG 1.0成為了2001年9月4日W3C建議。

SVG 1.1 2003年1月成為了14 W3C建議。

SVG 1.1 (Second Edition)成為2011年8月16日W3C建議。


SVG優勢

使用的SVG比其他圖像格式(如JPEG和GIF)的優點是:

  • 可以創建SVG圖像,並用任何文本編輯器編輯
  • SVG圖像可以被搜索,索引,腳本,並壓縮
  • SVG圖像是可伸縮
  • SVG圖像可以與高品質在任何分辨率進行打印
  • SVG圖像縮放(and the image can be zoomed without degradation)
  • SVG是一種開放標準
  • SVG文件是純粹的XML

主要競爭對手為SVG是Flash。

最大的優勢SVG擁有Flash是與其他標準符合性(eg XSL and the DOM) 閃存依賴於專有技術,是不是開源。


創建SVG圖像

SVG圖像可以用任何文本編輯器創建,但它往往是更方便的繪圖程序中創建SVG圖像,比如Inkscape的