SVG 教程 – 学习 SVG 基础

SVG 是一种基于 XML 的矢量图形语言。你可以在文本编辑器中编写 SVG 标记，在浏览器中查看结果，并在需要从代码生成、编辑、渲染或转换 SVG 文件时使用 Aspose.SVG API。

本教程介绍真实项目中最常见的 SVG 概念：坐标系统、viewBox、形状、路径、文本、颜色、填充、描边、渐变、滤镜、变换和嵌入内容。阅读面向 API 的 SVG 编辑、转换、矢量化或文档生成文章之前，可以先把本教程作为基础。

坐标与布局

SVG 坐标系统和单位 解释 SVG canvas、viewport、用户坐标系统和坐标单位。
SVG viewBox 说明 viewBox 如何缩放、裁剪和重新定位 SVG 图形。

形状、路径和文本

SVG 形状 介绍矩形、圆、椭圆、直线、折线和多边形。
SVG Path Data 解释用于直线、圆弧、贝塞尔曲线和自定义轮廓的路径命令。
SVG 文本 介绍用于显示和设置 SVG 文本样式的 <text>、<tspan> 和 <textPath> 元素。

颜色和绘制

SVG 颜色 解释颜色值、fill、stroke、不透明度，以及形状、路径和文本中的颜色使用。
SVG 中的填充和描边 聚焦 SVG 绘制模型、描边宽度、线帽、连接和虚线。
SVG 背景颜色 展示添加或修改 SVG 背景的可靠方法。
SVG 渐变 解释线性渐变、径向渐变、色标、方向，以及通过 url(#id) 复用渐变。

效果和变换

SVG 变换 介绍 translate、scale、rotate、skew 和 matrix 变换函数。
SVG 变换矩阵 解释 SVG 变换背后的矩阵模型。
SVG 滤镜 介绍模糊、投影、光照和颜色滤镜 primitive。

嵌入内容和实践

SVG 嵌入内容 展示 SVG 如何嵌入栅格图像、嵌套 SVG 和 HTML。
如何绘制雪花 是一个实践项目，使用可复用元素、旋转和动画。

如何使用本 SVG 教程

从与你要解决的问题最相关的主题开始：

如果需要理解 SVG 布局、缩放、裁剪或响应式图形，先学习坐标和 viewBox。
如果需要绘制 SVG 几何图形或在标记中创建可读文本，阅读形状、路径和文本。
如果 SVG 结构已经正确，但视觉样式需要调整，阅读颜色、填充、描边、渐变和背景。
如果需要模糊、阴影、光照、旋转、缩放、倾斜或基于矩阵的定位，阅读滤镜和变换。
当需要从代码生成、编辑、转换、渲染或矢量化 SVG 文件时，再进入 Aspose.SVG API 文章。

本教程中的示例直接使用 SVG 标记。下图显示作为 SVG 图像渲染的 Aspose 徽标。即使很小的 SVG 片段，也可以定义可复用的图标、徽标或简单插图。

作为 SVG 图像渲染的 Aspose 徽标

下面的代码片段是 Aspose 徽标的简洁 SVG 标记示例。你也可以打开源文件： aspose.svg。

1<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
4    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
5    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
6    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
7</svg>

Aspose.SVG 提供 免费的 SVG Web 应用，可在浏览器中转换 SVG 或图像文件、合并 SVG、矢量化图像、生成 SVG sprites、将 SVG 编码为 Base64，以及矢量化文本。在线应用无需安装其他软件。

SVG 坐标系统和单位