代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
几个SVG图片小例子:
image
我们来看一下第三个分享图标的代码:
不了解SVG的同学现在一定一脸问号,就跟我第一次见他们一样,别着急,我们从基础看起。
什么是SVG?
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
怎么使用?
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心:
SVG 代码也可以写在一个以.svg结尾的文件中,然后用、、、等标签插入网页。
CSS也可以使用svg
.logo {
background: url(logo.svg);
}
SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。
SVG的语法
1. 标签
SVG 代码都放在顶层标签之中。下面是一个例子。
的width属性和height属性,指定了 S