[SVG] 10. svg 格式如何放入網頁之中

你可以是使用類似 sketch 軟體來匯出 svg 檔案,或是直接撰寫 svg 格式的原始碼,那麼該如何放入網頁之中呢?我們就來看看有哪些方式吧。

使用 HTML 中的 img 標籤來載入

假設你有一個檔案是「your_svg_icon.svg」,可以直接使用 img 標籤,直接載入,如下語法:

<img src="your_svg_icon.svg" alt="#" title="#">

使用 CSS 的 background-image 來載入

假設你有一個檔案是「your_svg_icon.svg」,那麼可以利用 CSS ,放入 CSS的各式語法當中,這裡舉的例子是放入 background-image 之中,如下語法:

<div class="svg-background"></div>
<style>
.svg-background {
  background-image: url("your_svg_icon.svg");
  width: 100px;
  height: 100px;
}
</style>

在 HTML 當中,直接使用 inline 方式

你也有可能是直接撰寫 svg 原始碼的方式,那麼也可以直接寫在 HTML 當中,如下方式:

<svg width="300" height="200" viewBox="0 0 300 200"
    version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="5,5, 50,5, 50,100" />
  <polygon points="100,5, 150,5, 150,100" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

透過 object、iframe、embed 標籤來載入

雖說如此,但這個方式在實務上較少用,請參考就好,如下語法:

<object data="your_svg_icon.svg" type="image/svg+xml"></object>
<iframe src="your_svg_icon.svg" frameborder="0"></iframe>
<embed src="your_svg_icon.svg" type="" />

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of