SVG 简介学习笔记

什么是 SVG

SVG，全称为可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维矢量图形的XML语言。与传统的位图不同，SVG图像是由矢量描述对象的几何属性和样式属性组成，因此可以随意调整大小而不失真。

SVG 的优点

SVG图像可以随意缩放而不失真
SVG图像使用XML格式，方便编辑和维护
SVG图像可以通过CSS进行样式控制
SVG图像可以添加交互性和动画效果

SVG 的使用

在HTML中使用SVG图像需要使用<svg>标签，并且需要将SVG代码嵌入到HTML文档中或者通过链接引用外部SVG文件。

示例代码：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>SVG Example</title>
	<style>
		.circle {
			fill: red;
			stroke: black;
			stroke-width: 2px;
		}
	</style>
</head>
<body>
	<svg width="100" height="100">
		<circle cx="50" cy="50" r="40" class="circle" />
	</svg>
</body>
</html>

以上代码定义了一个半径为40，圆心坐标为(50,50)的红色圆，并添加了黑色边框。

SVG 实例

以下是一个使用SVG绘制的小鸟示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>SVG Bird Example</title>
	<style>
		svg {
			background-color: #9bc5c9;
		}
		.bird {
			fill: #fff;
			stroke: #000;
			stroke-width: 2px;
		}
	</style>
</head>
<body>
	<svg width="200" height="200">
		<path class="bird" d="M40,100 C60,70 80,50 120,40 C140,10 170,30 180,60 C200,90 150,130 120,120 L120,170 L100,160 L80,170 L80,120 C50,130 0,90 20,60 C30,30 70,40 90,50 C100,20 130,10 150,40 C170,70 190,90 160,120 L160,150 C130,140 110,130 110,160 L110,180 L90,190 L70,180 L70,160 C30,160 30,120 50,100 L40,100 Z"/>
	</svg>
</body>
</html>

以上代码实现了一个白色小鸟形状，并添加了黑色描边，背景颜色为浅蓝色。