svg01——svg简介及简单使用

一、SVG 意为可缩放矢量图形（Scalable Vector Graphics）

svg是使用XML描述的矢量文件。

矢量图与位图有什么区别呢？

• 位图是基于像素点对颜色的描述，所以在放大之后会模糊
• 矢量图是基于数学的描述，比如圆形，怎么放大都是个圆

二、使用svg的方式

• img引入
• css背景使用
• 直接在html中引入
• 直接在浏览器打开

直接上代码：

1、首先准备一个 rect.svg 的文件

2、在 test.html 中

.rect {
    width: 200px;
    height: 200px;
    background-image: url('./rect.svg');
}

直接在浏览器打开的效果：