SVG的用法

标签: 技术技巧 SVG | 发表时间:2014-05-26 11:11 | 作者:歪脖骇客
出处:http://www.webhek.com

先让大家感受一下用SVG技术制作的简单动画:

如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器。

如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的。

SVG是一种矢量图格式。SVG是 Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图,但SVG有很多的用法你可能还不知道。

SVG有什么优势?

  • 文件体积小,能够被大量的压缩
  • 图片可无限放大而不失真(矢量图的基本特征)
  • 在视网膜显示屏上效果极佳
  • 能够实现互动和滤镜效果

SVG的制作方法

用Adobe Illustrator设计制作。下面是一张新西兰鹬鸵鸟的图片。

svg kiwi

注意图片多余部分沿边缘被裁掉了。SVG图像的处理方式与PNG和JPG是一样的。

Adobe Illustrator能直接把文件保存成SVG格式。

save-as-svg

当保存的时候,会弹出一个对话框显示保存选项。我对Adobe Illustrator的技术细节并不很了解。 SVG Profiles里有完整的SVG的规范说明。我发现选择SVG 1.1不会有任何问题。

svg-options

有趣的是,你可以选择点击OK保存文件,还可以选择“SVG Code...”,这时它会用文本编辑器打开它。

svg-code

两种方式都很有用。

SVG图片的用法

如果你把SVG保存成文件,你可以直接把它放到 <img>标记里。

  <img src="kiwi.svg" alt="新西兰鹬鸵鸟">

在Illustrator里,它的大小是612px502px。

artboard

这个页面上只能放这么大的图片。当然,你可以向PNG和JPG图片那样改变它的大小。下面是一个例子(三个大小不同的SVG图):

kiwi

kiwi

kiwi

浏览器支持情况

各种浏览器对这种用法的 支持情况不同。当总的来说,除了IE8/6,基本上都支持。

如果你想要在所有浏览器中都支持SVG图片,你可以用Modernizr测试浏览器的支持情况,必要时以普通图片代替:

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

David Bushell有一个 更巧妙的方法,但需要使用JavaScript:

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

你也可以使用 SVGeezy,它是一个JavaScript插件。

SVG背景图的用法

跟SVG图片用法相似,你也可以在背景图( background-image)中使用SVG。

  <a href="/" class="logo">
  新西兰鹬鸵鸟
</a>
  .logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

注意,我们将 background-size的大小设置的跟logo元素的大小一致。我们必须这样做,否则背景图会超出logo元素而隐藏一部分。 background-size的长宽比例要和原图一致。但你可以使用 background-size的常量值 containcover来达到不同的效果。

浏览器支持情况

各种浏览器对以SVG为背景图(background-image)的 支持情况可以在这里看到。但基本来说和SVG图片一样。唯一不支持的浏览器是IE6/8。

Modernizr在这里也能起到作用,而且更高效。如果浏览器不支持SVG背景图时,SVG文件将不会被加载,因为Modernizr在检测到不支持SVG时,在HTML上加了"no-svg"CSS类,于是我们可以这样利用它:

  .main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

另外一个更巧妙的方法是使用多背景图技术。因为各浏览器对SVG和对多背景图技术的支持情况很相似,如果支持多背景图,也会支持SVG,所以,我们的CSS声明可以这样写:

  body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

"inline" SVG的用法

你实际上可以把SVG代码从SVG文件里拷贝出来,直接粘贴掉HTML里使用,它们跟你直接使用普通图片的效果一样。

  <body>

   <!-- 把SVG代码粘贴到这里,图片会显示出来!  -->

</body>

这样做的好处是图片数据就在HTML页面里,不需要浏览器单独执行一次请求下载它。换句话说,它跟使用 Data URI的优势一样。但不好的地方也是一样。比如“臃肿”的页面代码,缓存问题等。

如果你使用后台语言,例如PHP,可以用include函数让页面更整洁:

  <?php include("kiwi.svg"); ?>

优化SVG

你应该不会吃惊:用Adobe Illustrator保存的SVG文件并不是优化过的。里面有DOCTYPE、生成工具署名等无用的信息。SVG文件本身很小,但谁会嫌弃更小?Peter Collingridge有一个在线的 SVG优化工具。传上去大的,下载出小的。

如果你有强迫症,你还可以试试这个 Node JS工具

用CSS控制SVG

你有没有感觉SVG代码跟HTML代码很相似?这是因为它们本质上都是XML。在我们的这个SVG文件中有两个元素,一个 <ellipse> 和一个 <path>。我们可以直接在SVG代码添加CSS类信息,就像跟编写HTML代码一样。

  <svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

现在,页面中的CSS样式对SVG里的元素同样有效。你不需要在SVG代码直接嵌入CSS代码,放在页面任何一个地方都可以,甚至可以放到单独的CSS文件里,使用 <link>标记加载到页面上。你甚至可以对SVG元素使用:hover语法。但请注意,有个别的CSS属性对SVG是不起作用的。例如, background-color对SVG就是无效的,因为SVG里使用 fill属性。

  .kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

更绝妙的是,SVG里可以实现所有的滤镜效果。例如模糊处理。我们来试一下:

  <svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

现在你可以对它运用任何的CSS样式:

  .ground:hover {
  filter: url(#pictureFilter);
}

这里是一个svg滤镜效果的在线演示:

浏览器支持情况

各种浏览器对以SVG为背景图(background-image)的 支持情况可以在这里看到。但基本来说和SVG图片一样。唯一不支持的浏览器是IE6/8。

一种对不支持inline SVG的浏览器的补救方法:

  <svg> ... </svg>
<div class="fallback"></div>

仍然使用Modernizr:

  .fallback { 
  display: none;
  /* 确保尺寸是一样大小 */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}

SVG对象(object)的用法

如果“inline” SVG不合你的胃口(它有自己的弊端,如缓存问题),你可以使用HTML的 <object>标记引用它,这样仍能在浏览器不支持的情况下用CSS进行弥补。

  <object type="image/svg+xml" data="kiwi.svg" class="logo">
  新西兰鹬鸵鸟 <!-- 图片备份支持 -->
</object>

使用Modernizr检测浏览器的支持情况,用CSS进行挽救:

  .no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

这种方法能够很好的利用浏览器的缓存。但是,如果你想让CSS样式也起作用,你不能把这些样式放在外部的CSS样式文件里或防止在页面中的 <style>标记内,你需要把 <style>信息放在SVG文件内部。

  <svg ...>
  <style>
    /* 把你的CSS放到SVG文件内部 */
  </style>
  ...
</svg>

<object> SVG的外部样式的用法

对于SVG,有一种方法可以声明外部样式文件,这可以很好的利用浏览器缓存。但经过我的测试,目前这只在 <object>嵌入式 <object>SVG文件有效。你需要把样式地址写在SVG文件起始位置的 <svg>标记上。

  <?xml-stylesheet type="text/css" href="svg.css" ?>

如果你把这放到HTML代码来,那页面将会瞎掉,什么都不会显示。

SVG Data URI的用法

一种能把SVG压缩的更小的方法是将它转变成Data URI形式。Mobilefish有一个 在线转换工具能做到这些。你只需要简单的将SVG文件的内容粘贴到它的页面的表单里,就能得到转换成base64编码的Data URI数据。但记住把换行符给删掉。这些数据看起来像是密码:

base64-data

你可以把它用在任何的SVG的用法中(除了 <svg>),下面是几个例子:

以SVG为 <img>

  <img src="data:image/svg+xml;base64,[data]>

SVG用在CSS里

  .logo {
  background: url(data:image/svg+xml;base64,[data]);
}

以SVG为 <object>

  <object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>
  fallback
</object>

而且,如果你的SVG在转换成base64编码前里面有嵌入的 <style>信息,如果你把它当成 <object>用,样式仍然有效。

命令行式的SVG转换base64编码工具:

@ chriscoyier @ hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) March 2, 2013

或者,你也可以按照 Mathias Bynens说的

Use openssl base64 < path/to/file.png | tr -d '\n' | pbcopy or cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy to skip writing to a file and just copy the base64-encoded output to the clipboard without the line breaks.

自动生成工具

  • grunticon:

    grunticon能把你指定目录下面的SVG/PNG文件(小图标)输出成3中格式的CSS: svg data urls, png data urls, 和一个对于不兼容浏览器的CSS处理文件。

  • iconizr:

    这是一个PHP命令工具,可以把SVG图片转换成CSS图标(SVG & PNG, single icons and / or CSS sprites),而且对图片进行了优化,而且能输出Sass格式。

(英文: Using SVG.)

相关 [svg] 推荐:

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.

五项Web技术:WebGL和SVG名列其中

- - 脚本爱好者
  Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一,一些没有包含在 HTML5 之内的浏览器技术十分奇妙,包括 WebGL 和 SVG,作者希望通过本文与共同爱好者们分享.   别担心,咱们不去管那些啦,因为有些还远远没有完成呢,在浏览器中见到它们还要等一阵子. 然而,其它已经在浏览器中,或者距离您很近,或者马上就要出现.