最近用到了個(gè)SVG圖片，里面還是帶<image>標(biāo)簽的，想要把它嵌入到HTML中還是有些工作要做的。

經(jīng)歷

最初的圖片是這樣寫的：

<?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. 先拿百度的圖片來(lái)湊個(gè)數(shù)

顯示效果應(yīng)該是：

但是通過(guò)<img>標(biāo)簽插入到HTML中后卻變成了這樣：

W.T.F!

查了半天MDN，也沒(méi)有什么收獲。

最后在 StackOverflow 上找到了一個(gè)解決方案：即使用<embed>標(biāo)簽。

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

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

怎辦？又找了半天解決方案，發(fā)現(xiàn)這種情況應(yīng)該設(shè)置svg圖片的viewBox -- 在<svg>元素上增加viewBox="0 0 660 342"即可解決這個(gè)問(wèn)題：

viewBox屬性允許指定一個(gè)給定的一組圖形伸展以適應(yīng)特定的容器元素。
-- viewBox - MDN

完美！

總結(jié)HTML中嵌入SVG圖片的N種方式

在解決這個(gè)問(wèn)題的過(guò)程中，順便查了下，發(fā)現(xiàn)除了<img>和<embed>外還有幾種嵌入SVG圖片的方法。在此總結(jié)下：

0. 使用svg標(biāo)簽

即直接把svg整個(gè)標(biāo)簽內(nèi)容（除了開(kāi)頭的xml和doctype聲明外的svg文件內(nèi)容）都丟到 HTML 中即可。
可惜不適合本例 -- 我們這次的svg是外部的，不好放入HTML中。

1. 使用img標(biāo)簽

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

這個(gè)是最容易想到的 -- 因?yàn)閟vg圖片也是圖片嘛。
需要注意的是，svg里面帶的<image>標(biāo)簽將無(wú)法正常顯示。<img>標(biāo)簽適合顯示純矢量+文本的SVG圖片。

2. 使用iframe標(biāo)簽

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

萬(wàn)能的iframe當(dāng)然什么都能顯示，但是無(wú)法控制內(nèi)容大小 -- viewBox也搞不定，估計(jì)只能用百分比來(lái)定位了，太麻煩了，不建議使用。

3. 使用embed標(biāo)簽

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

注意使用viewBox，<embed>標(biāo)簽的兼容性也很不錯(cuò)的，是個(gè)不錯(cuò)的選擇。

4. 使用object標(biāo)簽

<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圖片是可以作為背景圖片的。不過(guò)和<img>標(biāo)簽一樣，無(wú)法顯示SVG內(nèi)嵌的<image>.

6. 使用picture標(biāo)簽

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

<picture>標(biāo)簽是HTML5新增的一個(gè)專門顯示圖片的標(biāo)簽。

注意設(shè)置<source>標(biāo)簽的屬性srcset而非src. 此外必需要添加一個(gè)<img>標(biāo)簽，不過(guò)可以在<img>標(biāo)簽中指定另外一張圖片，以便在瀏覽器無(wú)法顯示<source>指定的圖片的時(shí)候顯示<img>標(biāo)簽中的圖片。

<picture>和<img>一樣，無(wú)法顯示SVG內(nèi)嵌的<image>.

附完整帶測(cè)試代碼:

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

源代碼：https://github.com/clarencep/...