SVG程式碼構成簡單介紹

admin發表於2018-09-02
SVG
首先要知道，SVG程式碼其實就是標準的XML程式碼。

我們既可以將程式碼單獨寫入一個SVG檔案（.svg格式檔案），也可以直接內嵌在HTML程式碼之中。

一.SVG檔案的結構:

svg檔案是以.svg為字尾的檔案，下面逐步介紹一下它的結構。

（1）.首先要有一個XML宣告:

這非常好理解，可以類比我們使用頻繁的HTML。 

[HTML] 純文字檢視 複製程式碼
<!doctype html>

上面是HTML5的頭部DTD宣告；XML的宣告與之非常類似，程式碼如下: 

[XML] 純文字檢視 複製程式碼
<?xml version="1.0"?>

（2）.描述SVG的XML名稱空間:

名稱空間是通過xmlns屬性規定的；這個也可以在HTML中找到對應的部分，如下: 

[HTML] 純文字檢視 複製程式碼
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XML名稱空間的宣告如下: 

[XML] 純文字檢視 複製程式碼
<svg xmlns="http://www.w3.org/2000/svg">

（3）.程式碼演示: 

[XML] 純文字檢視 複製程式碼
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="300">
  <!--code -->
</svg>

如果一個SVG檔案包含內部連結，那麼xmlns:xlink="http://www.w3.org/1999/xlink"不可省略，否則可以省略。

二.嵌入HTML的SVG:

SVG不但可以單獨形成一個檔案，也可以直接嵌入到HTML程式碼之中。

程式碼例項如下: 

[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>

上面的程式碼就演示了直接在HTML中巢狀的SVG程式碼，不過有兩點需要注意:

（1）.XML宣告不再需要。

（2）.由於對SVG支援的問題，HTML的DTD應該採用HTML5的方式。

相關文章