HTML中嵌入SVG圖片的N種方式

https://segmentfault.com/a/1190000010942431

最近用到了個SVG圖片，裡面還是帶<image>標籤的，想要把它嵌入到HTML中還是有些工作要做的。

經歷

最初的圖片是這樣寫的：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     preserveAspectRatio="xMinYMin meet"
     width="660" height="342"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <image xlink:href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="660" height="342"/>

    <rect x="2" y="284" width="656" height="58" fill="rgba(0,0,0,0.6)" stroke-width="1" ></rect>

    <text text-anchor="start"
          font-family="Microsoft Yahei, sans-serif" font-size="28"
          x="20" y="322" fill="#fff">這是百度</text>
    <text text-anchor="end"
          font-family="Microsoft Yahei, sans-serif" font-size="28"
          x="640" y="322" fill="#fff">?</text>
</svg>

p.s. 先拿百度的圖片來湊個數

顯示效果應該是：

但是通過<img>標籤插入到HTML中後卻變成了這樣：

W.T.F!

查了半天MDN，也沒有什麼收穫。

最後在 StackOverflow 上找到了一個解決方案：即使用<embed>標籤。

修改成<embed src="./test.svg" style="display:block;width:330px;height:240px" />後卻顯示成了：

只顯示了圖片左上角那部分有木有！這張圖片是按2倍圖做的，應該要縮小一半，雖然給<embed>的元素加了寬高，但是卻沒能把svg內容給縮放！

怎辦？又找了半天解決方案，發現這種情況應該設定svg圖片的viewBox -- 在<svg>元素上增加viewBox="0 0 660 342"即可解決這個問題：

viewBox屬性允許指定一個給定的一組圖形伸展以適應特定的容器元素。
-- viewBox - MDN

完美！

總結HTML中嵌入SVG圖片的N種方式

在解決這個問題的過程中，順便查了下，發現除了<img>和<embed>外還有幾種嵌入SVG圖片的方法。在此總結下：

0. 使用svg標籤

即直接把svg整個標籤內容（除了開頭的xml和doctype宣告外的svg檔案內容）都丟到 HTML 中即可。
可惜不適合本例 -- 我們這次的svg是外部的，不好放入HTML中。

1. 使用img標籤

<img src="./test.svg" style="display:block;width:330px;height:240px" />

這個是最容易想到的 -- 因為svg圖片也是圖片嘛。
需要注意的是，svg裡面帶的<image>標籤將無法正常顯示。<img>標籤適合顯示純向量+文字的SVG圖片。

2. 使用iframe標籤

<iframe src="./test.svg" style="display:block;width:330px;height:240px;border:none;" ></iframe>

萬能的iframe當然什麼都能顯示，但是無法控制內容大小 -- viewBox也搞不定，估計只能用百分比來定位了，太麻煩了，不建議使用。

3. 使用embed標籤

<embed src="./test.svg" style="display:block;width:330px;height:240px" />

注意使用viewBox，<embed>標籤的相容性也很不錯的，是個不錯的選擇。

4. 使用object標籤

<object type="image/svg+xml" data="./test.svg" style="display:block;width:330px;height:240px" >
    <param name="src" value="./test.svg" >
</object>

<object>與<embed>類似，也要注意配置viewBox.

5. 使用div的背景圖片

<div style="display:block;width:330px;height:240px;background: url(./test.svg) no-repeat;background-size: 100%;" ></div>

svg圖片是可以作為背景圖片的。不過和<img>標籤一樣，無法顯示SVG內嵌的<image>.

6. 使用picture標籤

<picture >
    <source srcset="./test.svg"  type="image/svg+xml">
    <img src="./test.png" style="display:block;width:330px;height:240px">
</picture>

<picture>標籤是HTML5新增的一個專門顯示圖片的標籤。

注意設定<source>標籤的屬性srcset而非src. 此外必需要新增一個<img>標籤，不過可以在<img>標籤中指定另外一張圖片，以便在瀏覽器無法顯示<source>指定的圖片的時候顯示<img>標籤中的圖片。

<picture>和<img>一樣，無法顯示SVG內嵌的<image>.

附完整帶測試程式碼:

效果展示：https://clarencep.github.io/f...

原始碼：https://github.com/clarencep/...

首發地址：https://www.clarencep.com/201...，轉載請註明出處