在设计一个用户友好的网站的过程中，您可能会遇到图像方面的一些困难，尤其是图像分辨率。图像质量对于获得正确的效果很重要——在页面上看起来不够专业的东西比扭曲的、缩放不当的LOGO、图标或照片。
这个问题只会因响应式设计而变得复杂。访问者在台式机和智能手机上查看您的内容，因此，与您的其他内容一起，无论设备如何，您的图像都应该进行优化。
如果有一种数字格式可以使图像无论大小都看起来清晰，那不是很好吗？ 事实证明，有。
它称为SVG 格式，非常适合网站上的非摄影图像。 SVG 是网站设计中的一种魔术——它们不仅可以生成任何比例的清晰图形，而且还针对搜索引擎进行了优化，可编程，通常比其他格式小，并且能够动态动画。
有很多关于 SVG 的解压和学习。 在本指南中，我将介绍开始使用 SVG 所需了解的所有基础知识。我将解释这些文件是什么、何时使用它们以及如何开始自己创建 SVG 文件。
什么是 .SVG 文件？
SVG 文件是可缩放矢量图形文件的缩写，是一种标准图形文件类型，用于在 Internet 上渲染二维图像。
与其他流行的图像文件格式不同，SVG 格式将图像存储为矢量，这是一种基于数学公式由点、线、曲线和形状组成的图形。 这就提出了一个问题：矢量图形到底是什么？ 栅格与矢量当今网络上使用的图像文件格式不止几种，我们可以将其分为两类：光栅图形和矢量图。
您可能熟悉常用格式PNG 和 JPEG。这些是光栅图形格式，这意味着它们将图像信息存储在彩色方格网格中，也称为位图。
此位图中的方块组合形成一个连贯的图像，很像计算机屏幕上的像素。 光栅图形适用于高度详细的图像，如照片，其中需要指定每个像素的确切颜色。光栅图像具有固定的分辨率，因此增加它们的尺寸会降低图像的质量。
矢量图形格式（如 SVG 和 PDF）的工作方式不同。这些格式将图像存储为一组点和点之间的线。数学公式规定了这些点和线的位置和形状，并在图像按比例放大或缩小时保持它们的空间关系。矢量图形文件还存储颜色信息，甚至可以显示文本。
SVG 文件的工作原理
SVG 文件以 XML 编写，XML是一种用于存储和传输数字信息的标记语言。SVG 文件中的 XML 代码指定构成图像的所有形状、颜色和文本。 让我们看一些例子。我将从绘制一个简单的圆形 SVG 开始
当我在文本编辑器中打开这个圈子的文件时，会出现以下 XML 代码：
如您所见，这里没有太多代码。我们只需要一行代码来画一个圆。那是因为 XML 使用标签为我们完成了大部分工作。
在上面的代码中，标签在尖括号内显示为粉红色。 要绘制圆，XML 代码使用
