来自：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. 40. Combination Sum II(midum, backtrack, 重要)

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  2. 背包DP入门小笔记01背包

    FJUT OJ 2347 http://59.77.139.92/Problem.jsp?pid=2347 采药 TimeLimit:1000MS  MemoryLimit:128MB 64-bit ...

  3. qPCR检测基因表达的引物数据库

    老板推荐了一个专门用来做基因表达定量(qPCR)的引物数据库,还蛮好用的,都是别人实验验证过的,感觉比自己设计的更靠谱一下,附上链接:https://pga.mgh.harvard.edu/prime ...

  4. URL重定向漏洞，python打造URL重定向漏洞检测脚本

    前言: 今天学习了重定向漏洞,这个漏洞比较好理解 漏洞名:URL重定向漏洞 威胁:低 漏洞的来源:开发者对head头做好对应的过滤和限制 例子: 有漏洞的网站:http://a.com/x.php?u ...

  5. Node.js Query Strings

    Query String 稳定性: 3 - 稳定 这个模块提供了一些处理 query strings 的工具,包括以下方法: querystring.stringify(obj[, sep][, eq ...

  6. django模板语言中的extends，block和include

    extends和block一起用 它们用于母版和子版的继承 在母版html中将一些需要替换的部分用{% block xxx %}...{% endblock %}括起来, 在子版html中,在第一行需 ...

  7. opencv之人脸识别

    最近在做一个类似于智能广告投放的项目,简单思路是利用opencv获取摄像头图像,然后调用接口或利用其他一些离线模型进行人脸属性识别,进而投放广告.本篇先简单介绍利用opecv进行人脸识别. # -*- ...

  8. 在Spring Boot框架下使用WebSocket实现聊天功能

    上一篇博客我们介绍了在Spring Boot框架下使用WebSocket实现消息推送,消息推送是一对多,服务器发消息发送给所有的浏览器,这次我们来看看如何使用WebSocket实现消息的一对一发送,模 ...

  9. 第一个Angular2的样例

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

  10. AsyncTask还要知道的一些知识

    在之前的博客中,对AsyncTask做过详细分析,而且也以小案例的形式,介绍如何基本的使用它.今天再来探讨它,更多的认识,尤其在面试中以下面方式回答,可能印象分更多一些. 面试题:讲一讲您对Async ...