百度百科:

  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>

文章转自:http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html

深入学习:http://www.runoob.com/svg/svg-tutorial.html

svg学习的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. HTML5实战——svg学习

    百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...

  3. SVG 学习(一)

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...

  4. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  10. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. oraclize预言机资料

    oraclize预言机资料 智能合约如何可信的与外部世界交互: https://blog.csdn.net/sportshark/article/details/77477842 国外一篇讲得很详细的 ...

  2. tomcat 运行机制

    先不去关技术细节,对一个servlet容器,我觉得它首先要做以下事情:1:实现Servlet api规范.这是最基础的一个实现,servlet api大部分都是接口规范.如request.respon ...

  3. Python—元组(戴上了枷锁的列表)

    一.概念 元组属于不可变序列,元组是包含多个元素的类型,元素之间用逗号分割.例如:t1=123,456,“hello”元组可以是空的,t2=()元组包含一个元素时:t3=123,元组外侧可以使用括号, ...

  4. USACO 1.1.3 Friday the Thirteenth 黑色星期五

    Description 13号又是一个星期5.13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数.给出N年的一个周期,要求计算1900年1月1日至 ...

  5. lintcode-197-排列序号

    197-排列序号 给出一个不含重复数字的排列,求这些数字的所有排列按字典序排序后该排列的编号.其中,编号从1开始. 样例 例如,排列 [1,2,4] 是第 1 个排列. 思路 参考http://www ...

  6. 《Debian标准教程》摘录2则

    1.克隆Debian系统 如果使用的Debian系统只有使用apt安装的软件包,可以使用下面的脚本来安装一个完全一样的新系统. #在源主机上 dpkg --get-selections > se ...

  7. Hive整体优化策略

    一 整体架构优化 现在hive的整体框架如下,计算引擎不仅仅支持Map/Reduce,并且还支持Tez.Spark等.根据不同的计算引擎又可以使用不同的资源调度和存储系统. 整体架构优化点: 1 根据 ...

  8. MVC学习笔记:入门

    1.controller/action action直接返回字符串,适用于不需要返回大量html的业务,类似一般处理程序. 如果需要返回大量html代码,需要返回view(); View文件夹中需添加 ...

  9. Kubernetes初探 :总体概述及使用示例

    Kubernetes是Google开源的容器集群管理系统.它构建于docker技术之上,为容器化的应用提供资源调度.部署运行.服务发现.扩容缩容等整一套功能,本质上可看作是基于容器技术的mini-Pa ...

  10. BZOJ 1834 网络扩容(最大流+费用流)

    对于第一问,直接求最大流. 对于第二问,建源点s和汇点t,s连1容量为INF,费用为0的边,n连t容量为最大流+k,费用为0的边.这样就把最大流限制为最多增加k了. 限制需要求扩充的最小费用,原图的边 ...