[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
先介绍一下矢量图的概念:
矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。
SVG,VML, HTML5 Canvas 这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。
1. VML
全称Vector Markup Language(矢量可标记语言)。 是微软1999年9月附带IE5.0发布的。
浏览器支持:
Internet Explorer 5++ -- Internet Explorer 8
IE9 以后就支持SVG了。
IE10 就已经把VML作为过时的技术来看待了。
http://msdn.microsoft.com/zh-cn/library/ie/hh801223(v=vs.85).aspx
2. SVG
全称Scalable Vector Graphics(可缩放矢量图形), 是基于xml,用于描述二维矢量图形的一种图形格式。
在 2003 年一月,SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。
浏览器支持:
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
3. HTML5 Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
总结
所以在要在 browser 显示图形, 对于不同的浏览器使用的技术不同。
使用VML绘制图形, 速度是比较慢的。 基本上50个节点加上一些关联页面就会比较钝了。
VML会逐渐的退出。 但是目前IE8 及以下版本的IE浏览器的使用量还是很高。所以必须要兼顾。
HTML5 的标准尚未完全制定, 前途如何尚不可知。浏览器的支持方面也有一些问题。
目前来看,SVG看上去是主流。
不过针对图形绘制方面, 已有很多js library 可以使用, 这些 library已经处理了各浏览器的兼容问题。解决办法就是对于不同的浏览器及版本使用不同的技术绘制。只是对于我们之间使用这些library 来说, 就不再需要关注浏览器兼容的问题了。
比较好的library 有:
raphael(微软较推荐的) , google web toolkit, yui
[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较相关推荐
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言 本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 的补充和实例说明各种技术的使用方式. VML 的用法和实例 引入命名空间之后,就可以 ...
- [Web Chart系列之二] 各种实现js 图表的library汇总与比较
前言 使用js 在浏览器展现图表, 参考系列一 Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 汇总 目前实现web 图表的js library 数量是很多, 此处汇总: Nam ...
- [Web Chart系列之三] 图形布局-Layout
前言 从上一篇: [Web Chart系列之二] 各种实现js 图表的library汇总与比较 的介绍, 目前提供提供绘制矢量图的library 还是很多的. 如果只是需要绘制一些柱状图, 饼图, ...
- [Web Chart系列之五] 图形布局-Circle Layout 之实现
前言 关于Circle Layout 的基本介绍, 可以参考: [Web Chart系列之三] 图形布局-Layout 布局的现实使用状况 这里使用这种布局来布局特定对象的关联. 这里的这些对象类似于 ...
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 用draw2d这个关键字,询问一下谷哥和度娘基本上会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SW ...
- maven mybatis mysql_Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问...
标签: 本篇内容还是建立在上一篇Java Web学习系列--Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Ja ...
- [Web Chart系列之四] 图形布局-Layout 之js设计实现
前言 定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样. 如果使用现有的js library (各种实现js 图表的library汇总与比较) ...
- [Web Chart系列之六] canvas Chart 导出图文件
介绍 使用SVG绘制的图形可以导出为svg 格式的文件,使用浏览器等可以查看. 是否可以导出为png, gif 格式的文件呢? 当然是可以. 只是在 web 直接创建和操作文件是不建议的,而且存在各浏 ...
- [Axis2与Eclipse整合开发Web Service系列之三] 服务端返回值
前言 在前面的三篇中 [Axis2与Eclipse整合开发Web Service系列之一] 生成Web Service Client(将WSDl 转化成 Java代码) [Axis2与Eclipse整 ...
最新文章
- 大家都能读懂的IT生活枕边书
- 关于Advisor注入
- Node.js 使用axios读写influxDB
- linux 进入一个中文乱码的目录的方法
- Python + Selenium + Chrome 使用代理 auth 的用户名密码授权
- Android程序版本更新--通知栏更新下载安装(转)
- 我只注视你全cg存档_在暴戾的他怀里撒个娇 作者:春风榴火全娱乐圈都在等我们离婚作者:魔安...
- 自定义注解判空简单示例
- 20210322 :贪心思想力扣典型题目合集
- 程序员如何开启机器学习之路
- mapbox 加载json数据 和数据中颜色 和高度 并根据数值加载颜色
- zoj 1409 Communication System
- 在苹果Mac的Dock中如何添加AirDrop快捷方式?
- python:numpy.random.shuffle打乱顺序函数
- “ObjectContent`1”类型未能序列化内容类型“application/xml; charset=utf-8”的响应正文。
- geotools等值线生成
- 8000401a错误解决方案(Office Word,Excel,PowerPoit应用程序无法访问)
- Bias and Debias in Recommender System: A Survey and Future Directions学习笔记
- 泰凌微8258入门教程 问题篇②——make Error, section .text loaded at [x,x] overlaps section .retention_data loaded
- 广东工业大学2020级年ACM第一次月赛