一、HTML5 多媒體之<svg>標籤 使用

向量圖，可用作字型

什麼是SVG？

• SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
• SVG 用於定義用於網路的基於向量的圖形
• SVG 使用 XML 格式定義圖形
• SVG 影象在放大或改變尺寸的情況下其圖形質量不會有損失
• SVG 是全球資訊網聯盟的標準

SVG 的優勢

與其他影象格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：

• SVG 影象可通過文字編輯器來建立和修改
• SVG 影象可被搜尋、索引、指令碼化或壓縮
• SVG 是可伸縮的
• SVG 影象可在任何的解析度下被高質量地列印
• SVG 可在影象質量不下降的情況下被放大

瀏覽器支援

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援內聯 SVG。

1.引用svg檔案，和引用圖片一樣

    <!-- 引用svg檔案 -->
    <img src="../../img/images/circle.svg" alt="">

<svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
      <circle cx="200" cy="200" r="100"  stroke="#afeedd"
 

      stroke-width="5" fill="#f0ddff" />
</svg>

2.內聯svg內容

    <!-- 內聯svg -->
    <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
        <rect x="50" y="100" width="300" height="150"
            style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"
 
 />
    </svg>

更多：

HTML5 多媒體之<canvas>標籤 使用

HTML5 多媒體之<video>標籤 使用

HTML5 多媒體之<audio>標籤 使用