什么是SVG？

是可缩放填色的矢量图形的格式。SVG Basic又称SVGB，是英语“Scalable Vector Graphics, Basic Profile”的简写，可以翻译为“可缩放的矢量图形标准的基本版”。它是SVG的一个子集，而主要目标是为掌上计算机等高端移动设备提供矢量图形显示格式。SVG格式是XML的一种，SVG文件其实只是普通的文本文件，用一般的文本编辑器便可查看或修改。

SVG主要支持以下几种显示对象：

1.矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等

2.嵌入式外部图像，包括PNG、JPEG、SVG、栅格图层、智能对象等

3.文字对象

设计操作说明：SVG允许3种图形对象类型分别是：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。

SVG格式具有以下优点：

1.图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）

2.与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象

3.SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索

4.SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。

5.SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

SVG格式具有以下缺点：

1.如何和已经占有重要市场份额的矢量图形格式Adobe Animate竞争的问题。事实上，Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件了。

2.SVG的本地运行环境下的厂家支持程度。

3.由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附文件名为 .svgz， 但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用。

4.旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。

实战中，设计师请这样~（全文重要的在这里，与设计人员而言）

一般情况下，编辑SVG图片物料时，务必保证图层都是封闭的形状轮廓图层，每个图层元素之间可以做合并与剪切。不得有描边，如需描边务必转曲。文字类型，也需要转曲成轮廓图层。同时也适用于上传至iconfont中，作为图标文字使用。这类型的图标颜色填充只能是纯色填充，不可做渐变色。一个SVG图片中可以有多个纯色填充。这种方式是最保险最稳妥的！

非一般的情况，就是一定要嵌入外部图像素材，包括PNG、JPEG、SVG等时，就需要开发人员提供技术支持，通过代码或者插件方式来实现SVG文件的高度解析。也就是这一种情况容易出现SVG图片显示不全甚至为空。

为什么有时候提供给开发同学的SVG图片会显示不全甚至为空？

以下都是可能解决这个问题方法：

https://blog.csdn.net/MAILLIBIN/article/details/51470121

https://blog.csdn.net/hongsejiaozhu/article/details/46839821

https://blog.csdn.net/weixin_37674736/article/details/82426941

高级知识驾到~

SVG显示

1.插件支持

当前，最常用的SVG插件来自Adobe公司（Adobe SVG Viewer），另外Corel也提供SVG浏览器（Corel SVG Viewer）。然而前者宣布于2009年1月1日停止对该产品的支持。

2.原生支持

比较著名的SVG项目包括Mozilla SVG Project，KDE的KSVG，以及Amaya等。

Mozilla Firefox自版本1.5发行后，即开始支持SVG格式的显示。

Opera 8.0 版开始支持显示Tiny 1.1规格的SVG。

基于Java的SVG项目主要有Batik SVG Toolkit等。

Google Chrome和Safari支持SVG显示。

Microsoft的Internet Explorer 8.0版及其更老的版本尚未支持SVG，直至由Internet Explorer 9.0版开始支持SVG。

3.各种SVG解释器支持程度比较

W3C的SVG网站上有一个测试包可以用来测试SVG解释器对于标准的支持。这个包既可以在线运行也可以下载到本地运行。截至2007年中，对于流行的SVG软件有如下测试结果：

对SVG支持最好的浏览器是Opera，它支持大多数的SVG特性。

作为专门的SVG浏览器，Batik SVG viewer能对大多数特性有良好支持，与Opera不相伯仲。但它不能和浏览器互动。

加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。

Mozilla Firefox 2.0对SVG特性的支持相当弱，许多重要特性如动画等都不能支持。

注意一点：如果开发说你提供的图有问题时，你只要明确自己是按照SVG支持的显示对象规则提供的就没有问题。不是你的错，这个锅我不背~

复习一下：

SVG主要支持以下几种显示对象：

矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等

嵌入式外部图像，包括PNG、JPEG、SVG、栅格图层、智能对象等

文字对象

设计操作说明：SVG允许3种图形对象类型分别是：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。

只要你是这样做的！！！锅就不是你的哟！！！