SVG 绘图 – 基础教程

SVG 是一种用于矢量图形绘制的 XML 语言。如果您熟悉基本的 HTML 和 XML，您可以在任何文本编辑器中轻松创建 SVG！我们希望我们的 SVG 绘图教程对您的工作或学习有所帮助。我们尝试根据简单的示例来解释从头开始创建 SVG 的常见规则和标准步骤。

本章旨在解释如何绘制 SVG 图像，包括有关 SVG 坐标系和单位、SVG 基本形状、SVG 路径数据、SVG 文本、基本 SVG 转换、SVG 颜色、SVG 中的填充和描边、SVG 嵌入内容和 SVG 的文章过滤器和渐变。

• SVG 坐标系和单位 在本文中，您可以找到由 viewport 和 viewBox 属性值定义的 SVG 工作区的描述。
• SVG viewBox 在本文中，您将了解什么是 viewbox 以及如何使用它来缩放和裁剪 SVG 图像。
• SVG 形状 在本文中，您可以学习如何创建不同的简单形状并向它们应用一些样式属性。
• SVG 路径数据 本文展示了如何使用路径通过组合直线、圆弧和贝塞尔曲线来绘制各种轮廓或形状。此处描述了用于 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)：

<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
    <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)"/>
    <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)"/>
    <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)"/>
    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
</svg>

Aspose.SVG 提供 SVG 免费 Web 应用程序，用于转换 SVG 或图像文件、合并 SVG 文件、图像矢量化、SVG 精灵生成、SVG 到 base64 数据编码以及文本矢量化。这些在线应用程序可在任何带有网络浏览器的操作系统上运行，不需要安装额外的软件。这是一种快速、简单的方法，可以高效、有效地解决您的 SVG 相关任务！