SVG图像将称霸2018?快来了解

有时候我们会面临两难选择:使用高分辨率的图片,就免不了长时间加载,反之亦然。而有了SVG,这个问题也许可以得到解决。

SVG易于使用和制作,你不需要修改现有的文件,只需要今后使用SVG作为图像格式。下面这些是关于SVG你需要的知识。

13380351 - design, sharing - SVG图像将称霸2018?快来了解

SVG是为网络而生的

Mozilla这样描述SVG:

SVG是基于XML的用于描述矢量图的语言,和HTML相似,而你有很多不同的元素可以用来定义形状和效果。SVG用于标记图形而非内容,例如通过<circle>和<rect>标签(分别是圆和矩形),你可以创建最简单的形状元素。更高级的包括<feColorMatrix>(使用矩阵转换颜色),<animate>(矢量图动画部分)和<mask>(在图像上进行图像叠加)。

SVG最大的好处就是,可以使用代码或文本编辑器来创建简单的图形,而比较复杂的图形也可以通过Adobe Illustrator等矢量编辑软件来创建。SVG文本是可访问的,很容易用脚本和样式来修改,并且它是矢量格式的,意味着尺寸很大也没有问题。SVG收到所有现代浏览器的支持,可压缩并具有前瞻性。

SVG的一个缺点是创建和设计起来比较复杂,而且低版本的浏览器无法识别。这里是一篇关于SVG的入门文章

29232603 - design, sharing - SVG图像将称霸2018?快来了解

SVG可以拿来做什么?

SVG的一大优势就是,你可以拿来做很多事情,比如:

  • Logo
  • 背景、图案和纹理
  • 动画
  • 交互式图像
  • 图标

设计师完全可以让SVG来做矢量图形可以做的工作,在一定情况下可以代替JPG、PNG甚至GIF。

矢量格式

尽可能多地使用矢量图形是有好处的,因为它可以在任何分辨率下有良好的表现,这是SVG的突出优点,这可以让你的图片在任何设备上都很好看。

还有个SVG的优势在于,你不需要因实现他们改变你的工作流程。如果你使用Illustrator或Sketch等来设计,除了最终导出的步骤之外没有任何区别。有个问题就是,你可能需要将使用到的文字进行转曲,很多人都是这么做的。

准备SVG文件的时候,有一件事要牢记,那就是尽可能让他们别太大,删除不需要的任何东西(清除你的剪贴板)。你可以看一些SVG的绘制技巧,以及如何更好地进行保存。

基于文本的格式有利于SEO

使用SVG会稍稍对SEO更有利,因为他们使用了文本来描述图形,搜索引擎可以更好地识别它们。

诚然你会说,对于一般图片也可以加alt标签来描述,但留给关键词的空间毕竟是有限的。使用SVG你可以创建对搜索引擎更友好的图片。Google会将SVG的内容索引,包括单独的文件和转化后的图像。

SVG很轻巧

不像其他可能很臃肿的矢量文件,SVG仅仅是代码,代码快捷而简单……至少基本如此。

当你将矢量图保存为SVG的时候,请检查文件的大小再做决定。当带有透明度的时候,PNG格式的尺寸几乎指数级增长,而SVG的大小仅仅关于路径的数量。

如果SVG很大,请尝试导出JPG或PNG文件。尽管这看起来很矛盾,但现实中大多数设计师都是混用这几种格式的,只不过SVG占到的比例明显增加了。

便于编辑

如果曾经用矢量软件绘制过图标或Logo,制作SVG对你来说是小菜一碟。

但是如果你用代码来编辑SVG,那会是一种享受。你只需要修改一个关键字、坐标或颜色,然后保存文本——BOOM——图像就变啦!没什么比这更简单了对吧。

SVG支持静态图像,也支持动画

并不像其他图片格式,几乎是为静态或动态专门准备的,SVG可以兼顾两者。并且,对于SVG来说,创建静态图像和动态并不会有太大差别。(这里是下图的教程

88148785 - design, sharing - SVG图像将称霸2018?快来了解

读完这里关于SVG的优势可以,你可以认识到它对于前端设计师是很重要的。而你不需要学什么新技巧,你已经有能力使用SVG了!

2018年,SVG可能会称霸互联网,因为——实用。

 

英文来源:DesignShack

英文标题:How (& Why) SVG Is Going to Take Over in 2018

原作者:Carrie Cousins

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

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

卡米雷特

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

您可能还喜欢...

发表评论

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