SVG以及它的使用方式

Posted 2021-03-16 gsq1998

一：什么是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背景使用