HTML5使用SVG的方法

这篇文章将为大家详细讲解有关HTML5使用SVG的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势:

<李>

SVG可被非常多的工具读取和修改(比如记事本)

<李>

SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。

<李>

SVG是可伸缩的

<李>

SVG图像可在任何的分辨率下被高质量地打印

<李>

SVG可在图像质量不下降的情况下被放大

<李>

SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

<李>

SVG可以与Java技术一起运行

<李>

SVG是开放的标准

<李>

SVG文件是纯粹的XML

<编辑>几个SVG图片小例子:

<编辑>我们来看一下第三个分享图标的代码: & lt; SVG xmlns=癶ttp://www.w3.org/2000/svg"宽度=?0”;身高=?0”;viewBox=? 0 20 20“比; 　　& lt;中风g=? AAB0BA"填补=皀one"fill-rule=癳venodd"比; 　　& lt;路径d=癕10.524 3.413 v8.235"stroke-linejoin=皉ound"/比; 　　& lt;路径d=癕13.027 7.508摄氏度。1.678 - 813 0。1.678 -.01.449 0 .812.376.812.826l - 01。005 6.36 a.819.819 0 0 1 0 0 1 -.811.826H6.31a.822.822 -.811 .826l.005 - 6.36 - c0 -.456.36 -.825.812 -.825l1.689.006M8.373 l2.143 5.111 - 2.09 2.143 - 2.07“/比; 　　& lt;/g> 　　& lt;/svg>

不了解SVG的同学现在一定一脸问号,就跟我第一次见他们一样,别着急,我们从基础看起。

什么是SVG ?

<强> SVG是一种基于XML语法的图像格式,全称是可缩放矢量图(可伸缩向量图形)。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。此外SVG是万维网联盟的标准,SVG与诸如DOM和XSL之类的W3C标准是一个整体。

怎么使用?

在HTML5中,您能够将SVG元素直接嵌入HTML页面中,例如上面的那颗小红心:

& lt; body> 　　http://www.w3.org/2000/svg" & lt; svg xmlns=?xmlns: xlink=癶ttp://www.w3.org/1999/xlink"宽度=?0”;身高=?0”;viewBox=? 0 20 20“比; 　　& lt; defs> 　　& lt;矩形id=癮"y=?4”;宽度=?0”;身高=?5”;rx=?“/比; 　　& lt;面具id=癰"x=?”;y=?”;宽度=?0”;身高=?5”;,填补=? fff"的在 　　https://www.yisu.com/zixun/& lt;使用xlink: href=" # "/> 　　面具 　　 　　 　　<使用中风=" # EDEEEF”面具=皍rl(# 2)”笔划宽度=?”xlink: href=" # "/> 　　他<路径d=" M19.05 62.797摄氏度-.208 - 1.776 - 2.188 - 3.629 - 1.725 .662.165 1.439.44 - 2.009 1.463 -2.18 3.913 4.965 8.983 5.615 9.433 v72l.023 -.016.023.016v -.032c.65 -。45 7.795 -5.52 5.615 -9.433 .57 - 1.023 - 1.347 - 1.298 - 2.009 - 1.463 - 1.853 .463 - 3.42 1.457 -3.629 1.725 z”填补="红色"/> 　　 　　 　　

<强> SVG代码也可以写在一个以.结尾的文件中,然后用<代码> & lt; img> ,<代码> & lt; object> ,<代码> & lt; embed> ,<代码> & lt; iframe> 等标签插入网页。

& lt; img src=https://www.yisu.com/zixun/" search.svg "> 　　<对象id="对象"="搜索数据。svg " type="形象/svg + xml”> 　　<嵌入id="嵌入" src="搜索。svg " type="形象/svg + xml”> 　　

<强> CSS也可以使用svg

。标志{ 　　背景:url (logo.svg); 　　}

<>强SVG文件还可以转为BASE64编码,然后作为数据URI写入网页。

& lt; img src=笆?图像/SVG + xml; BASE64,(数据)“在

<强> SVG的语法

<强> 1。& lt; svg>标签

SVG代码都放在顶层标签& lt; svg>之中。下面是一个例子。

& lt; SVG宽度=?00%”;身高=?00%“比; 　　& lt;圆id=癿ycircle"残雪=?0”;cy=?0”;r=?0”;/比; 　　& lt;/svg>

& lt; svg>的宽度属性和高度属性,指定了SVG图像在HTML元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG图像默认大小是300像素(宽)* 150像素(高)。

HTML5使用SVG的方法