html5+svg学习指南之SVG基础知识


Posted in HTML / CSS onDecember 17, 2014

百度百科:

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

什么是SVG?

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

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

SVG 使用 XML 格式定义图形

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

SVG 是万维网联盟的标准

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

Canvas 和 SVG 的区别:

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

特点:

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

特点:

 

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

svg 例子:


复制代码
代码如下:

<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>

html5+svg学习指南之SVG基础知识

HTML / CSS 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 #HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 #HTML / CSS
使用canvas绘制超炫时钟
Dec 17 #HTML / CSS
24个canvas基础知识小结
Dec 17 #HTML / CSS
html5使用canvas绘制文字特效
Dec 15 #HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 #HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
基本DOM节点操作
2017/01/17 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
详解Python字符串对象的实现
2015/12/24 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
计算机售后服务承诺书
2014/05/30 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
营销计划书范文
2015/01/17 职场文书
教师个人师德总结
2015/02/06 职场文书
考研英语辞职信
2015/05/13 职场文书
历史博物馆观后感
2015/06/05 职场文书
PHP实现两种排课方式
2021/06/26 PHP