HTML5 引入的 SVG（Scalable Vector Graphics）是一种基于 XML 格式的图形标准，可以在网页中绘制矢量图形。与像素图像不同，SVG 图像可以无限缩放而不失真，非常适用于图标、图表、动画以及交互式图形的展示。

1. 基本概念

• 矢量图形：由路径、线条、曲线等组成的图形，与基于像素的图像（如 PNG、JPEG 等）不同，矢量图形能够保持在任何分辨率下的清晰度。
• XML 结构：SVG 使用 XML 格式定义图形，因此可以通过 DOM（文档对象模型）来操作图形内容。

2. SVG 基本元素

1. <svg>

<svg> 是 SVG 图形的容器，用来定义一个图形区域，通常设置宽度和高度。

示例：

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

• <circle>：绘制一个圆形，cx 和 cy 是圆心的坐标，r 是半径，stroke 设置边框颜色，stroke-width 设置边框宽度，fill 设置填充颜色。

3. 常用 SVG 图形元素

1. <rect>

<rect> 用于绘制矩形。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="150" height="100" stroke="black" stroke-width="5" fill="green" />
</svg>

• x 和 y：矩形的左上角坐标。
• width 和 height：矩形的宽度和高度。

2. <line>

<line> 用于绘制直线。

示例：

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

• x1 和 y1：直线的起点坐标。
• x2 和 y2：直线的终点坐标。

3. <polygon>

<polygon> 用于绘制多边形。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100,10 190,190 10,190" stroke="black" stroke-width="3" fill="red" />
</svg>

• points：多个坐标点，用空格分开，表示多边形的顶点。

4. <path>

<path> 元素用于绘制任意形状的路径，可以组合直线、曲线、弧线等。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 Z" stroke="purple" stroke-width="2" fill="transparent" />
</svg>

• M：移动到指定坐标。
• H：水平直线。
• V：垂直直线。
• Z：关闭路径。

4. SVG 样式

1. 内联样式

你可以直接在 SVG 元素上使用 style 属性来定义样式。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="80" style="stroke:black; stroke-width:4; fill:yellow;" />
</svg>

2. CSS 样式

可以使用外部 CSS 样式表来设置 SVG 的样式。

示例：

<style>
    circle {
        stroke: black;
        stroke-width: 4;
        fill: yellow;
    }
</style>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="80" />
</svg>

5. SVG 动画

SVG 允许通过 CSS 或 JavaScript 对图形进行动画。

1. CSS 动画

使用 @keyframes 可以对 SVG 元素进行动画。

示例：动画效果

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="80" fill="yellow">
        <animate attributeName="r" from="80" to="40" dur="1s" begin="0s" repeatCount="indefinite" />
    </circle>
</svg>

• animate：创建动画效果，attributeName 定义要动画化的属性（如 r 为半径），from 和 to 定义动画开始和结束的值，dur 定义动画持续时间，repeatCount 设置动画的重复次数。

2. JavaScript 动画

你也可以使用 JavaScript 操控 SVG 元素进行更复杂的动画。

示例：使用 JavaScript 控制动画

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

<script>
    var circle = document.getElementById("myCircle");
    var radius = 80;
    setInterval(function() {
        radius = radius === 80 ? 40 : 80;
        circle.setAttribute("r", radius);
    }, 1000);
</script>

6. SVG 交互

SVG 允许通过 JavaScript 与用户进行交互。例如，你可以捕捉鼠标点击事件，并改变图形的属性。

示例：点击更改颜色

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

<script>
    document.getElementById("circle").addEventListener("click", function() {
        this.setAttribute("fill", "blue");
    });
</script>

7. SVG 使用优势

• 无损缩放：由于是矢量图形，SVG 可以缩放至任意大小而不丢失清晰度，适用于响应式设计。
• 可操作性：SVG 是 XML 格式，可以通过 DOM 操作其内容，非常适合动态交互。
• SEO 友好：SVG 文件是文本格式，搜索引擎可以解析其中的内容，有助于提升 SEO。

小结

SVG 是 HTML5 的强大工具之一，适合绘制高质量、可缩放的图形。它可以通过简单的 HTML 标签直接嵌入到网页中，也可以通过 CSS 和 JavaScript 动画和交互功能增强其效果。无论是静态图形还是动态交互，SVG 都能提供高效、精确的解决方案。