svg 格式详解

一、SVG（Scalable Vector Graphics）的定义与特点

1. 定义

SVG 是一种基于 XML（可扩展标记语言）的矢量图形格式。它用于描述二维图形，通过使用 XML 标签和属性来定义图形的形状、颜色、位置、大小等各种属性。与位图（如 JPEG、PNG）不同，矢量图形是由数学公式定义的图形元素组成，所以 SVG 图形在放大或缩小后不会出现失真的情况，能够始终保持清晰的图像质量。

2. 特点

可缩放性、文件大小相对较小、可编辑性和交互性

二、SVG 的基本语法结构

1. 根元素

SVG 文件的根元素是`<svg>`，它包含了整个 SVG 图形的定义。在`<svg>`标签中，可以设置图形的宽度（`width`）、高度（`height`）、视图框（`viewBox`）等属性。

<svg width="100px" height="100px" viewBox="0 0 100 100">

    <!-- 这里放置其他图形元素 -->

</svg>

2. 基本图形元素

SVG 包含多种基本图形元素，如`<circle>`（圆形）、`<rect>`（矩形）、`<line>`（直线）、`<polyline>`（折线）、`<polygon>`（多边形）等。

2.1 圆形元素

<circle cx="50" cy="50" r="30" fill="blue" />

这里`cx`和`cy`分别是圆心的`x`坐标和`y`坐标，`r`是圆的半径，`fill`属性用于设置填充颜色，这个圆形的圆心位于 SVG 图形的`(50,50)`位置，半径为 30 像素，填充颜色为蓝色。

2.2 矩形元素

<rect x="10" y="10" width="80" height="60" stroke="black" fill="none" />

其中`x`和`y`是矩形左上角的坐标，`width`和`height`分别是矩形的宽度和高度，`stroke`属性用于设置边框颜色，`fill`属性用于设置填充颜色。这个矩形左上角位于`(10,10)`位置，宽 80 像素，高 60 像素，有黑色边框，没有填充颜色。

三、SVG 的高级特性

1. 渐变和图案填充

SVG 支持线性渐变（`linearGradient`）和径向渐变（`radialGradient`）来填充图形。可以定义渐变的颜色、方向和范围等属性。

<defs>

    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">

        <stop offset="0%" stop - color="yellow" />

        <stop offset="100%" stop - color="red" />

    </linearGradient>

</defs>

<rect x="10" y="10" width="80" height="60" fill="url(#myGradient)" />

首先在`<defs>`（定义）元素中定义了一个线性渐变，`id`为`myGradient`，渐变方向是从左到右（`x1="0%" y1="0%" x2="100%" y2="0%"`），渐变颜色从黄色（`stop - color="yellow"`在`offset="0%"`处）过渡到红色（`stop - color="red"`在`offset="100%"`处）。然后将这个渐变应用到矩形的填充属性（`fill="url(#myGradient)"`）。

2. 文本和字体处理

SVG 可以包含文本元素（`<text>`），并且可以对文本进行样式设置，如字体、字号、颜色、对齐方式等。例如：

<text x="20" y="40" font - family="Arial" font - size="16" fill="black">这是SVG中的文本</text>

这里文本的位置由`x`和`y`坐标确定，字体为`Arial`，字号为 16 像素，颜色为黑色。此外，SVG 还支持使用外部字体文件（通过`@font - face`规则）来提供更丰富的字体选择。

3. 滤镜效果

SVG 提供了各种滤镜效果，如模糊（`feGaussianBlur`）、阴影（`feDropShadow`）等，可以为图形添加特殊的视觉效果。

<defs>

    <filter id="blurFilter">

        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />

    </filter>

</defs>

<circle cx="50" cy="50" r="30" fill="blue" filter="url(#blurFilter)" />

在`<defs>`元素中定义了一个模糊滤镜（`id="blurFilter"`），其中`feGaussianBlur`元素用于设置模糊效果，`in="SourceGraphic"`表示对原始图形进行模糊，`stdDeviation="3"`指定了模糊的程度。然后将这个滤镜应用到圆形的`filter`属性（`filter="url(#blurFilter)"`）。