HTML中嵌入SVG图片的N种方式

最近用到了个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...,转载请注明出处


北月武馆
这里有一些技术方面干货分享和一些感想,欢迎光临与交流。

我就是我,不一样的风采~

4.9k 声望
94 粉丝
0 条评论
推荐阅读
多边形文本区域自动换行,自动裁剪,沿着多边形来排版
先来看个正六边形的效果: 对应的HTML是: {代码...} 对应的css是: {代码...} 本文首发地址:[链接] 转载请注明出处

牧毅阅读 1.4k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.6k评论 1

封面图
23个css动画效果,持续更新中...
代码github仓库:[链接]使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难,只是有时候我们可能想不到笔者空闲时间,会继续更新的哦,点赞关注...

水冗水孚9阅读 1.3k

封面图
CSS 如何实现羽化效果?
欢迎关注我的公众号:前端侦探最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊...

XboxYan10阅读 2.7k评论 3

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖9阅读 2k

封面图
CSS & SVG 绘制写作网格线的3种方式
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面...

XboxYan7阅读 1.3k

封面图

我就是我,不一样的风采~

4.9k 声望
94 粉丝
宣传栏