使用可缩放矢量图形的好处
可缩放矢量图形或SVG在当今的网站设计中发挥着重要作用。 如果您目前没有在您的网页设计工作中使用SVG，那么您应该开始这样做的原因以及可以用于不支持这些文件的旧浏览器的回退。
解析度
SVG最大的好处是独立于分辨率。 由于SVG文件是矢量图形而不是基于像素的光栅图像，因此可以调整大小而不会丢失任何图像质量。 当您创建响应式网站时，此功能尤其有用，因为这些网站需要在各种屏幕尺寸和设备上看起来很好，并能够很好地工作 。
SVG文件可以放大或缩小，以适应响应式网站不断变化的大小和布局需求，而且您无需担心这些图形质量受到影响。
文件大小
在响应式网站上使用光栅图像（JPG，PNG，GIF）的挑战之一是这些图像的文件大小。 由于栅格图像不会按照矢量图像的方式进行缩放，因此您需要以最大尺寸显示基于像素的图像。 这是因为您可以始终使图像变小并保持其质量，但对于增大图像的效果并非如此。 最终的结果是，您经常拥有的图像比在人物屏幕上显示的图像大得多，这意味着他们无需被迫下载一个非常大的文件。
SVG解决了这个挑战。 由于矢量图形是可缩放的，因此无论需要显示多大的图像，您都可以拥有非常小的文件大小。 这最终将对网站的整体性能和下载速度产生积极影响。
CSS样式
SVG代码也可以直接添加到页面的HTML中。 这就是所谓的“内联SVG”。使用内联SVG的好处之一是，由于图形实际上是由浏览器根据您的代码绘制的，因此不需要发出HTTP请求来获取图像文件。 另一个好处是内联SVG可以用CSS进行样式化。
需要更改SVG图标的颜色？ 不需要在某种编辑软件中打开该图像并再次导出和上传文件，只需使用几行CSS即可更改SVG文件。
您还可以在SVG图形上使用其他CSS样式来改变悬停状态或某些设计需求。 你甚至可以动画这些图形来为页面添加一些移动和交互性。
动画
由于内联SVG文件可以使用CSS进行样式化，因此您也可以使用CSS动画。 CSS转换和转换是向SVG文件添加一些生命的两种简单方法。 您可以在页面上获得类似Flash的丰富体验，而不会屈服于今天在网站上使用Flash的缺点 。
SVG的用途
像SVG一样强大，这些图形无法取代您在网站上使用的所有其他图像格式。 需要深色深度的照片仍然需要是JPG或PNG文件，但像图标这样的简单图像非常适合作为SVG执行。
SVG也适用于更复杂的插图，如公司徽标或图表和图表。 所有图形都将受益于可扩展性，能够使用CSS进行样式设计，以及本文中列出的其他优点。
支持较旧的浏览器
目前对SVG的支持在现代Web浏览器中非常出色。 唯一真正缺乏对这些图形支持的浏览器是旧版本的Internet Explorer（版本8及以下版本）和一些旧版本的Android。 总而言之，只有很少一部分浏览人口仍然使用这些浏览器，而且这个数字还在继续缩小。 这意味着SVG可以在今天的网站上相当安全地使用。
如果您确实想为SVG提供回退功能，则可以使用Filament Group中的类似Grumpicon的工具。 该资源将为您的SVG图像文件创建旧版浏览器的PNG回退。
由Jeremy Girard于17年1月27日编辑