SVG新手入门实用指南

SVG文件究竟有什么特别之处,它为何如此受欢迎?这篇文章中将为你介绍SVG的优势,为你解答这些疑问。

什么是SVG?

39154774 - design, sharing - 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的主要优势

61513062 - design, sharing - 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的未来趋势如何?

24045028 - design, sharing - SVG新手入门实用指南

SVG的时代才刚刚开始。它被采纳为移动端标准的图像格式,未来它的使用和发展会继续增长。

根据W3G的说法:“目前SVG 2正在开发,将为它加入新的易用更能,并且紧密地与HTML、CSS和DOM集成。另外,不被所有浏览器支持的功能将会被删减。”

其他周边技术也在发展,印刷设备公司正在寻找更好地适用于SVG的印刷工艺,而且业界巨头Adobe和佳能等已经加入此列。在地图和GIS中SVG也被更广泛地使用,可以提供更好的映射和缩放功能。

当你认真思考这个问题,就会发现几乎网络和印刷设计中任何地方都有SVG一展身手的机会。(这个优势很大程度上是因为它是矢量的。)

SVG相关资源

现在你已经了解了一些关于SVG的内容,接下来可以尝试将它投入你的项目了。这里有一些SVG的相关资源,你可以学习、了解和使用:

 

英文来源:Design Shack

英文标题:The Practical Beginner’s Guide to SVG

原作者:Carrie Cousins

翻译:卡米雷特

 

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注