SVG是什么?SVG文件指南
SVG是什么?
SVG(可缩放矢量图形)是一种图像文件格式，它结合了形状、线条、曲线、文本和颜色等信息来构建图像。
虽然大多数常见的图像格式(例如JPG、PNG和GIF)将其图像数据记录为像素的特定排列，但SVG文件更像是创建给定图形的“书面指令”或“配方”。这意味着svg(就像一个好的食谱)可以在不损失图像质量和不增加文件大小的情况下放大。
SVG代码是一种基于文本的、人类可读的语言，本质上类似于HTML或XML。
SVG文件是什么样子的?
开放一个非常简单的SVG文件在几乎所有现代网络浏览器中，你都会看到这样的东西:
在文本编辑器中打开相同的SVG文件，您将看到如下内容:
<svg宽度＝＂200＂高度＝＂200＂xmlns＝＂http://www.w3.org/2000/svg＂><圆残雪＝＂One hundred.＂cy＝＂One hundred.＂r＝＂80＂笔划宽度＝＂4＂中风＝＂# 000＂填满＝＂黄色的＂>svg>如示例所示，SVG文档只不过是描述形状、线条、曲线、颜色和文本的纯文本文件。它们可以由人类阅读和编辑，并通过CSS或JavaScript进行操作。这为SVG提供了传统PNG、GIF或JPG图像格式所无法比拟的灵活性和多功能性。
如何制作或编辑SVG文件?
尽管简单的SVG图像(如上面的例子)可以用任何基本的文本编辑器创建，但大多数SVG都是使用现代矢量图形应用程序创建的。流行的SVG编辑器包括:
- Figma
- Adobe Illustrator
- 四四方方的SVG(便宜的)
- SVG编辑器(免费)
这是一个典型的SVG图像示例．这个插图只有60KB，几乎可以在任何在线上下文中使用。作为一个向量，我们可以确定它会立即缩放以满足任何视口或元素宽度的需求。
SVG诞生于20世纪90年代，它可能是“丑小鸭”格式，后来变成了天鹅。最初在21世纪头十年的大部分时间里，支持和忽视都很少，但自2010年代中期以来，情况发生了变化。现在，所有现代浏览器都能完美地呈现SVG，所有严肃的绘图应用程序都提供SVG导出选项。
虽然传统的光栅图形(如jpg和png)仍然更适合于摄影图像，但SVG特别适合于满足当今web开发对可伸缩性、响应性、交互性、可编程性、性能和可访问性的需求。
SVG与HTML5的Canvas相比如何?
这两种技术非常不同，但这个问题经常出现是可以理解的。我们已经分解了每种方法的目的、优点和缺点SVG vs Canvas这样你就能每次都做出正确的选择。
SVG的优点是什么?
SVG的优势在于它可以解决现代web开发中许多最棘手的问题。让我们简单地讲一下其中的一些。
1.可伸缩性和响应性
仔细想想，构成耐克标志的形状、路径和文字，无论你把它们描摹到一张标准的名片上，还是20英尺高的巨型建筑标牌上，都是一样的。只是测量单位发生了变化。SVG允许您构建可以确保在任何大小下看起来都清晰清晰的图像。
相比之下，GIF、JPG和PNG等基于像素的格式就像玩乐高积木。如果你想要更多的尺寸和细节，唯一的解决方案就是添加更多的brick。
尽管各种响应式图像技术已被证明对像素图形有价值，但它们永远无法真正与SVG的无限扩展能力竞争。
2.可编程性和交互性
由于SVG图像由不同的组件组成——形状、线条、曲线和文本——我们总是可以自由地使用脚本和行为来针对这些组件。所有类型的动画和交互都可以通过CSS和/或JavaScript添加到内联SVG图形中。在JPG或PNG中，没有等效的方法来定位图像元素。
3.可访问性
由于SVG文件是基于文本的，因此其中包含的信息总是比像素图像中的内容更容易搜索和索引。这是否意味着SVG本质上是可访问的?不。一个准备不好的SVG并不比一个标签不好的PNG有用。
然而，SVG图表数据比等效的JPG图表更容易提取到屏幕阅读器、搜索引擎和其他文本消费服务。
4.性能
影响网页性能的一个最重要的方面是网页上使用的文件的大小。经过精心准备后，可以使用相对较小的SVG文件显示大而复杂的图像。
SVG的最佳用途是什么?
SVG有一长串实际用例。让我们来探索其中最重要的。
插图和图表
任何适合使用钢笔和铅笔绘制的传统绘画都应该完美地转换为SVG格式。SVG通常用于交付模式3 d打印机，Etsy艺术品，t恤设计，刺绣图案，甚至婚礼策划抵押品．
logo和图标
任何大小的标志和图标都必须清晰和清晰——无论是按钮的大小还是广告牌的大小——这使它们成为SVG的理想候选。此外，SVG图标更容易访问，也更容易定位。
动画
您可以使用SVG图形创建吸引人的动画，包括酷炫的线条绘制效果。事实上，SVG代码可以与CSS动画、JavaScript库和它自己内置的SMIL动画功能交互。
互动性(图表、图表、信息图、地图)
SVG可用于绘制数据并根据用户操作或其他事件动态更新数据。看到交互式SVG信息图而且SVG交互式公路旅行地图．
特效
使用SVG可以实现许多实时效果，包括形状变形或有机粘胶效应．
构建接口和应用程序
SVG使您能够制作复杂的接口组件可以与HTML5、基于web的应用程序和富互联网应用程序(ria)集成。
总结
那么，现在你知道svg是什么，以及为什么svg对Web非常棒。下一步，我建议您检查一下Craig关于在SVG中使用CSS的各种方法的文章，以及在网页中包含svg并对其进行操作的方法。或者如果你想深入研究，可以看看这本书实际的SVG克里斯·科伊尔(Chris coyer)著。
