SVG 参考手册

SVG 参考手册

1. 概述

SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于在网络上创建二维图形。由于其基于矢量，因此可以无限放大而不失真，这使得SVG非常适合各种分辨率和屏幕尺寸的设备。本参考手册旨在提供SVG的基础知识、常用元素和属性，以及如何在网页和应用程序中使用SVG。

2. SVG基础

2.1 SVG结构

SVG文档的基本结构如下：

<svg
    width="100%"
    height="100%"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <!-- SVG内容 -->
</svg>

• width 和 height：定义SVG图像的宽度和高度。
• viewBox：定义用户坐标系在SVG视图中的位置和大小。
• xmlns：SVG命名空间，必须指定。

2.2 坐标系统

SVG使用的是笛卡尔坐标系，原点(0,0)位于视图的左上角。x轴水平向右，y轴垂直向下。

2.3 基本形状

SVG提供了一系列基本形状元素，如矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线段 <line>、折线