当前位置：首页 > news >正文

不一样的CSS(4)--icon图标系列之svg

news 来源：原创 2025/5/14 6:06:19

序言

上一节内容我们讲解了如何利用css去画一个五角星，其中包括了使用svg的方法，有些小伙伴们对svg的使用不是很了解，那么本节内容我们主要来讲一下，关于svg标签的的使用。

序言
一、svg的介绍
二、安装SVG扩展插件
三、SVG基础知识
四、SVG在HTML中的导入方式
- 1.img导入
- 2.使用 object 标签
- 3.iframe标签导入
- 4.将svg直接写在html当中
五、rect矩型
- 1.rect的属性
- 2.rect的使用
六、circle圆
- 1.circle的属性
- 2.circle的使用
七、ellipse椭圆
- 1.ellipse的属性
- 2.ellipse的使用
八、line直线
- 1.line的属性
- 2.line的使用
九、polygon多边形
- 1.polygon的属性
- 2.polygon的使用
十、polyline多段线
- 1.polyline属性
- 2.polyline的使用
十一、path路径
- 1.path属性
- 2.path的使用
十二、自动生成svg
- 1.进入界面点击创建文件
- 2.创建画板
- 3.了解用法
- 4.导出svg
十二、结语

一、svg的介绍

在菜鸟教程上是这样介绍他的：

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。
SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。
SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。
简单来说就是我们可以通过svg来制作图标，网页的设计，以及数据的可视化，并且图片放大缩小不会失真。那么什么是矢量图，什么是位图呢？他们的区别是什么？接下来我们来看下面两幅图：
左边就是我们的矢量图，也就是说我们使用svg画出来的放大以后并不会失真放大以后看不到像素格子，而位图（又叫点阵图）放大以后会失真，你会看到像第二幅图一样的像素格子，这个就是位图。

在了解了svg以后我们就开始学习svg吧，本节内容我们使用VS Code编译软件来进行学习，那么开始今天的学习吧~

二、安装SVG扩展插件

这里我已经安装过了所以显示卸载，大家可以双击打开以后会显示安装，点击安装就可以了。
在这里插入图片描述
那么我们来看一下这个插件的作用是什么，为什么要安装：
安装完成以后，我们在编译的同时就可以看到svg图的变化，实时监控，方便于我们的观察，下面是一段svg图的代码，大家可以新建一个svg文件，将代码复制下来尝试一下，后续我们会讲解具体的内容。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="red" />
</svg>

在这里插入图片描述
打开以后我们就可以得到svg的预览图，如下图所示：

三、SVG基础知识

在svg标签内部是svg的内容，可以由多个svg的内容组成
xmlns 属性指定 SVG 文档的 XML 命名空间。
width指定了画布的宽
height指定了画布的高

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="red" />
</svg>

其中这里的代码里面包含了一个svg图形，circle 代表了圆形，除此之外SVG 还有一些其他的图型以便于我i们绘制不同的形状。

rect：绘制矩形
circle：绘制圆形
ellipse：绘制椭圆
line：绘制直线
polyline：绘制折线
polygon：绘制多边形
path：绘制路径

四、SVG在HTML中的导入方式

1.img导入

作为img导入，可以设置他的宽高

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="green" />
</svg>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px">
</body></html>

运行结果
在这里插入图片描述

2.使用 object 标签

svg代码与上面一致，这里就不再重复写了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px"><object data="./1.svg" type="">我是svg图片</object>
</body></html>

注意在object当中，我们写了一段文字 “我是svg图片” ，这里这文字并没有展示出来，原因是他是object标签的一个备用文字，类似于我们的img标签的alt属性，因为有些浏览器不支持object标签的使用的，当不支持object的标签的时候就会展示这段文字，当然现在大多数浏览器都是兼容的，或者当svg图像丢失也会显示这段文字。
在这里插入图片描述
浏览器兼容情况：
我们可以看到只有IE浏览器以及Opera Mini，是不兼容的，IE浏览器基本没有使用的了，Opera Mini在国内市场占比份额很小，基本没有，所以一般并不用担心兼容的问题。

测试（这里我们将svg文件改为2.svg实际我们并没有新建2.svg图像，那么会显示什么呢？）：

 <object data="./2.svg" type="">我是svg图片</object>

运行结果：
在这里插入图片描述

3.iframe标签导入

可以指定他的宽和高

 <iframe src="1.svg" width="200" height="200"></iframe>

运行结果展示:
在这里插入图片描述

4.将svg直接写在html当中

方便对svg进行调整

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px"><object data="./1.svg" type="">我是svg图片</object><iframe src="1.svg" width="200" height="200"></iframe><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="green" /></svg>
</body></html>

运行结果：
在这里插入图片描述

五、rect矩型

1.rect的属性

x=“x-coordinate” 矩形左上角的 x 坐标
y=“y-coordinate” 矩形左上角的 y 坐标
width=“width-value” 矩形的宽度
height=“height-value” 矩形的高度
rx=“rx-value” 矩形的圆角半径（水平方向）
ry=“ry-value” 矩形的圆角半径（垂直方向）
fill=“fill-color” 矩形的填充颜色
stroke=“stroke-color” 矩形的描边颜色
stroke-width=“width-value” 矩形的描边宽度

2.rect的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" x="30px" y="30px" rx="10px" ry="30px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

六、circle圆

1.circle的属性

cx=“x-coordinate” 圆心的 x 坐标
cy=“y-coordinate” 圆心的 y 坐标
r=“radius” 圆的半径
fill=“fill-color” 圆的填充颜色
stroke=“stroke-color” 圆的描边颜色
stroke-width=“width” 圆的描边宽度

2.circle的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50px" cy="100px" r="30px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

七、ellipse椭圆

椭圆与圆内容几乎一样，只是将圆形的r更改为rx与ry，其他属性都一致，这里就来简单讲解一下这两个属性：

1.ellipse的属性

cx=“x-coordinate” 椭圆心的 x 坐标
cy=“y-coordinate” 椭圆心的 y 坐标
rx=“x-radiu” 椭圆水平轴的半径
ry=“x-radiu” 椭圆垂直轴的半径
fill=“fill-color” 椭圆的填充颜色
stroke=“stroke-color” 椭圆的描边颜色
stroke-width=“width” 椭圆的描边宽度

2.ellipse的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><ellipse cx="50px" cy="100px" rx="30px" ry="10px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

八、line直线

1.line的属性

x1=“x1-coordinate” 起点的 x 坐标
y1=“y1-coordinate” 起点的 y 坐标
x2=“x2-coordinate” 终点的 x 坐标
y2=“y2-coordinate” 终点的 y 坐标
stroke=“stroke-color” 直线的颜色
stroke-width=“width” 直线的宽度

2.line的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><line x1="100" x2="100" y1="0" y2="100" stroke="red" stroke-width="10" />
</svg>

在这里插入图片描述

九、polygon多边形

1.polygon的属性

points=“x1,y1 x2,y2 x3,y3 …” 多边形各个顶点的坐标
fill=“fill-color” 多边形的填充颜色
stroke=“stroke-color” 多边形的边框颜色
stroke-width=“width” 多边形的边框宽度

2.polygon的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><polygon points="30,30 70,30 50,100" fill="red" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

十、polyline多段线

1.polyline属性

points=“x1,y1 x2,y2 x3,y3 …” 多段线各个顶点的坐标
fill=“none” 多段线的填充颜色，使用 “none” 表示不填充
stroke=“stroke-color” 多段线的边框颜色
stroke-width=“width” 多段线的边框宽度

2.polyline的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><polyline points="30,30 70,30 50,100" fill="red" stroke="black" stroke-width="2" />
</svg>

注意看下面，polyline与polygon的区别，多段线并不会自动闭合
在这里插入图片描述

十一、path路径

1.path属性

d=“path-data” 定义路径的路径数据
fill=“fill-color” 路径的填充颜色
stroke=“stroke-color” 路径的描边颜色
stroke-width=“width” 路径的描边宽度
d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。

2.path的使用

示例一：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M150 0 L75 200 L225 200 Z" />
</svg>

在这里插入图片描述
示例二：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"><path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

首先是起始点移动到距离画布水平方向100px,垂直方向350px,那么起始点也就是绿色线条交汇处为起始点，使用q二次贝塞尔曲线，贝塞尔曲线的控制点是根据起始点的位置计算的，所以第一个点就是距离起始点水平方向150px，垂直方向-300px,也就是红色点的位置，第二个控制点是距离起始点300px的位置最后形成如下曲线：
在这里插入图片描述

十二、自动生成svg

这样我们就完成了path路径，可以用来制作一些不规则的曲线，那么如果曲线多了该怎么办，需要一个一个的去找控制点吗？
当然是不想需要的，如果你想自己去制作一个svg图，那么你可以借助第三方自动生成svg,接下来要介绍的是即使设计这个网站，这个网站是一个免费制作svg图片的网站，可以自动生成。
网站链接：（戳我进如即时设计)打开以后大家自行登录一下。

1.进入界面点击创建文件

在这里插入图片描述

2.创建画板

3.了解用法

形状的创建
在这里插入图片描述

使用钢笔工具绘制路径
在这里插入图片描述
其他的这里就不多做介绍了，大家可以自己看一下

4.导出svg

在这里插入图片描述
导出以后将其放在你的VS Code中，使用VS Code打开就可以查看svg代码了

在这里插入图片描述

十二、结语

那么本节内容就到此结束了，除了以上说的这些svg标签以外还有一些文字，模糊等效果，大家可以参考菜鸟教程去查看学习一下，如果你想继续学习有关前端的知识，可以加入博主的社区（戳我进入社区），社区会不定时更新一些新的知识，希望对小伙伴们有所帮助，本节内容就到此结束了，我们下一节再见~

序言

目录

一、svg的介绍

二、安装SVG扩展插件

三、SVG基础知识

四、SVG在HTML中的导入方式

1.img导入

2.使用 object 标签

3.iframe标签导入

4.将svg直接写在html当中

五、rect矩型

1.rect的属性

2.rect的使用

六、circle圆

1.circle的属性

2.circle的使用

七、ellipse椭圆

1.ellipse的属性

2.ellipse的使用

八、line直线

1.line的属性

2.line的使用

九、polygon多边形

1.polygon的属性

2.polygon的使用

十、polyline多段线

1.polyline属性

2.polyline的使用

十一、path路径

1.path属性

2.path的使用

十二、自动生成svg

1.进入界面点击创建文件

2.创建画板

3.了解用法

4.导出svg

十二、结语

相关文章：