前端SVG样式颜色等开发注意事项

这篇文章主要介绍了前端SVG样式颜色等开发注意事项,需要的朋友可以参考下

SVG

Scalable Vector Graphics 可缩放的矢量图形

起源

在 2003 年一月,SVG 1.1 被确立为 W3C 标准,在过去很长一段时间,网页注重文字和图片的展示,
SVG就被遗忘了,随着网页对图形的要求越来越高,SVG又出现在人们的视野中。

关注点

可以从SVG这个名字就能瞄到我们第一个关注点在哪里,没错,就是可缩放的矢量图形,这个还是得从位图和矢量图说起,可以直白来说,位图缩放容易模糊,而矢量图一般不会,因为矢量图记录了位置信息,每次按照大小重新计算图形,而位图只能对像素粗暴的缩放,就会导致我们常见的图片模糊。

SVG不会模糊?

NONONO,由于是矢量图,是人去编写的,所以矢量图质量决定了其缩放效果,具体因素待确定

其余优点

1.支持多色图标

2.可以使用CSS实现动画,不需要再使用gif

4.本身就是DOM规范的一部分,可以像普通DOM一样修改颜色,交互性非常强

提一下权重

SVG有些属性属于DOM属性比如说fill,也可以作为CSS属性,生效的效果是一样的

 or