什么是SVG?有什么用?

2020.06.13 -

   

可缩放矢量图形(缩写为SVG)可以定义为从XML或HTML代码创建的图像类型。与其他格式的图像不同,SVG完全由代码组成,因此可以通过更改代码来编辑或更新图像。

对于要创建SVG格式图像的人来说,具有Web开发编码语言(如XML和HTML)的工作知识至关重要,因为如果不了解XML和HTML,就无法创建或编辑SVG格式的图像。

SVG

SVG有什么用?

在很多方面,SVG实际上使事情变得很容易。正如我们前面所讨论的,在设计具有惊人外观的Web应用程序时,它非常有用。使用SVG格式创建的图形使用户可以非常交互地使用该应用程序。当您需要在Web应用程序中的任何位置使用图形组件时,这将非常有用。

连同HTML代码,您必须编写SVG标签才能将其功能引入网页。如果要绘制简单的界面,则可以在几行内完成,但是如果图形应该有点复杂,则需要编写较长的HTML或XML代码。通过集成圆形,正方形,矩形等较简单的图形组件,可以设计出复杂的图形。

如何使用SVG

为了学习如何使用SVG,我们将遍历为开发SVG图形而必须编写的代码行。我们将考虑一个示例,在该示例中,我们将设计一个填充有红色和黑色边框的简单圆圈。我们将使用HTML编写代码,并将使用SVG标签在网页中引入图形。

HTML中的代码

在上面的代码中,我们使用SVG标签及其重要属性编写了SVG图形。在带有SVG标签的第一行中,我们提到了圆的宽度和高度。在第二行中,我们使用了circle标签,该标签可用作SVG标签下的子标签。Cx是圆形标记的属性,用于定义圆形必须在x轴上覆盖多少像素。Cy是圆形标签的属性,用于定义圆形必须在y轴上覆盖的像素数量。属性r定义圆的半径。

描边定义边框的颜色,在我们的例子中为黑色。下一个属性stroke-width定义了可以提供的圆的宽度(以像素为单位)。填充了圆形标签的最后一个属性,该属性用于定义圆形中必须填充的颜色。

我们选择了红色,因此在输出中您将能够看到圆圈中填充了红色。如果要使用SVG代码,则只需复制上图中的代码,将其保存为HTML扩展名,然后查看输出内容即可。您可以让他们不断修改以学习或探索更多内容。

可缩放矢量图形是具有二维图形的图像的特殊格式。根据要求,可以使用任何格式的图像,但是使用SVG会有所不同,因为它是使用代码行而不是使用图形设计工具开发的。它主要用于Web应用程序,因为它必须使用XML或HTML标记编写。可以利用它来使Web应用程序具有很好的交互性,以增强用户的体验。

本站文章禁止转载,违者必究
阅 169
1

可缩放矢量图形(缩写为SVG)可以定义为从XML或HTML代码创建的图像类型。与其他格式的图像不同,SVG完全 […]

湘公网安备 43011102001693号

    湘ICP备19003021号-1