原文:What is an SVG File,作者:Kolade Chris

SVG 意思是可缩放矢量图形。它是一种 web 友好的基于矢量的文件格式,用于在 Internet 上呈现二维图像。

你可以通过扩展名 .svg 来识别 SVG 文件。

与其他流行的图像格式(如 PNG、JPEG 和 JPG)不同——它们以像素的形式存储图像信息,因为它们是基于光栅的格式——SVG 将图形信息存储为一组点和线。

这意味着无论 SVG 文件如何重新加工、缩放或调整大小,它们都不会像 PNG、JPG 和其他光栅图像那样变得模糊和像素化。

本文将向你展示 SVG 图像文件的可能性,以及如何通过编码为自己制作一个 SVG。

文章目录

如何制作 SVG 文件

如何使用图像编辑程序制作 SVG

你可以使用 Adobe Illustrator、CorelDraw、Adobe Photoshop、Microsoft Visio 和 GIMP 等图像编辑软件制作 SVG 文件。

有了这些程序,当需要绘制 SVG 时,你就可以任意发挥了。

这取决于你对这些程序的了解和经验。

此外,如果使用 Google Docs 创建插图和绘图,可以将它们导出为 SVG。

如何使用 XML 制作 SVG

如果你不知道如何使用上面列出的图像编辑程序,但你可以编写代码,则可以使用 XML 编写 SVG。

要编写 SVG 代码,请创建一个.svg扩展名为的文件:
ss1

第 1 步:定义 SVG 的开始和结束标签

<svg>
    <!--  -->
</svg>

第 2 步:在标签内定义版本和 xmlns 属性,分别设置为 1.1"http://www.w3.org/2000/svg"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    
</svg>

第 3 步:在自闭合标签中指定要绘制的形状。例如,<rect> 绘制矩形。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect />
</svg>

第 4 步:指定你想要设置的宽度和高度。

 width="200" height="100"

第 5 步:设置 fill 属性来设置要填充形状的颜色。

fill="#2ecc71"

代码如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" />
</svg>

最后,这就是显示器中显示的内容:
ss2

你还可以使用 rxry 属性在 xy 轴上定义边界半径:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" rx="4" ry="4" />
</svg>

ss3

绘制 SVG 后,你就可以将其用作引入图片时 src 的值:

<img src="svgdraw.svg" alt="A rectangle made with SVG" />

如果需要,可以将 SVG 直接嵌入到 HTML 代码中:

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="#2ecc71" />
    </svg>
</body>

SVG 文件有什么用途

因为 SVG 文件始终不变,所以网站图标和徽标通常是用它们制作的。

SVG 的一个显著优势是其中的文本可以被 Google 等搜索引擎读取,因此 SVG 文件用于制作信息图表和插图。

如何打开 SVG 文件

Google Chrome、Edge、Safari 和 Firefox 等现代浏览器具有内置功能,可以使用它们打开 SVG 文件。

你还可以在可用于制作它们的专用编辑软件中打开 SVG 文件。例如 Adobe Illustrator、CorelDraw、Adobe Photoshop、Microsoft Visio 和 GIMP。

如果要编辑 SVG 文件,可以使用 VS Code、Atom 和 Sublime Text 等代码编辑器打开它们,然后进行编辑。

如何将 SVG 文件转换为图像

如果要将 SVG 转换为其他图像格式,例如 PNG 和 JPG,可以使用 Adobe Photoshop 等图像编辑程序。

你还可以使用名为 Convertio 的在线工具。

你需要做的就是上传你的 SVG,然后选择你想要转换的格式。
ss4

小结

你应该使用 SVG 的原因有很多。

所有这些原因中我最喜欢的是搜索引擎可以读取 SVG 文件上的文本。这是因为 SVG 文件是用纯 XML(用于传输数字数据的标记语言)编写的。

如果 Google 和其他搜索引擎在 SVG 文件中找到相关关键字,则可以极大地促进 SEO (搜索引擎优化)。

感谢你阅读本文。