SVG以及它的使用方式

Elena0 2020-01-12

一:什么是svg?

SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图
 
科普:
计算机中有2种图形,一种是位图,一种是矢量图
传统的 jpg / png / gif图都是位图
位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px
位图的优点和缺点
优点:色彩丰富逼真
缺点:放大后会失真,体积大
 
矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
矢量图的缺点和优点
优点:方法后不会失真,体积小
缺点:不易制作色彩变化太多的图像
 
二:SVG常见的四种方式
1.内嵌到HTML中(直接在HTML中绘制)
2.通过浏览器直接打开SVG文件
    注意点:
    如果需要将svg保存到一个单独的文件中, 并且需要通过浏览器直接打开, 那么就必须给svg添加一个属性
    xmlns="http://www.w3.org/2000/svg"
3.在HTML的img标签中引用
4.作为css背景使用
 
 
 
 
 

相关推荐