📅 最后修改于: 2023-12-03 15:20:24.242000 🧑 作者: Mango
SVG（Scalable Vector Graphics）是一种基于XML语言的图像格式，它支持矢量图形的描述。由于是矢量图形，因此能够自由缩放而不影响画质，因此被广泛应用于网页制作、图表绘制等领域。
普通图片（如JPEG、PNG）是由像素构成的，因此缩放时会失真或变得模糊。而SVG是基于矢量的描述，因此缩放时不会失真或变得模糊。
此外，SVG中的图形元素支持一些特殊的效果，如渐变、滤镜、混合模式等。
SVG图像可以直接嵌入到HTML代码中，使用<svg>标签进行描述。也可以将SVG保存为独立文件，使用<img>标签或CSSbackground-image属性进行引用。
下面是一个简单的SVG示例代码：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Canvas是基于像素的绘图API，通过JavaScript脚本进行操作。而SVG是基于矢量的描述，通过XML进行描述和操作。
Canvas适用于制作像素级别的图形，例如动画、交互式游戏等；SVG适用于更为复杂的图形和图表，例如地图、数据可视化等。
SVG中可以使用<text>标签进行文字的绘制，如下所示：
<svg width="200" height="100">
<text x="50" y="50" font-size="24" fill="red">Hello, SVG!</text>
</svg>
其中，x和y属性表示文字的左上角坐标，font-size表示字体大小，fill表示文字颜色。
SVG中有多种图形元素可以使用，包括<rect>（矩形）、<circle>（圆形）、<line>（直线）等。这些元素可以使用属性来设置大小、颜色、边框等样式。
例如，下面的代码绘制了一个红色的矩形：
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="red" />
</svg>
SVG元素可以添加各种事件，如onclick（鼠标点击事件）、onmouseover（鼠标移动到元素上事件）等。可以使用JavaScript代码来为SVG元素添加事件。
例如，下面的代码添加了一个点击事件，当鼠标点击红色矩形时，弹出“Hello, World！”的提示框：
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="red" onclick="alert('Hello, World!')" />
</svg>
可以使用CSS样式来对SVG元素进行样式控制，如修改颜色、大小等。
例如，下面的CSS代码将SVG中所有红色元素的颜色修改为蓝色：
svg *[fill="red"] {
fill: blue;
}
同时，需要注意的是，在SVG中，样式控制属性名需要使用驼峰式（如strokeWidth），而不是短横线式（如stroke-width）。
SVG中支持多种动画效果，如渐变、路径动画、运动路径等。这些效果可以使用<animate>标签进行操作。
例如，下面的代码演示了一个简单的移动矩形动画效果：
<svg width="100" height="100">
<rect x="10" y="10" width="20" height="20" stroke="black" stroke-width="2" fill="red">
<animate attributeName="x" from="10" to="60" dur="1s" repeatCount="indefinite" />
</rect>
</svg>
其中，<animate>标签用于控制x属性的动画效果，attributeName表示要操作的属性名，from和to表示属性的起止值，dur表示持续时间，repeatCount表示重复次数。
优点：
缺点：