栅格图可以实现图片的清晰显示，但这也意味着，如果要在各种设备上使用栅格图，那么在使用的时候就会产生为了适配各种尺寸的设备，而增加大量不同规格的栅格图。这也直接导致了资源文件体积的增大，矢量图就不存在这个问题，本篇文章将SVG代码编写和Pixso设计工具结合在一起来介绍SVG的基础知识。
什么是 SVG
SVG（Scalable Vector Graphics）是一种图像文件格式，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。它是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的，Web图形页面。
用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG格式图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
为了直观展示SVG代码，我将用Pixso制作一个矩形，来展示SVG代码。
（Pixso可以绘制出一些常见的图形）
在Pixso软件中制作一个矩形，直接导出SVG格式文件
打开导出来的.svg格式文件，你可以看到相应的SVG代码：
使用矩形工具绘制的图形，对应的就是SVG中的<rect>标签。一个基本的<rect>标签由四个基本属性定义：矩形的起点坐标x和y以及矩形的width和height
当<rect>的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格式。
（图片来自Pixso社区）
logo和图标
logo和图标都追求清晰锐利，因此，SVG是logo和图标的最佳格式，并且，SVG格式图标更易于访问且更易于定位。例如Pixso官网logo:
动画
你可以创建吸引人的动画，例如：
你可以使用 SVG格式图形的炫酷线条绘制效果。例如：
（图片来自Pixso社区）
SVG代码可以与 CSS 动画以及 JavaScript 及其内置的 SMIL 动画功能进行交互。
交互性（图表、图形、信息图表、地图）
SVG可用于绘制数据并根据用户操作或其他事件动态更新数据。
（图片来自Pixso社区）
特殊效果
使用SVG可以实现许多实时效果，包括形状变形或不同的粘性效果，例如在Pixso制作的带外阴影的椭圆：
构建接口和应用程序
我们可以用SVG制作具有难度的接口，并与HTML5，基于Web的应用程序和Internet应用程序（RIA）相结合。
支持SVG的浏览器
目前，大多数现代Web浏览器都支持SVG最重要和最基本的功能。下图是浏览器的支持度：
读到这里，我想你应该对SVG已经有初步的认识了。不过，“纸上得来终觉浅”，作为UI设计师，你还需要进行大量的实践练习。上文多次提到的Pixso设计工具，是一款新一代设计协作工具。可以无缝衔接以往工作，支持SVG、Sketch、XD等文件导入导出，是你进行UI创作练习的实用工具。要想浏览更多插画、图标，可以点这里进入（Pixso社区）
