如何向网页添加 SVG

SVG 的添加方法

内联 HTML5

内联 XHTML

独立 SVG

嵌入

插件

目前常用的方法：

由于SVG文件是纯粹的XML，或许大家更为关心的是如何在Web浏览器中让SVG显示。要在浏览器中显示（前提是浏览器支持），可以通过几种方法来实现：

指向SVG文件地址

将此稿SVG直接嵌套在HTML中

而将SVG图像嵌入到HTML文件森渗孝有多种方法：

使用<iframe>元素来嵌入SVG图像

使用<img>元素来嵌入SVG图像

将SVG图像作为背景图像嵌入

直接使用<svg>喊茄元素

使用<embed>元素来嵌入SVG图像

使用<object>元素来嵌入SVG图像

引入SVG还需要从图片的数字化说起。一般来说，将图片存储为数据有两种方案。其一、就是我们传统使用的位图(光栅图)。即将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率山唤和强度，反映在视觉上，就是颜色和亮度。位图拥有一个逗野凯庞大的家族，包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP等脊誉。第二种方案就是矢量图（SVG就是其中的一种）。它用抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据。它将图片看成各个“对象”的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案（如用梯度描述渐变色）。比如一张留影，被看成各个人物和背景中各种景物的组合。这种更高级的视角，正是人类看世界时在意识里的反映。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

SVG这种格式的图形文件，近些年越来越多的被使用在互联网及各种应用程序中，然而，对于flash的使用者来说，我们发现flash虽然可以导出SVG格式的文件，却没有找到在flash中如何使用SVG格式的文件的方法，今天我们的福利就是讲解如何在flash中使用SVG格式的文件。

其难点就是我们不知道如何将SVG格式的文件加载到flash当中，如果解决了这个问题，那么，对于SVG文件的 *** 作，就和其他格式（jpg、gif、png）的图形 *** 作是一样的，甚至更灵活（因为SVG文件是XML格式的文本，更容易被修改编辑。）。

如何导入SVG格式的文件呢？完全自己编写AS3脚本是一件艰难的工作，但是知谈，我们很兴运的找到一个这方面的类库：AS3SVGRenderer。下面我们简单介绍一下AS3SVGRenderer的功能者轿特点：（支持Flash10及以上版本）

1.支持基本的形状和路径；

2.支持文本（从右到左，上标下标。）；

3.Has 3文本渲染引擎（TextField，TLF，FTE），支持CFF和非CFF字体；

4.支持坐标系统规则、转换和单位；

5.支持遮罩和剪辑；

6.支持填充、描边、渐变；

7.支持标记符号；

8.支持基本的文件结构（g,defs, symbol, use, image）；

9.支持滤镜：颜色矩阵，高斯模糊；

10.渲染显示SVG对象，通过as3的鼠标/触摸事件与SVG元素进行交互；

11.支持as3；

12.支持Flex组件；

不支持SVG的特性：

1.文本描边；

2.某些滤镜；

3.编写脚本

4.动画

使用方法：（直接上代码）

例A、加载外部SVG文件：

import flash.net.URLRequest

importcom.lorentz.processing.ProcessExecutor

importcom.lorentz.SVG.display.SVGDocument

/首猛肆/初始化ProcessExecutor，在整个应用程序中只做一次。

ProcessExecutor.instance.initialize(stage)

var svg: SVGDocument = newSVGDocument()

var url = new URLRequest("tqtqtq.svg")

svg.load(url)

addChild(svg)

例B、直接解析SVG字符串：

import flash.net.URLRequest

importcom.lorentz.processing.ProcessExecutor

importcom.lorentz.SVG.display.SVGDocument

//初始化ProcessExecutor，在整个应用程序中只做一次。

ProcessExecutor.instance.initialize(stage)

var svg:SVGDocument = newSVGDocument()

var data='<svg><circler="50" stroke="black" stroke-width="2"fill="red"/></svg>'

svg.parse(data)

addChild(svg)

例C、动画SVG：

import flash.net.URLRequest

import flash.utils.Timer

import flash.events.TimerEvent

importcom.lorentz.processing.ProcessExecutor

importcom.lorentz.SVG.display.SVGDocument

//初始化ProcessExecutor，在整个应用程序中只做一次。

ProcessExecutor.instance.initialize(stage)

var svg: SVGDocument = newSVGDocument()

var url = new URLRequest("tqtqtq.svg")

svg.load(url)

svg.x = 260

svg.y = 200

addChild(svg)

var timer = new Timer(33, 0)

timer.addEventListener("timer",fTimer)

timer.start()

function fTimer(event: TimerEvent):void {

svg.rotation+= 10

}

---