svg图标 在html中使用,SVG——在网页中使用SVG

SVG可以作为一个独立的文件存在。但更多的时候,我们希望他能集成在某个更大的文档中,比如HTML。

将SVG插入到HTML中主要有以下3种方式:

将SVG文件作为图片

将SVG作为应用程序

混合文档

将SVG文件作为图片

tag

SVG本身作为一种图像格式,和其他图像一样通过指定tag的src属性即可。并且可以通过css指定图像的尺寸和位置。

对于SVG图像来说,如果不指定图像()的尺寸,会按照以下情况进行显示:

SVG本身指定了明确的height和width,则他们作为图像的尺寸进行显示

SVG本身只指定了height或者width中的一个,如果SVG带有viewBox属性,则会根据viewBox计算宽高比,缩放后进行显示

SVG本身没有指定height或者width,如果SVG带有viewBox属性,则viewBox的height和width将被作为图像的尺寸进行显示

如果SVG既没有指定height或width,且没有viewBox,则浏览器采用默认尺寸进行显示

css属性

和普通图片一样,SVG也可以作为background-image的属性的值进行显示。

background-image: url("image.svg");

不足

SVG作为图像引用时,

大多数浏览器不会加载SVG自身引用的文件(其他图像,外部脚本,字体文件等)

依据浏览器的安全策略,SVG中定义的脚本也可能不会执行

将SVG作为应用程序

SVG文件也可以作为元素的data属性引入HTML中。

注意,MIME type必须是image/svg+xml。

...

作为应用程序对象引入的SVG文件尺寸和作为引入时类似,并且不会继承定义在父文档中的任何样式。

但是,与不同的是,此方式可是包含外部文件,且脚本可以在object和父文档之间进行通信。

混合文档

可以直接将嵌入到XHTML或者HTML5文档中。

嵌入到XHTML需要为指定命名空间(xmlns),嵌入到HTML5则可以省略,解析器会自动识别tag。

...

直接嵌入的SVG会继承父文档的样式,默认情况下采用inline的方式进行显示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值