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

svg是应用XML形容的矢量文件。

矢量图与位图有什么区别呢？
  • 位图是基于像素点对色彩的形容，所以在放大之后会含糊
  • 矢量图是基于数学的形容，比方圆形，怎么放大都是个圆

二、应用svg的形式

  • img引入
  • css背景应用
  • 间接在html中引入
  • 间接在浏览器关上
间接上代码：

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

<!-- xmlns 是 svg 的命名空间 --><svg xmlns="http://www.w3.org/2000/svg" version="1.1">    <!-- 矩形标签及属性，在下一篇文章中有具体介绍 -->    <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" /></svg>

2、在 test.html 中

<!-- 1、img引入 --><img src="./rect.svg" alt=""><!-- 2、背景应用（款式在上面css中有定义） --><div class="rect"></div><!-- 3、间接在html中应用 --><div>    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />    </svg></div><!-- 4、间接在浏览器中关上svg文件（那就间接关上下面的rect.svg咯）  -->
.rect {    width: 200px;    height: 200px;    background-image: url('./rect.svg');}

间接在浏览器关上的成果：