格栅图可以实现图片的清晰显示，但这也意味着如果要在各种设备上使用格栅图，就会增加大量不同规格的格栅图，以适应各种尺寸的设备。这也直接导致资源文件体积的增加，矢量图没有这个问题。本文将SVG代码编写与即时设计工具相结合，介绍SVG的基础知识。

什么是 SVG

SVG（Scalable Vector Graphics）它是一种图像文件格式，意思是可缩放矢量图形。它是基于XMLL的。（Extensible Markup Language），World Wide Web Consortium（W3C）该联盟正在开发中。它是一种开放的标准矢量图形语言，可以让你设计出令人兴奋、高分辨率、Web图形页面。

用户可以直接使用代码绘制图像，使用任何文本处理工具打开SVG格式图像，通过改变部分代码使图像具有交互功能，并可以随时插入HTML通过浏览器观看。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/?source=csdn&plan=btt065

为了直观地显示SVG代码，我将使用即时设计制作一个矩形来显示SVG代码。

在即时设计软件中制作矩形，直接导出SVG格式文件

打开导出的.SVG格式文件，您可以看到相应的SVG代码

使用矩形工具绘制的图形对应于SVG中的标签。基本标签由四个基本属性定义：矩形的起点坐标x和y、矩形的width和height

当width与height值相等时，就会画出一个正方形。

SVG是可读的，易于理解和修改的，作为内联 SVG嵌入 HTML 文档时，可以通过 CSS 或 JavaScript 操作 SVG代码。因此， SVG格式与传统 PNG、GIF 或 JPG 与图形格式相比，它更具灵活性和多功能性。

SVG的优点是什么？

SVG在应用过程中也有非常明显的优势。例如：

可扩展性和响应性

SVG使用形状、数字和坐标在浏览器中呈现图形，可以避免分辨率的影响，并具有无限的可伸缩性。SVG格式可以结合不同的形状、路径和文本元素来创造各种视觉效果，在任何尺寸下都非常清晰。相反，格栅格式（如GIF）、JPG和PNG)它们有固定的尺寸，所以它们在收缩时是像素化的。

可编程性和交互性

SVG格式可以编辑和编写脚本，所有类型的动画和交互都可以通过CSS和/或JavaScript添加到内联SVG图形中。

可访问性

SVG文件是基于文本的，所以当它嵌入到网页中时，它可以被搜索和索引。此外，还可以访问屏幕阅读器、搜索引擎和其他设备。

性能

影响网页性能的最重要因素之一是网页中使用的文件大小。SVG图形通常比位图文件格式小。

常见的 SVG实例

插图和图表

任何适合用钢笔和铅笔制作的传统绘图都应该完美地转化为 SVG格式。

标志和图标

logo和图标都是清晰锐利的。因此，SVG是logo和图标的最佳格式，SVG格式图标更容易访问和定位。

免费的SVG图标分享https://js.design/community?category=detail&type=resource&id=65f1764f7ad3cda67792c650&source=csdn&plan=btt065

动画

您可以创建吸引人的动画，例如：

你可以使用 SVG格式图形的酷线画效果。

SVG代码可以和 CSS 动画以及 JavaScript 及其内置的 SMIL 交互动画功能。

交互性(图表、图形、信息图表、地图)

SVG可用于绘制数据，并根据用户操作或其他事件动态更新数据。

特殊效果

使用SVG可以实现许多实时效果，包括形状变形或不同的粘度效果，如带有外阴影的椭圆：

构建接口和应用程序

我们可以用SVG制作难度接口，并与HTML5、基于Web的应用程序和Internet应用程序进行合作（RIA）相结合。

支持SVG的浏览器

目前，大多数现代Web浏览器都支持SVG最重要、最基本的功能。

读到这里，我想你应该对SVG有一个初步的了解。然而，作为一名UI设计师，你仍然需要做很多实践。上述多次提到的即时设计工具是新一代的设计合作工具。它可以无缝地连接以前的工作，并支持SVG、Sketch、XD等文件的导入和导出是您进行UI创作练习的实用工具。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/?source=csdn&plan=btt065