来自：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. Ubuntu16.04下安装jdk1.8过程

    笔者环境:腾讯云服务器 Ubuntu16.04 x64 一 . 去oracle官网下载对应的jdk 下载地址:http://www.oracle.com/technetwork/java/javase ...

  2. Java面试19|过于深入的问题

    1.synchronized关键字的实现原理 可以参考:http://www.jianshu.com/p/c5058b6fe8e5 2.CAS是由Unsafe类的compareAndSwap()方法实 ...

  3. Windows环境下，从零开始搭建Nodejs+Express+Ejs框架（一）---安装nodejs

    第一步,安装nodejs https://nodejs.org/en/download/ 这个是nodejs的官网,由于操作系统是win7 64位的,所以,我下载的是node-v8.11.1-x64的 ...

  4. 第一个Angular2的样例

    欢迎跟我一起学习Angular2 本文根据angular2官网手动敲码得来: 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 - 开发环境搭建 - 配 ...

  5. java实例化对象

    摘要:分享牛,分享牛分享,java类加载机制,java实例化对象,java实例化对象机制,java基础. java是如何实例化对象的呢?以及实例化对象的先后顺序是什么?下面我们以测试的方式说明. 1. ...

  6. App安全（一） Android防止升级过程被劫持和换包

    文/ Tamic 地址/ http://blog.csdn.net/sk719887916/article/details/52233112 前言 APP 安全一直是开发者头痛的事情,越来越多的安全漏 ...

  7. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

  8. Xcode7.3.1中SKAudioNode在Scene转换后无声的问题

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在新的Xcode中之前可以正常运行的SKAudioNode代码 ...

  9. springMVC+Hibernate4+spring整合实例二（实例代码部分）

    UserController.java 代码: package com.edw.controller; import java.io.IOException; import java.io.Print ...

  10. Java基本语法-----java二维数组

    由于word里的样式在csdn上调太麻烦了,所以我再次贴图了,后面二维数组那里是文字的,大家将就看吧. 二维数组常见的操作: 1.遍历二维数组 2.对二维数组求和 class Demo { // 定义 ...