百度百科:

  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. TensorFlow | ReluGrad input is not finite. Tensor had NaN values

    问题的出现 Question 这个问题是我基于TensorFlow使用CNN训练MNIST数据集的时候遇到的.关键的相关代码是以下这部分: cross_entropy = -tf.reduce_sum ...

  2. Java程序员自我介绍

    有关Java程序员的面试自我介绍范文(一) 我叫XXX,今年21岁,毕业于XX解放军信息工程大学计算机科学与技术专业,拥有扎实的Core Java基础,良好的编程风格;熟悉JSP+Servlet+Ja ...

  3. Python中的Numeric

    整型Integer 在Python2.X中,Integer有两种类型,一种是32bit的普通类型,一种是精度无限制的long类型,在数字后面标识l或者L来标识long类型,并且,当32bit发生ove ...

  4. python异步初步窥探

    1.异步之难:因为其执行吮吸不可预料,当下正要发生什么事件不可预料.        程序下一步行为往往依赖上一步值执行结果,如何知晓上次异步调用已完成并获取结果,        回调成了必然选择,那又 ...

  5. node必学的Hello World实现--服务器实现

    node是JavaScript运行在后端的一种实现.而后端语言,不管是php,java都需要一个服务器才能跑起来,node如是. node的服务器较php而言,少了单独安装服务器的步骤,node的服务 ...

  6. java 基础--数组--004

    1,数组定义格式 String[] aa; String aa[];2,二位数组的定义格式1 String aa[][] = new String[m][n]; String[] aa[] = new ...

  7. java 基本--数据类型转换--001

    小可转大,大转小可能会损失精度(编译出错,需要强制转换)A: byte,short,char -> int -> long -> float ->doubleB: byte,s ...

  8. c++读取文件夹及子文件夹数据

    这里有两种情况:读取文件夹下所有嵌套的子文件夹里的所有文件  和 读取文件夹下的指定子文件夹(或所有子文件夹里指定的文件名) <ps,里面和file文件有关的结构体类型和方法在 <io.h ...

  9. [计算机网络-应用层] DNS:因特网的目录服务

    我们知道有两种方式可以识别主机:通过主机名或者IP地址.人们喜欢便于记忆的主机名标识,而路由器则喜欢定长的.有着层次结构的IP地址.为了折中这些不同的偏好,我们需要一种能进行主机名到IP地址转换的目录 ...

  10. [OS] 线程相关知识点

    操作系统中引入进程的目的,是为了描述和实现多个程序的并发执行,以改善资源利用率以及提高系统吞吐量.那为什么还需要引入线程呢?下面我们先来回顾一下什么是进程: 进程有两个基本属性:·资源的拥有者:给每个 ...