SVG - 建立SVG圖片

HTML5學堂：之前在繪圖中使用到了SVG以及Canvas，因此決定最近將繪圖類的知識和大家分享一下。從研究角度來說，SVG比Canvas要難很多。沒有合適的中文文件，自己只能去翻譯英文文件（唉，英語不好啊）。今天先來說說SVG的基本知識以及建立SVG的基本方法。

SVG是什麼

W3C推薦的網頁圖形格式，類似於Flash，SVG是一種描述二維向量圖形的標記語言，但它是一種開發的以XML為基礎的語言，不是一種私有語言。

SVG的支援程度

IE8-以及Android 2.3預設瀏覽器是不支援SVG的

對SVG的基本理解

可以把SVG想象成類似於HTML的圖形，可以與其他瀏覽器技術，如JavaScript、CSS、DOM無縫集合

為何使用SVG-SVG的優勢

1、開發者可以使用任何簡單的文字/網頁編譯器進行建立和修改。不需要Flash、PhotoShop、Paint等軟體。

2、與畫素無關，可以放大或者縮小，甚至列印成任意大小，圖片質量不會改變。

建立SVG圖片

方法1：使用外部引入SVG的方式

SVG是一個以.svg結尾的文字格式的檔案，可以將這個檔案以普通圖片的方式嵌入到DOM當中。

<object data="XXX.svg" type="image/svg+xml" />

SVG檔案的編輯

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
 

SVG - 示例demo

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
    <circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
    <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</svg>
 

方法2 在HTML中直接使用SVG

SVG - 示例demo

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</g>
</svg>