svg自适应缩放div,html显示svg
位图与矢量图
以前，浏览器中显示的图形，如jpeg和gif，都是位图，这些图像格式都是基于光栅的。在光栅图像中，图像文件定义图像中每个像素的颜色值。浏览器需要读取这些值并相应地采取行动。这类图像复制能力强，但在某些情况下会有所不足。例如，当浏览器显示不同尺寸的图像时，通常会产生锯齿状边缘。此时，浏览器不得不插入或猜测原始图像中不存在的像素值；这将导致图像失真。此外，位图的动画最多仅限于“翻书”，即快速连续地显示单个图像。
矢量图通过指定确定每个像素值所需的指令而不是指定值本身来克服这些困难。例如，矢量图形不是为直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器(或插件)完成剩下的工作。这消除了光栅图形的许多限制；有了矢量图形，浏览器只需要知道必须画圆。如果图像需要以正常大小的三倍显示，浏览器只需要以正确的大小画一个圆，而不需要执行光栅图像的通常插入方法。同样，浏览器收到的指令可以更容易地绑定到外部信息源(如应用程序和数据库)。要制作图像动画，浏览器只需接收如何操作属性(如半径或颜色)的指令。
在HTML系统中，最常用的矢量绘制技术是SVG和HTML5新加入的canvas元素。这两种技术都支持矢量绘图和光栅绘图。SVG概述
可缩放矢量图形(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中的标准事件。您可以为任何SVG图形对象分配大量的事件处理程序(如“onmouseover”和“onclick”)。虽然SVG的渲染速度没有canvas元素快，但是比DOM的灵活操作要好，完全可以弥补速度的劣势。
SVG可以说既是一种协议，也是一种语言；它不仅是HTML的标准元素，也是一种图片格式。
SVG不是HTML5中的东西，但它也是页面上流行的技术之一。先放在这个题目下吧。SVG与其它图片格式的比较
与其他图像格式相比，SVG有很多优势(很多优势来源于矢量图形的优势):
SVG文件是纯XML，可以被许多工具(比如记事本)读取和修改。
与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版本=1.0 编码=UTF-8 ？
！声明文档类型
超文本标记语言
头
！-meta content= text/html；charset=utf-8 http-equiv= Content-Type /-
标题我的第一个SVG页面/标题
/头
身体
SVG xmlns= http://www . w3 . org/2000/SVG 版本=1.1
宽度= 200像素高度= 200像素
rect x= 0 y= 0 width= 100% height= 100%
fill=none stroke=black/
圆cx=100 cy=100 r=50
style=stroke:黑色；填充：红色；/
/svg
/body
/html
请注意开头的xml声明，与svg的命名空间xmlns和版本version有关，主要是考虑兼容性；这些部分在HTML5中基本没必要写(写不写看你自己)。独立SVG文件
独立svg是指通过使用SVG文件扩展名来提供矢量图形文件格式。把这个svg文件嵌入浏览器就可以用了。
1.独立的SVG文件/页面，并且定义的模板基本如下：复制代码代码如下：
svg宽度=100% 高度=100%
！- SVG标记在这里。-
/svg
将这样的文本文件保存为扩展名为svg的文件，比如sun.svg这样的文件可以直接在浏览器中打开浏览，也可以嵌入到另一个页面中作为引用。
2.HTML引用外部SVG文件。
使用object或img元素嵌入svg图形就足够了，比如下面这个小例子：复制代码如下：
！声明文档类型
超文本标记语言
头
标题我的第一个SVG页面/标题
/头
身体
对象数据=sun.svg 类型=image/svg xml
宽度= 300像素高度= 300像素
！-在此实现回退代码，或显示一条消息：-
p您的浏览器不支持SVG -请升级到现代浏览器。/p
/对象
img src=sun.svg alt=不支持svg！/
/body
/html
实际上，SVG也可以放在其他XML文档中，也可以像其他XML文档一样，通过XML相关技术进行格式化和验证。这不是重点，这里就省略了。SVG的渲染顺序
SVG是严格按照定义元素的顺序进行渲染的，这与HTML通过z-index值控制分层不同。在SVG中，先渲染写在前面的元素，再渲染写在后面的元素。呈现的元素将覆盖先前的元素。虽然有时候会受到透明度的影响，但似乎并没有被覆盖，SVG确实是严格按照顺序渲染的。
注意：SVG是在XML中定义的，所以它是区分大小写的，这与HTML不同。实用参考:
官方文件：http://www.w3.org/TR/SVG11/
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs . 85)。文件
开发中心：https://developer.mozilla.org/en/SVG
大众参考：http://www.chinasvg.com/
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。