SVG(Scalable Vector Graphics,可缩放矢量图形)是一种基于XML标准的标记语言,用于描述和渲染二维矢量图形。它由W3C(万维网联盟)自1999年发起并持续发展,使得图形能够在不失真的情况下适应不同分辨率的屏幕和打印需求。SVG文件结构包含XML声明,如DOCTYPE和DTD引用,以及SVG元素本身,如`<svg>`标签,定义了画布的大小和版本信息。
SVG的基本图形元素包括:
1. **线段** (`<line>`): 通过`<line>`标签创建,定义两点之间的直线,可以通过`x1`, `y1`, `x2`, `y2`属性指定起点和终点,同时可以设置`stroke`(边框颜色)、`stroke-width`(边框宽度)等渲染属性。
2. **折线** (`<polyline>`): 类似于线段,但可以绘制多段连接的线,通过多个`points`属性定义各个控制点。
3. **矩形** (`<rect>`): 用于创建矩形,通过`x`, `y`, `width`, `height`属性指定位置和尺寸,同样可以调整渲染样式。
4. **多边形** (`<polygon>`): 用于绘制封闭的多边形,通过`points`属性指定顶点坐标。
5. **圆形** (`<circle>`): 通过`cx`, `cy`(圆心坐标)和`r`(半径)创建,支持填充和描边样式。
6. **椭圆** (`<ellipse>`): 类似圆形,由`cx`, `cy`, `rx`(x轴半径)和`ry`(y轴半径)定义。
7. **路径** (`<path>`): 提供最大的灵活性,允许使用贝塞尔曲线和其他复杂形状,通过`d`属性定义路径数据,如M(移动)、L(直线)、C(三次贝塞尔曲线)等命令。
路径元素可以进一步细分为三类:
- 直线类(`M`和`L`)
- 曲线类(`C`、`Q`、`A`)
- 弧线类(涉及圆弧、椭圆弧)
在SVG中,图形的渲染样式可以通过CSS属性来控制,如`stroke`、`stroke-width`(边框)、`fill`(填充)、`fill-opacity`(填充透明度)、`stroke-opacity`(描边透明度)和`opacity`(整体透明度)。这些属性允许精确地定制图形的外观,适应各种设计需求。
SVG文件的扩展名为`.svg`,可以直接在Web浏览器中查看和编辑,由于其矢量特性,图形在缩放时仍能保持清晰锐利,是响应式设计和动态图形的理想选择。