svg标签是什么(svg标签的写法详解)

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

svg标签是什么(svg标签的写法详解)插图1

SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。

SVG 代码直接插入网页的例子。

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

SVG 代码也可以写在一个独立文件中,然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS 也可以使用 SVG 文件。

.logo {
  background: url(icon.svg);
}

SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。

<img src="data:image/svg+xml;base64,[data]">

SVG是基于XML,由W3C制定的一种二维矢量图形格式,任意缩放不失真,因为文件小,下载比jpg和png快,文本独立,即便用户没有下载该文字,也不影响效果,超强边缘显示,适用各种屏幕分辨率和打印分辨率,超强颜色控制,提供有一个1600万种颜色的调色板,支持IE9、Firefox、opera、chrome、Safari。低版本需要插件。

例如:直线、曲线等等。或者只要你想,你也可以在矢量图形编辑程序中创建这些直线、曲线,然后让程序导出代码。

为什么要选择SVG?主要有这几方面的原因:

  • SVG 是可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。
  • 相比其它位图,SVG图像文件更小,可压缩性更强。
  • SVG 可以被记事本等阅读器、搜索引擎访问。
  • SVG 图像中的文本是可选的,同时也是可复制的。
  • SVG 图像可以与DOM,CSS和JavaScript交互。
  • SVG 可以制作成整体或局部动画。
svg标签是什么(svg标签的写法详解)插图3

SVG 与 Flash 类似,都是用于二维矢量图形,二者的区别在于,SVG 是一个 W3C 标准,基于 XML,是开放的。因为是 W3C 标准,SVG 与其他的 W3C 标准,比如 CSS、DOM 和 SMIL 等能够协同工作。

svg标签是什么(svg标签的写法详解)插图5

SVG是W3C XML的分支语言之一,用于标记可缩放的矢量图形。即便浏览器实现了一些规范,但实现速度完全不能和它的竞争技术相比,它的竞争技术比如说HTML Canvas和Adobe Flash,都已经实现了成熟的应用接口。但是SVG也有自身的优点,比如它实现了DOM接口(比Canvas方便),不需要安装第三方插件就可以在浏览器中使用(比Flash方便)。当然,是否使用SVG还要取决于你要实现什么。

版权声明:本站部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除文图,联系微信: 如若转载,请注明出处:https://www.zhejianghao.com/10006.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年11月14日 14:58:12
下一篇 2022年11月14日 15:09:17

相关推荐

  • 玩家必看教程“微乐麻将小程序怎样赢”!详细开挂教程-知乎

    本篇文章给大家谈谈怎样看出手机玩家必看教程“三哥玩摆头注免费开挂”!详细开挂教程-知乎打牌开挂没,以及手机麻将怎么看出来是开挂对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 1.打开手机桌面微信APP,进入微信主页。2.下拉微信主页,找到四川麻将小程序。注意:没有小程序利用的,可在上方搜索小程序。3.点击进入四川麻将小程序,选择右上角商城,点击打开。…

    2023年12月31日
    60
  • 给玩家盘点十款“手机斗牛万能开挂神器”!详细开挂教程-知乎

    本篇文章给大家谈谈怎样看出手机打牌开挂没,以及手机麻将怎么看出来是开挂对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 1.打开手机桌面微信APP,进入微信主页。2.我来教教大家“微乐麻将挂先试用后付款”!详细开挂教程-知乎下拉微信主页,找到四川麻将小程序。注意:没有小程序利用的,可在上方搜索小程序。3.点击进入四川麻将小程序,选择右上角商城,点击打开…

    2023年12月30日
    110
  • 玩家必备教程“越乡游十三水透视开挂”!详细开挂教程-知乎

    您好:胡乐麻将开挂这款游戏是可以开挂的,软件加微信【添加图中微信】确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户的牌特别好,总是好牌,而且好像能看到其他人的牌一样。所以很多小伙伴就怀疑这款游戏是不是有挂,实际上这款游戏确实是有挂的,添加客服微信【添加图中微信】安装软件.  玩家必备十款“微乐江西麻将小程序必赢神器免费”!详细开挂教…

    2023年12月24日
    140
  • 我来教下各位“海商互娱麻将开挂是真的吗!专业师傅带你一起了解(详细教程)-知乎

    您好:哈灵麻将必赢方法这款游戏可以开挂,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户的牌特别好,总是好牌,而且好像能看到-人的牌一样。所以很多小伙伴就怀疑这款游戏是不是有挂,实际上这款游戏确实是有挂的     确实有挂 有挂吗 如何开挂 怎么开挂 有没有挂 是不是有挂 …

    2023年12月27日
    30
  • 玩家必看教程“小甘麻将开挂下载”!详细开挂教程-知乎

    无需打开直接搜索微信:本司针对手游进行,选择我们的四大理由:1、软件助手是一款功能更加强大的软件!无需打开直接搜索微信:2、自动连接,用户只要开启软件,就会全程后台自动连接程序,无需用户时时盯着软件。3、安全保障,使用这款软件的用户可以非常安心,绝对没有被封的危险存在。4、快速稳定,使用这款软件的用户肯定是土豪。安卓定制版,苹果定制版,一年不闪退 1、起手好…

    2023年12月31日
    30
  • 玩家必看教程“微乐甘肃麻将开挂神器”!详细开挂教程-知乎

    您好:胡乐麻将开挂这款游戏是可以开挂的,软件加微信【添加图中微信】确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户的牌特别好,总是好牌,而且好像能看到其他人的牌一样。所以很多小伙伴就怀疑这款游戏是不是有挂,实际上这款游戏确实是有挂的,添加客服微信【添加图中微信玩家必备十款“泸乐麻将外卦神器下载软件”!详细开挂教程-知乎】安装软件. &nbsp…

    2023年12月31日
    40
  • 玩家必备十款玩呗麻将有规律吗”!详细开挂教程(确实真的有挂)-知乎

    您好:玩呗麻将有规律吗这款游戏可以开挂的,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户的牌特别好,总是好牌,而且好像能看到-人的牌一样。所以很多小伙伴就怀疑这款游戏是不是有挂,实际上这款游戏确实是有挂的,添加客服微信【【变量1】安装软件。  您好!欢迎拜访本公司网站,咱们公司是专业研制及出售全国各地辅助软件 系列详细:hhpoker-pt…

    IT百科 2023年12月25日
    50
  • 玩家必备十款微乐捉鸡麻将别人怎么老赢!详细开挂教程(确实真的有挂)-知乎

    游戏开挂神器用起来十分的方便,玩家具有了它,在牌局中取胜的概率将大大增强,并且它的安装包适当的小,也不会造成你游戏的卡顿,玩家上线之后进行相应的设置就能够让它协助你一同赢得牌局的成功了,平台上的功能还在不断更新和完善,保证玩家能够体会到最新的内容,玩家打开软件之后,它还会指导你怎么的使用,十分的方便,快来下载安装麻将开挂神器吧。 现在人们打棋牌麻将谁不想赢?…

    IT百科 2023年12月27日
    30
  • 玩家必备教程“微乐湖南麻将有没有挂”!详细开挂教程-知乎

    您好:哈灵麻将必赢方法这款游戏可以开挂,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户的牌特别好,总是好牌,而且好像能看到-人的牌一样。所以很多小伙伴就怀疑这款游戏是不是有挂,实际上这款游戏确实是有挂的     确实有挂 有挂吗 如何开挂 玩家必看攻略“微乐陕西麻将万能开挂器”!详细开挂教程-知乎怎么…

    2023年12月27日
    70
  • 我来教教大家悠闲红中麻将辅助开挂器助手”!详细开挂教程(确实真的有挂)-知乎

    游戏开挂神器用起来十分的方便,玩家具有了它,在牌局中取胜的概率将大大增强,并且它的安装包适当的小,也不会造成你游戏的卡顿,玩家上线之后进行相应的设置就能够让它协助你一同赢得牌局的成功了,平台上的功能还在不断更新和完善,保证玩家能够体会到最新的内容,玩家打开软件之后,它还会指导你怎么的使用,十分的方便,快来下载安装麻将开挂神器吧。 现在人们打棋牌麻将谁不想赢?…

    IT百科 2023年12月28日
    80

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信