来自：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. Oracle中备份用户对象的两种方法

    方法1: 执行步骤: exp userid=用户名/密码@数据库名 file=c:\emp.dmp 使用当前用户导出 exp userid=sys/sys@数据库名 file=c:\emp.dmp o ...

  2. JAVAEE——BOS物流项目11：在realm中授权、shiro的方法注解权限控制、shiro的标签权限控制、总结shiro的权限控制方式、权限管理

    1 学习计划 1.在realm中进行授权 2.使用shiro的方法注解方式权限控制 n 在spring文件中配置开启shiro注解支持 n 在Action方法上使用注解 3.★使用shiro的标签进行 ...

  3. 为什么《Dive into Python》不值得推荐

    2010 年 5 月 5 日更新:我翻译了一篇<<Dive Into Python>非死不可>作为对本文观点的进一步支持和对评论的回复,请见:http://blog.csdn. ...

  4. Android服务——Service

    服务 Service 是一个可以在后台执行长时间运行操作而不使用用户界面的应用组件.服务可由其他应用组件启动,而且即使用户切换到其他应用,服务仍将在后台继续运行. 此外,组件可以绑定到服务,以与之进行 ...

  5. Linux 性能监测：CPU

    CPU 的占用主要取决于什么样的资源正在 CPU 上面运行,比如拷贝一个文件通常占用较少 CPU,因为大部分工作是由 DMA(Direct Memory Access)完成,只是在完成拷贝以后给一个中 ...

  6. GitLab服务器IP地址设置

    最近使用GitLab 搭建了Git的私有仓库,但是发现私有仓库的地址居然是localhost,不是本机的IP地址,最后百度了一下,找了很久才找到,特此记录一下. 首先说明一下,我linux虚拟机的IP ...

  7. Programming In Scala笔记-第六章、函数式对象

    这一章主要是以定义和完善一个有理数类Rational为线索,分析和介绍有关类定义,构造函数,方法重写,变量定义和私有化,以及对操作符的定义等. 一.Rational类定义和构造函数 1.定义一个空类 ...

  8. Scala：输入输出

    http://blog.csdn.net/pipisorry/article/details/52902694 Scala基本输入输出 从屏幕上读取用户输入 有时候我们需要接收用户在屏幕输入的指令来处 ...

  9. RxJava（01-介绍与初体验）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51612415 本文出自:[openXu的博客] 目录: 一 简介 二 简单使用 初步探索 代 ...

  10. RxJava（四） concatMap操作符用法详解

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/51533282 本文出自:[余志强的博客] concatMap操作符的 ...