SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它允许你创建可无限缩放的矢量图形，这意味着无论你将其放大还是缩小，图形都不会失真。SVG在网页设计中非常流行，因为它可以与HTML和CSS一起使用，为网页添加丰富的图形元素。
SVG基础
什么是SVG？
SVG是一种用于描述二维图形的XML标记语言。它允许你定义图形的形状、颜色、样式等。SVG图形可以由直线、曲线、矩形、圆形、文本等基本形状组成。
SVG的优势
- 可缩放性：SVG图形可以无限放大或缩小，而不会失真。
- 跨平台性：SVG可以在任何支持XML的平台上显示。
- 易于编辑：SVG图形可以通过文本编辑器进行编辑。
SVG绘制基础
SVG文档结构
一个SVG文档通常包含以下结构：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形内容 -->
</svg>
width和height：定义SVG图形的宽度和高度。xmlns：定义SVG的命名空间。
基本形状
SVG支持多种基本形状，如矩形、圆形、椭圆、线、折线、多边形和路径。
矩形
<rect x="10" y="10" width="100" height="50" style="fill:blue;stroke:green;stroke-width:2" />
x和y：定义矩形的左上角坐标。width和height：定义矩形的宽度和高度。style：定义矩形的填充颜色、边框颜色和边框宽度。
圆形
<circle cx="50" cy="50" r="40" style="fill:yellow;stroke:purple;stroke-width:4" />
cx和cy：定义圆心的坐标。r：定义圆的半径。
路径
路径是SVG中最强大的功能之一，它允许你创建复杂的图形。
<path d="M10 10 L50 50 L90 10 Z" style="fill:red;stroke:blue;stroke-width:2" />
d：定义路径的命令和参数。M：移动到指定坐标。L：绘制直线到指定坐标。Z：闭合路径。
SVG高级技巧
动画
SVG支持多种动画效果，如渐变、阴影、动画路径等。
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
attributeName：定义要动画化的属性。from和to：定义动画的起始和结束值。dur：定义动画的持续时间。repeatCount：定义动画的重复次数。
颜色和渐变
SVG支持多种颜色和渐变效果。
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue" />
<stop offset="100%" style="stop-color:red" />
</linearGradient>
linearGradient：定义线性渐变。stop：定义渐变的颜色和位置。
实战案例
制作一个简单的时钟
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 时针 -->
<line x1="100" y1="100" x2="100" y2="80" style="stroke: black; stroke-width: 2" />
<!-- 分针 -->
<line x1="100" y1="100" x2="100" y2="60" style="stroke: black; stroke-width: 2" />
<!-- 秒针 -->
<line x1="100" y1="100" x2="100" y2="40" style="stroke: red; stroke-width: 2" />
</svg>
总结
SVG是一种非常强大的图形绘制工具，可以帮助你创建丰富的网页图形。通过本文的介绍，相信你已经对SVG有了基本的了解。接下来，你可以通过实践来提高自己的SVG绘制技能。祝你学习愉快！
