SVG 2D入门1 - SVG综述
位图与矢量图
以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针对位图进行动画，最多也仅限于生成“翻动书本”类型的动画，即快速连续地显示单独图像。
矢量图通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。
HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。
SVG概述
可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。 可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。
SVG绘图是交互式和动态的。 例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。
SVG与其他Web标准兼容，并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方(这里注意，SVG内部也是用一个类似的canvas这样的东西来展示SVG图形，到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素)。因而，可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。 虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。
SVG既可以说是一种协议，也可以说是一门语言；既是HTML的一个标准元素，也是一种图片格式。
SVG并不是HTML5中的东西，但是也算页面时兴的技术之一，姑且也放到这个专题下了。
SVG与其它图片格式的比较
SVG与其它的图片格式相比，有很多优点(很多优点来源于矢量图的优点)：
• SVG文件是纯粹的XML， 可被非常多的工具读取和修改(比如记事本)。
• SVG 与JPEG 和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。
• SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)。
• SVG 可以与 Java 技术一起运行。
• SVG 是开放的标准。
SVG与Flash的比较
SVG 的主要竞争者是Flash。与Flash相比，SVG 最大的优势是它与其他标准(比如XSL和DOM)相兼容，操作方便，而Flash则是未开源的私有技术。其它的比如存储的格式，动态生成图形等方面，SVG也占有很大的优势。
SVG的呈现方式
关于支持HTML5与SVG的浏览器不是这里讨论的重点，基本上装上最新的Chrome或者FireFox浏览器就差不多了(IE用户请装IE9就对了，至于IE9之前的版本，需要装SVG的插件，这里就直接略过了)。对于直接支持SVG的浏览器，SVG主要采用两面两种呈现的方式。
内联到HTML
SVG是标准的HTML元素，直接写到HTML中就可以了，看下面的例子：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
<title> My First SVG Page</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
<rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/>
<circle cx="100" cy="100" r="50"
style="stroke: black; fill: red;"/>
</svg>
</body>
</html>
请注意开头的部分xml声明，与svg的命名空间xmlns、版本version等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。
独立SVG文件
独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。
1.独立的SVG文件/页面，定义的模板基本就像下面的一样：
<svg width="100%" height="100%">
<!-- SVG markup here. -->
</svg>
把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。
2.HTML引用外部的SVG文件。
使用object或者img元素嵌入svg图形就可以了，例如下面的小例子：
<!DOCTYPE html>
<html>
<head>
<title> My First SVG Page</title>
</head>
<body>
<object data="sun.svg" type="image/svg+xml"
width="300px" height="300px">
<!-- Implement fallback code here, or display a message: -->
<p>Your browser does not support SVG - please upgrade to a modern browser.</p>
</object> <img src="sun.svg" alt="svg not supported!" />
</body>
</html>
其实SVG也可以放在其他的XML文档中，也可以像其他的XML文档一样，使用XML相关的技术格式化和验证，这个不是重点，此处略去了。
SVG的渲染顺序
SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。
注意：SVG是以XML定义的，所以是大小写敏感的，这点与HTML不一样。
SVG 2D入门1 - SVG综述的更多相关文章
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- SVG 2D入门12 - SVG DOM
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...
- SVG Sprite 入门（SVG图标解决方案）
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
- SVG 2D入门11 - 动画
交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...
- SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...
- SVG 2D入门7 - 重用与引用
前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素 g元素是一种容器,它组合一组 ...
- SVG 2D入门3 - 文本与图像
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本 ...
- SVG 2D入门10 - 滤镜
滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好. ...
随机推荐
- linux笔记：linux常用命令-目录和文件处理命令
命令格式: 命令 [-选项] [参数] 例: ls -la /etc 注意:个别命令的使用不遵循此格式. 目录处理命令:ls(列目录) 更多选项: -h 以kb等利于人阅读的方式取代字节显示文件大小 ...
- DI 之 3.2 循环依赖 (伍)
3.2.1 什么是循环依赖 循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用CircleC,CircleC引用CircleA, ...
- hdu 1075 二分搜索
还是写一下,二分搜索好了 这道题开数组比较坑... 二分,需要注意边界问题,例如:左闭右闭,左闭右开,否则查找不到or死循环 先上AC代码 #include<iostream> #incl ...
- Scala学习之: Hello Word!
scala 是一门纯粹的面向对象的语言 , 结合了python和java的优点. 它和java的集合度很高,是一个在JVM上运行的非java语言(PS 其实scala也是用java编写的) 安装sca ...
- web基础之Structs(一篇)
为什么有 struts 框架 Struct 的优点之处: 1. struct的好处 2. 程序更加规范化 3. 程序的可读性提 ...
- hdu----(1528)Card Game Cheater(最大匹配/贪心)
Card Game Cheater Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- HDUoj-------（1128）Self Numbers
Self Numbers Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- css3 keyframes animation
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img ...
- Mysql 字符串处理函数
函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例:select left(content,200) as abstract from my ...
- MVP Community Camp 社区大课堂
MVP Community Camp 社区大课堂 微软技术社区大课堂开课啦!!!#MVPComCamp# 全中国微软最有价值专家MVP 在 3月21日周五全天齐聚北京国际会议中心为您呈 ...