什么是 SVG？SVG 文件指南

fatimakanij204

什么是 SVG？（可缩放矢量图形）是一种图像文件格式，它结合了形状、直线、曲线、文本和颜色信息来构建图像。 虽然最常见的图像格式（例如 JPG、PNG 和 GIF）将其图像数据记录为特定的像素排列，但 SVG 文件更像是用于创建给定绘图的“书面说明”或“配方”。这意味着 SVG（就像一个好的菜谱）可以按比例放大，而不会损失图像质量，也不会增加文件大小。 SVG 代码是一种基于文本的、人类可读的语言，本质上类似于 HTML 或 XML。 SVG 文件是什么样的？ 在几乎所有现代 Web 浏览器中打开一个非常简单的 SVG 文件，您将看到如下内容： Learn to Code with JavaScript 一个非常简单的 SVG - 带有黑色描边的黄色圆圈 在文本编辑器中打开同一个 SVG 文件，您将看到类似以下内容的内容如示例所示，SVG 文档只不过是描述形状、线条、曲线、颜色和文本的纯文本文件。它们可以被人类读取和编辑，并通过 CSS 或 JavaScript 进行操作。



这为 SVG 提供了传统 PNG、GIF 或 JPG 图像格式无法比拟的灵活性和多功能性。 如何制作或编辑 SVG 文件？ 虽然简单的 SVG 图像（如上面的示例）可以使用任何基本文本编辑器创建，但大多数 SVG 都是使用现代矢量图形应用程序创建的。流行的 SVG 编辑器包括： 菲格玛 Adobe 插画 黎巴嫩电话号码表 师 Boxy SVG（便宜） SVG 编辑器（免费） 以下是典型 SVG 图像的示例。该插图仅 60KB，几乎可以在任何在线环境中使用。作为一个矢量，我们可以确定它会立即缩放以满足任何视口或元素宽度的需求。 SVG 101 标头 SVG 诞生于 20 世纪 90 年代，它可能是后来成长为天鹅的“丑小鸭”格式。最初，在 2000 年代的大部分时间里，它的支持很差并且被忽视，但自 2010 年代中期以来，情况发生了变化。所有现代网络浏览器现在都可以完美渲染 SVG，并且所有严肃的绘图应用程序都提供 SVG 导出选项。




Learn to Code with JavaScript 虽然 JPG 和 PNG 等传统光栅图形仍然更适合摄影图像，但 SVG 特别适合满足当今 Web 开发对可扩展性、响应性、交互性、可编程性、性能和可访问性的需求。 SVG 与 HTML5 的 Canvas 相比如何？ 这两种技术非常不同，但这个问题经常出现，这是可以理解的。我们详细分析了SVG 与 Canvas的用途、优缺点，以便您每次都能做出正确的选择。 SVG有什么优点？ SVG 的优势在于它可以解决现代 Web 开发中许多最棘手的问题。让我们轻松浏览其中的一些内容。 1. 可扩展性和响应能力 如果您仔细想想，无论您将它们描绘在标准名片上还是 20 英尺高的巨型建筑标牌上，组成 Nike 徽标的形状、路径和文字都是相同的。仅测量单位发生变化。SVG 允许您构建任何尺寸的图像，您可以确保这些图像看起来清晰明快。 相比之下，GIF、JPG 和 PNG 等基于像素的格式就像使用乐高积木一样。