来自：http://blog.csdn.net/dawanganban/article/details/18189181

一、什么是SVG

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

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

二、SVG的优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

三、浏览器支持情况

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

四、在HTML页面中嵌入SVG

在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  5. <polygon points="100,10 40,180 190,60 10,60 160,180"
  6. style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
  7. </svg>
  8. </body>
  9. </html>

五、SVG简单实用方法

SVG 有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

我们来看看矩形的例子

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  5. <rect x="20" y="20" width="250" height="250"
  6. style="fill:blue;stroke:pink;stroke-width:5;
  7. fill-opacity:0.1;stroke-opacity:0.9"/>
  8. </svg>
  9. </body>
  10. </html>
  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

我们上面用的是<polygon>标签，用该标签可以创建含有不少于三个边的图形

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <svg width="100%" height="100%" version="1.1"
  5. xmlns="http://www.w3.org/2000/svg">
  6. <polygon points="220,100 300,210 170,250"
  7. style="fill:#cccccc;
  8. stroke:#000000;stroke-width:1"/>
  9. </svg>
  10. </body>
  11. </html>

上面分别定义了三个点的坐标，然后定义了线条的颜色以及填充方式

六、SVG一个实例演示

源代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <svg width="100%" height="100%" version="1.1"
  5. xmlns="http://www.w3.org/2000/svg">
  6. <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
  7. <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/>
  8. <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
  9. <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"/>
  10. <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"/>
  11. <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
  12. </rect>
  13. <g transform="translate(100,100)">
  14. <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
  15. <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
  16. <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/>
  17. <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze"/>
  18. <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/>
  19. <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/>
  20. </text>
  21. </g>
  22. </svg>
  23. </body>
  24. </html>

小强的HTML5移动开发之路（17）——HTML5内联SVG的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  8. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  9. HTML5学习笔记3 内联SVG

    HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...

随机推荐

  1. jquery插件存档

    1.选择插件selectMenu github地址:https://github.com/josiaho/selectMenu 2.选择插件bootstrap_multiselect 官方地址:htt ...

  2. sessionStorage 、localStorage 和 cookie

    localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...

  3. c++ Struct和Class的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能.struct能包含成员函数吗? 能!struct能继承吗? 能!!stru ...

  4. FJUT寒假作业第二周G题解快速幂

    题目来源:http://210.34.193.66:8080/vj/Contest.jsp?cid=161#P6     题意:求n个数字的乘积对c取摸.主要就是有快速幂扩展到广义幂的过程. 首先题目 ...

  5. jQuery 效果 – 滑动

    jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实例 jQue ...

  6. Throughtput收集器

    介绍 JVM里面的Throughtput收集器是一款关注吞吐量的垃圾收集器.该收集器是唯一一个实现了UseAdaptiveSizePolicy策略的收集器,允许用户通过指定最大暂停时间和垃圾收集时间占 ...

  7. javaweb异常提示信息统一处理（使用springmvc，附源码）

    一.前言 后台出现异常如何友好而又高效地回显到前端呢?直接将一堆的错误信息抛给用户界面,显然不合适. 先不考虑代码实现,我们希望是这样的: (1)如果是页面跳转的请求,出现异常了,我们希望跳转到一个异 ...

  8. 独立开发一个云（PaaS）的核心要素, Go, Go, Go!!!

    最近一年的工作,有很大的比重在做云平台的事情,简单来说,就是为公司内用户提供一个PaaS,用户可以在我们的云平台上方便的将单机服务程序扩展为多实例程序,以平台服务化的方式对外提供.在这里简单分享一下. ...

  9. RxJava操作符(09-算术/聚合操作&连接操作)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51692493 本文出自:[openXu的博客] 目录: 算术聚合 Count Concat ...

  10. 联想G510F1F2..功能键和FN+功能键反过来

    进入BIOS, 将HotKey Mode 修改为Disabled,右边有详细说明: