SVG 绘图 – 基础教程
SVG 是一种用于矢量图形绘制的 XML 语言。如果您熟悉基本的 HTML 和 XML,您可以在任何文本编辑器中轻松创建 SVG!我们希望我们的 SVG 绘图教程对您的工作或学习有所帮助。我们尝试根据简单的示例来解释从头开始创建 SVG 的常见规则和标准步骤。
本章旨在解释如何绘制 SVG 图像,包括有关 SVG 坐标系和单位、SVG 基本形状、SVG 路径数据、SVG 文本、基本 SVG 转换、SVG 颜色、SVG 中的填充和描边、SVG 嵌入内容和 SVG 的文章过滤器和渐变。
- SVG 坐标系和单位 在本文中,您可以找到由 viewport 和 viewBox 属性值定义的 SVG 工作区的描述。
- SVG 形状 在本文中,您可以学习如何创建不同的简单形状并向它们应用一些样式属性。
- SVG 路径数据 本文展示了如何使用路径通过组合直线、圆弧和贝塞尔曲线来绘制各种轮廓或形状。此处描述了用于 SVG 路径制作的命令组。
- SVG 文本 本文介绍了文本内容元素,并回顾了一些有助于将文本显示、格式化和样式化为 SVG 图像的常见属性。
- 基本 SVG 变换 您将了解如何通过 SVG 变换属性应用图形对象旋转、缩放、移动和倾斜的变换函数,并考虑 SVG 变换的代码示例。
- SVG 变换矩阵 了解如何使用变换矩阵来旋转、缩放、平移和倾斜 SVG 图形,并考虑 SVG 变换的代码示例。
- SVG 中的填充和描边 在本文中,我们描述了几个属性,允许您设置填充和描边的不同方面,包括颜色、不透明度、粗细、虚线的使用等。
- SVG 颜色 本文深入研究了 SVG 文本和形状着色的不同方式。您将了解如何定义颜色的概述,包括控制 SVG 内容透明度的各种方法。
- SVG 嵌入内容 是从其他资源导入到文档中的内容。您将了解如何在 SVG 对象中包含和渲染位图和 HTML 元素。
- SVG 滤镜和渐变 回顾了产生模糊、颜色和光照效果的滤镜基元。本章演示了线性或径向渐变如何装饰 SVG 图形中的任何线条、形状或文本。
在文章中,我们将使用 XML 代码创建矢量 SVG 图像。该图展示了 Aspose 徽标 – SVG 图像。只需几行代码,您就可以创建图标、徽标或任何简单的图像。
下面显示了 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 精灵生成、SVG 到 base64 数据编码以及文本矢量化。这些在线应用程序可在任何带有网络浏览器的操作系统上运行,不需要安装额外的软件。这是一种快速、简单的方法,可以高效、有效地解决您的 SVG 相关任务!