SVG新手入门实用指南
SVG文件究竟有什么特别之处，它为何如此受欢迎？这篇文章中将为你介绍SVG的优势，为你解答这些疑问。
什么是SVG？
SVG全程是可缩放矢量图形（Scalable Vector Graphics），是专为网络开发的矢量图形格式。如果你不知道什么是矢量图形，可以看一下这篇文章。
由于高清显示器的快速发展，这种格式越来越流行。因为在高精度显示下，用户可以看到更多像素细节，而SVG是一种矢量格式，无论大小如何，图像的渲染方式和细节都呈现相同的效果。
这种标记语言最早是由万维网联盟（World Wide Web Consortium，一般称为W3C）在1999年开发的。W3C将SVG定义为：带有系列脚本接口的描述二维平面应用程序和图像的标记语言。它被现代浏览器支持，可用于任何设备，你不必担心它在呈现上的表现。
实际应用
那么，为什么SVG越来越流行，越来越多的设计师喜欢它呢？原因很简单——实用。
SVG文件轻巧又具有可拓展性。尽管SVG最适合用于图形的呈现，但也被用在各个场合。品牌Logo、图标、UI元素和许多其他内容都可以用SVG形式。SVG的最大优势仍然是矢量，同一文件在任何大小的情况下都可以使用（对于一般图片来说，尺寸太大会导致体积过大）。
SVG图像易于操作和控制，不仅可以用作静态图像，还可以加入交互元素或支撑动态图像。
一般情况下，SVG被用于以下情况：
- Logo或图像
- 作为背景图片
- 作为项目，比如按钮
- 地图
- 图表或路径
通常来书哦，SVG最适合随着时间或设备而进行变化的图像，包括动画和动态效果，因此类似Logo、草图、形状、图形、图表或其他简单图像都是可以的。
SVG的主要优势
为什么要抛弃我们可靠的JPG、GIF等格式而用SVG呢？下面这些因素你可以考虑在内，来决定是否在你的项目内使用SVG（SVG还具有印刷潜力）。
- SVG是个矢量格式。在进行响应式设计的时候这一点很重要，因为图像需要在各种设备上呈现。而有时一个比较小的SVG文件，就可以代替各种尺寸的图像进行适配。
- SVG的图像和行为是基于XML定义的，这意味着可以被索引、脚本化和压缩。
- 使用SVG你几乎可以做任何其他图像可以做的事情，比如加入各种设计技巧。比如滤镜、混合模式、布尔效果、颜色、裁剪、遮罩和阴影，这些都很容易实现。
- SVG文件是可访问的。
- SVG使用开放Web标准。
- 你可以用代码来绘制SVG，或使用矢量软件。你可以根据所处的专业领域和专业水平自由选择。
- SVG文件比较小，还可以进一步压缩。这意味着原本占去很多流量的图片变小了，可以减少加载时间。速度快总是好事。
SVG的不足
看完上面的优势，你可能被SVG的魅力折服。但SVG也有不足之处，需要你思量。
- 不兼容旧版浏览器，比如Internet Explorer 8（IE8）或更早的版本。你可以找到一些解决方法（置之不理也问题不大），但你要记住可能有些用户看不到你的图像。
- SVG在复杂图像上不适用，比如照片。它是为图形和线条专门设计的。
SVG的未来趋势如何？
SVG的时代才刚刚开始。它被采纳为移动端标准的图像格式，未来它的使用和发展会继续增长。
根据W3G的说法：“目前SVG 2正在开发，将为它加入新的易用更能，并且紧密地与HTML、CSS和DOM集成。另外，不被所有浏览器支持的功能将会被删减。”
其他周边技术也在发展，印刷设备公司正在寻找更好地适用于SVG的印刷工艺，而且业界巨头Adobe和佳能等已经加入此列。在地图和GIS中SVG也被更广泛地使用，可以提供更好的映射和缩放功能。
当你认真思考这个问题，就会发现几乎网络和印刷设计中任何地方都有SVG一展身手的机会。（这个优势很大程度上是因为它是矢量的。）
SVG相关资源
现在你已经了解了一些关于SVG的内容，接下来可以尝试将它投入你的项目了。这里有一些SVG的相关资源，你可以学习、了解和使用：
- Adobe Illustrator关于SVG的讲解（Exporting SVG for the Web with Adobe Illustrator）
- 将SVG嵌入HTML页面（Embed SVG Directly into HTML Pages）
- 使用SVG视频（Up and Running with SVG Video Series）
- SVG配置文件（SVG Profiles）
- CSS技巧：使用SVG（CSS Tricks: Using SVG）
英文来源：Design Shack
英文标题：The Practical Beginner’s Guide to SVG
原作者：Carrie Cousins
翻译：卡米雷特
