HTML5 总结-SVG-5
HTML5 内联 SVG
HTML5 支持内联 SVG。
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
实例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
HTML5 画布 VS SVG
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
HTML5 总结-SVG-5的更多相关文章
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- HTML5实战——svg学习
百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...
- HTML5之SVG
1.背景 SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形.1998年,万维网联盟成立了一个工作组,研发一种通过 XML来表现矢量图形的技术——SVG!由于SVG也是 ...
- 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...
- HTML5之SVG详解（一）：基本概括
转载自:http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html 1.背景 SVG是Scalable Vector Graphics的 ...
- 关于HTML5用SVG画图
SVG在HTML5中的应用 SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签.只要定义好XML属性就能够获得与其一致的图像元素. 使用SVG之前先将标签加入到 ...
- HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js) 也许这么 ...
- 【HTML5】SVG内联
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- HTML5程序设计--SVG
SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...
- HTML5学习--SVG全攻略（基础篇）
明天高级篇 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形.SVG 图像在放大或 ...
随机推荐
- 几篇SIEM文章
http://infosecnirvana.com/tag/siem-rule-types/ http://www.tripwire.com/state-of-security/security-da ...
- Mac 键盘快捷键
标签页和窗口快捷键 ⌘-N 打开新窗口. ⌘-T 打开新标签页. ⌘-Shift-N 在隐身模式下打开新窗口. 按 ⌘-O,然后选择文件. 在 Google Chrome 浏览器中打开计算机中的文件. ...
- 改变QTreeView项高的方法（改变Delegate行高，或者::data取数据的时候，根据Qt::SizeHintRole进行判断）
很久之前写过一篇关于QTreeView快速显示超过千万条数据项的方法,如果说那篇文章讲的是QTreeView的内功的话,今天这篇是讲QTreeView的外功,有时我们想改变视图的数据项的行高,那怎么办 ...
- Codeforces 430B Balls Game（Two Pointers）
[题目链接] http://codeforces.com/contest/430/problem/B [题目大意] 祖玛游戏,给出一个序列,表示祖玛球的颜色序列,三个或者以上的球碰在一起就会发生消除, ...
- Shell 脚本小试牛刀（番外） -- 捷报
捷报 捷报 捷报 捷报 捷报 捷报来袭,本系列的脚本已在Github 上开了版块, 我命名为" easy shell "(点此进入). 眼下已加入前面几期中的脚本,日后还会有很多其 ...
- Docker之dockerfile
一.什么是dockerfile Docker通过对于在dockerfile中的一系列指令的顺序解析实现自动的Image的构建: 通过使用build命令,根据dockerfile的描述来构建镜像: bu ...
- c语言中-----分配内存函数
原型: void * realloc(void *p, size_t size); realloc 可以对给定的指针所指的空间进行扩大 或者 缩小, 原有内存的数据保持不变.当然,对于缩小,则缩小部 ...
- 全面理解js面向对象
前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...
- Java RMI 简介及其优劣势总结
今天,帮别人看UDAS配置问题时,看到采用的是RMI方式的调用,如:rmi://10.20.134.140:2299/DataServer,而且这个端口是被直接硬编码在UDAS的代码中的.既然看到了, ...
- JavaScript 运动框架 Step by step
http://blog.csdn.net/rsj217/article/details/7986905 关于offsetLeft:http://www.cnblogs.com/JackJiang/ar ...