svg是什么 svg常用的方法+附代码

什么是SVG？

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言。与JPEG、GIF等位图图像格式不同，SVG是基于矢量的概念，可以根据需要进行无损缩放而不会失真。它适用于在网页上显示、打印以及交互式图像应用程序中使用，如数据可视化、图表和地图等。

SVG常用的方法

1. 创建SVG图像：

<svg width="400" height="400">
  ...
</svg>

上述代码创建了一个400x400像素的SVG容器，可以在其中绘制图形。

2. 绘制基本形状：

<circle cx="50" cy="50" r="40" fill="red"/>

上述代码创建了一个半径为40像素、红色填充的圆形在坐标为(50,50)的位置上。

3. 绘制路径：

<path d="M100 100 L200 200 L300 100 Z" fill="none" stroke="black"/>

上述代码创建了一个由直线连接的路径，起始于(100,100)，经过(200,200)，最终闭合于(300,100)。路径的轮廓由黑色线条定义。

4. 使用属性和样式：

<rect x="50" y="50" width="100" height="100" fill="blue" stroke="black" stroke-width="2"/>

上述代码创建了一个蓝色填充、黑色轮廓、轮廓宽度为2像素的矩形。

5. 嵌套和组合图形：

<svg width="400" height="400">
  <circle cx="200" cy="200" r="100" fill="yellow"/>
  <rect x="150" y="150" width="100" height="100" fill="blue"/>
</svg>

上述代码在一个SVG容器中同时绘制了一个黄色的圆形和一个蓝色的矩形。

总结

通过SVG，我们可以使用代码来创建可缩放的矢量图形，而不是使用固定像素的位图。SVG提供了丰富的元素和属性，使我们能够绘制各种形状、路径和图像。通过使用SVG，我们可以实现交互式的数据可视化和动态图形效果，使网页更加生动和丰富。