Bradon Tang

一个不仅有梦想而且勤奋的文艺青年……

百赞达人设计

我设计的图标——朴素

我设计的天虹超市 app

我设计的引导页

我设计的友友app,六度人脉,发现更多志同道合的人

HTML5/CSS3系列教程:使用SVG图片

极客标签编程学习和分享平台:

日期:2013-3-25  来源:GBin1.com

在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG

SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生!

为什么使用SVG?
  • 文件非常小

  • 能够无损失的缩放尺寸

  • 在Retina显示屏上效果超棒

  • 能够控制图片样式设计,例如互动和过滤filter

浏览器支持
  • IE8及其更低版本不支持

  • Android 2.3及其更低版本不支持

  • 其它浏览器都支持

如果你需要支持这些版本的浏览器的话,你可以使用Modernizr,如下:

if (!Modernizr.svg) {
  $(".gblogo img").attr("src", "images/logo.png");
}

或者使用如下更简单的代码:

<img src="gblogo.svg" onerror="this.onerror=null; this.src="gblogo.png"">......

via 极客标签

来源:HTML5/CSS3系列教程:使用SVG图片



冷知识之SVG

熊:

SVG的好处真的是太多了:(整理自百度百科)

SVG 可被非常多的工具读取和修改(比如记事本)且文本独立

SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。超强显示效果,超级颜色控制

SVG 是可伸缩的任意缩放的,图像可在任何的分辨率下被高质量地打印

SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash, Flash已经不在WEB上流行了,所以。。

具有交互性和动态性你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等),或通过脚本定义来达到高亮显示、声音、动画等效果

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

下面放一个世界地图,随便用的:

世界地图SVG 链接(http://upload.wikimedia.org/wikipedia/commons/0/03/BlankMap-World6.svg)



使用Snap.svg类库实现的抖动式的幻灯播放效果

极客标签编程学习和分享平台:

在线演示

本地下载

这个幻灯中,使用了SVG来生成具有动画弧度的幻灯背景效果,如果你在项目中能够支持现代浏览器的话,尝试一下这个效果吧,很赞!

想了解基础使用,观看这个轻视频吧:Snap.svg处理和操作SVG图形