<svg>元素
<svg>是一种用于描述二维矢量图形的 XML 格式，可以直接嵌入 HTML 文档中。
<svg>基本用法
<svg>的几种基本用法,包括圆形，正方形，三角形，直线 ，折线等
<body>
<svg width="180" height="100">
<!-- 圆 -->
<circle cx="50" cy="50" r="40" storke-width="4" fill="yellow" />
</svg>
<svg width="180" height="100">
<!-- 正方形 -->
<rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>
<svg width="180" height="100">
<!-- 椭圆 -->
<ellipse cx="50" cy="50" rx="30" ry="20" fill="green" />
</svg>
<svg width="180" height="100">
<!-- 直线 -->
<line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>
<svg width="180" height="100">
<!-- 三角形 -->
<polygon points="50,10 90,90 10,90" fill="purple" />
</svg>
<svg width="300" height="200">
<!-- 星型 -->
<polygon points="100,10,40,198,190,78,10,78,160,198"
style="fill: lime; stroke: plum; stroke-width: 5; fill-rule: evenodd;"/>
</svg>
<svg width="180" height="100">
<!-- 折线 -->
<polyline points="10,10 30,30 50,10 70,30 90,10" fill="none" stroke="black" />
</svg>
</body>
<svg>也可以使用CSS属性
<svg width="100" height="100">
<style>
circle {
fill: red;
stroke: black;
stroke-width: 3;
}
</style>
<circle cx="50" cy="50" r="40" />
</svg>
<svg>高级特性
<svg>渐变
<svg width="180" height="100">
<!-- 渐变 -->
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
</svg>
<svg>滤镜
<svg width="180" height="100">
<!-- 滤镜 -->
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />
</svg>
<svg>动画
<svg width="180" height="100">
<!-- 动画 -->
<circle cx="50" cy="50" r="20" fill="red">
<animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
<svg>元素和<canvas>元素
SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式，每个图形元素都是DOM树的一部分。Canvas则是一个通过JavaScript API进行像素级绘制的位图画布，提供更底层的绘图控制。
核心技术区别
图形类型：
<svg>使用矢量图形描述，由数学方程定义形状
<canvas>生成位图图像，由像素矩阵构
DOM集成：
<svg>元素完全融入DOM，可单独操作和绑定事件
<canvas>作为整体DOM元素存在，内部图形无独立DOM表示
渲染机制：
<svg>采用保留模式渲染，自动管理图形状
<canvas>使用立即模式，开发者需手动控制绘制过程
交互能力：
<svg>原生支持图形级事件处理
<canvas>需手动实现点击检测等交互逻辑
性能特征对比
静态内容：
<svg>在渲染少量复杂图形时效率更高
<canvas>更适合处理大量动态图形元素
动画性能：
<svg>动画受DOM操作限制
<canvas>可通过清除重绘实现高效动画
内存占用：
<svg>内存消耗与图形复杂度相关
<canvas>内存占用由画布分辨率决定
适用场景分析
<svg>优势场景：
需要无限缩放的高质量图形
图形需要单独交互和样式控制
对可访问性和SEO有要求的项目
<canvas>优势场景：
数据可视化和大规模图形渲染
游戏开发和实时图像处理
需要像素级操作的应用