如何在HTML5中使用SVG

在HTML5中我們可以透過使用標籤、

SVG是一種向量圖形格式，可以隨著Web頁面的大小變化重新繪製以適應其尺寸，不會出現任何失真的情況；十分適合在響應式Web設計中使用。這篇文章就給大家具體介紹在HTML5中如何使用SVG，希望對你們有幫助。 【相關影片教學推薦：HTML5教學】

使用HTML5

SVG是HTML 5草案規範的一部分，即

註：

1、要使用

2、這只能用於靜態SVG的導入。

下面是一個簡單的HTML5 SVG範例。

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

效果圖：

#使用標籤匯入SVG映像

##註：使用標籤只能用於靜態SVG影像的導入。

<img src="/static/imghwm/default1.png"  data-src="image.svg"  class="lazy"   src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />

效果圖：

#使用

<object type="image/svg+xml" data="image.svg">
    <img  src="/static/imghwm/default1.png"  data-src="image.svg"  class="lazy"   / alt="如何在HTML5中使用SVG" >
</object>

#使用標籤導入SVG映像

<embed type="image/svg+xml" src="image.svg" />

不怎麼建議使用標籤導入SVG圖像，它不是HTML規範的一部分，但在主要用於實現Flash插件的所有瀏覽器上得到廣泛支援。

使用

以上是如何在HTML5中使用SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！