flash与SVG两者比较

      最近比较关注SVG方面的信息，看到carto.net上一篇非常详细的flash vs SVG的文章，我尝试将其翻译过来。部分地方加上了我自己的注解和修改。（做法不妥或者错漏之处有劳各位指正，谢谢！）

---

---

flash与SVG整体比较

	SWF	SVG
标准开放性	不完全开放（Macromedia SWF Specification License）	开放且公用（World Wide Web Consortium Specification）
文件格式	二进制	基于XML语法的文本
MIME 类型	application/x-shockwave-flash	image/svg+xml
流文件格式	流文件	非流文件
交互性实现	脚本(actionscript/javascript)和事件(event)	脚本(javascript),SMIL和事件(event)
DOM	内部 'DOM'	SVGDom
图形顺序	引入图形深度的概念 （深度数值最大的图形在最顶端，同时可以在运行过程中由脚本控制修改图形深度）	SVGDom顺序 SVG文档中的顺序，最后的元素在最顶端（掩盖前面元素）。 也可以在执行过程中由脚本进行修改DOM树的操作来调整顺序。
压缩	zlib	gzip
主流浏览器支持	不支持，但是flash player插件几乎安装在每一台运行microsoft windows和MAC的电脑上（因为flash player捆绑在主流浏览器IE和Netscape上。 但是由于flash版本不断升级，事实上系统自带的flash播放器经常需要同步升级才能使用flash最新的功能）	不支持。 浏览器插件尚不普及，安装比率很低。
搜索引擎支持	官方提供的SDK以及一些专门的算法来对flash里面的链接和文本进行收录。	目前最主流的搜索引擎尚不支持对SVG的搜索，但是在理论上是容易实现的。
样式	SWF定义样式/CSS (small subset)	SVG 标准/ CSS2/XSL

（一） flash与SVG画板特性比较

 

	flash	SVG
坐标体系
类型	经典的xy轴屏幕显示坐标体系，用整数来度量	经典的xy轴屏幕显示坐标体系，而且是无限的
最小单位/精确度	1 twip	通过viewbox来设置，可以无穷地放大
计量单位
长度单位	px	px, pt, cm, mm, in, pc, %, em
角度单位	deg	deg, rad, grad
时间单位	毫秒 milliseconds	秒seconds
几何变换
平移 (translation)	支持 MovieClip._x MovieClip._y	支持 translate(<tx> [<ty>])
按比例伸缩 (scale)	支持 MovieClip._xscale MovieClip._yscale	支持 scale(<sx> [<sy>])
旋转 (rotation)	支持 MovieClip._rotation	支持 rotate(<rotate-angle> [<cx> <cy>])
倾斜 (skew)	不支持 但是可以通过对图元进行旋转和拉伸的组合操作来模拟	支持水平和垂直方向的倾斜 skewX(<skew-angle>) skewY(<skew-angle>)
矩阵变换 (matrix)	不支持	支持 matrix(<a> <b> <c> <d> <e> <f>)
嵌套几何变换 (nested geometric transformations)	支持	支持

 

 

 

 

（二） flash与SVG几何图形技术比较 

	flash	SVG
基本图形
直线	支持， 使用line-to命令	支持，<line>
折线	不支持， 但可以通过重复使用line-to命令来模拟	支持，<polyline>
矩形	不支持， 但可以通过重复使用line-to命令绘制一个封闭区域来模拟	支持，<rect>
圆形	不支持， 但可以通过计算并重复使用line-to/curve-to命令绘制一个封闭区域来模拟	支持，<circle>
椭圆型	不支持， 但可以通过计算并重复使用line-to/curve-to命令绘制一个封闭区域来模拟	支持，<ellipse>
多边形	不支持， 但可以通过重复使用line-to命令绘制一个封闭区域来模拟	支持，<polygon>
高级路径/线条特性
弧型线段	不支持， 但可以通过计算并重复使用line-to/curve-to命令绘制一个封闭区域来模拟	支持
二次曲线 （贝塞尔曲线）	支持， 使用curve-to命令	支持
三次曲线 （贝塞尔曲线）	不支持， 但可以通过计算并重复使用line-to/curve-to命令绘制来模拟	支持
绝对坐标/相对坐标	绝对	支持绝对和相对

 

 

 

 

（三） flash与SVG主要文字特性比较

	flash	SVG
文字区域
文字区域特性	支持 限于叫做textfield的矩形区域	没有此特性。 但可以使用<tspan>实现某些功能。
文字方框	支持	不支持 但可以使用<tspan>转换
文字区域内对齐	支持， 左对齐，右对齐，居中	不支持
文字分段	支持，且支持缩排	不支持
文字边缘	支持， 左边留白，右边留白	不支持
滚动条	不支持 但可以在开发环境下编写script实现	不支持
对齐
文本对齐	左对齐，右对齐，居中	前端对齐，末端对齐，居中
基线转换	不支持	支持
字体
默认字体	用户设定或者系统默认字体	设备/系统字体
内置字体	支持	支持
内置字符集	支持	支持
字体大小	支持	支持
字体风格	normal, italic, oblique	Normal, italic, oblique
字体伸缩	不支持 但能通过其他变化实现	支持多种风格的字体伸缩
字
定义单个字	支持	支持
单个字的旋转	不支持 只能以整个textfield为对象	支持 使用<tspan> 元素控制
字符方向	不支持	支持横向和纵向
给字符设置单独的下划线	不支持	支持
间隔
紧排字符	支持	支持
字符距离	不支持	支持
词语距离	不支持	支持
行间距离	支持	不支持
文字风格
文字描边	支持	不支持
文字背景	支持	不支持
文字装饰	下划线	下划线，上划线，中线，闪烁
其他特性
文本选择	所选内容可以输出到系统剪切板	所选内容可以输出到系统剪切板
可编辑文字格式	支持输入文本（input textfield）和专用的密码输入（password textfield）	不支持
文字路径	不支持	支持，使用<textpath>元素
unicode	支持	支持
表格	不支持	不支持

 

 

 

 

（四） flash与SVG样式外观特性比较

	flash	SVG
颜色和透明度
颜色	32-bit RGBA (24-bit RGB & 8-bit alpha)颜色体系. flash事实上是通过执行颜色变化来实现透明度特性	sRGB/CSS2定义的颜色 SVG用一些专门性质来处理透明度
画笔
填充	支持 MovieClip.beginFill()	支持， 设置fill参数
宽度	支持 MovieClip.lineStyle()	支持， 设置stroke-width 参数
颜色	支持 MovieClip.lineStyle()	支持， 设置fill参数
透明度	8-bit alpha值 MovieClip._alpha	支持， 通过设置 stroke-opacity参数
画笔笔触形状	圆形， 其他笔触必须由多边形模拟	支持butt, round, square三种笔触
画笔交汇点形状	圆形， 其他形状必须由多边形模拟	支持miter, round, bevel三种形状
虚线	不支持 必须由一系列的直线来模拟	支持dash-array和dash-offset 两种虚线
箭头	不支持，但可以模拟	支持， 通过使用<marker>标签。
渐变填充画笔	不支持	支持
多重画笔	支持 每一段路径使用一种样式	不支持
填充
实体填充	支持 MovieClip.beginFill()	支持
渐变填充	线性渐变和径向渐变 MovieClip.beginGradientFill()	线性渐变和径向渐变
位图图案填充	不支持 但是可以通过遮罩来模拟	支持 单幅图案或者平铺填充
透明性	8-bit alpha值	支持， 通过设置 "stroke-opacity"参数
遮罩	支持	支持
剪辑	支持	支持 使用<clipPath>元素定义剪裁路径
滤镜
概述	Flash没有提供滤镜特效工具。 用户可以选择使用颜色变换或者透明度变换等来代替滤镜效果。	SVG提供非常强大的滤镜功能。
质量选择
全局控制	“LOW” “Medium” ”High”	"optimizeSpeed" "optimizeQuality"
对单独对象的控制	除了textfield之外不支持	对所有单独的元件均支持 "optimizeSpeed" "optimizeQuality"

 

 

 

 

（五） flash与SVG动画特性比较

	flash	SVG
动画原理
实现原理	时间轴/关键帧	定义动画过程
时间单位	毫秒	秒
动画类型
位移动画	支持	支持 <animateTransform>
伸缩动画	支持	支持 <animateTransform>
旋转动画	支持	支持 <animateTransform>
变色动画	支持	支持 <animateColor>
形变动画	支持	不支持
动画合成	支持，层	支持
其他
文字动画	支持	支持
循环播放	支持	支持
路径	“引导线”	路径 <animateMotion>

 

 

 

 

（六） flash与SVG交互特性比较 

	flash	SVG
脚本
语言标准	ActionScript 2.0 (ECMA-262 Strict Mode Compliance)	ECMA-262, version 2
脚本接口	ActionScript API	DOM level2 +
面向对象特性	支持	支持
事件触发
事件	面向 buttons（按钮）, movieclips（影片剪辑）, textfields（文本框） 对象的多种事件	以下五种类型的事件 Zoom and Pan Events Status-Events SMIL/Animationsevents Mutation Events Mouse Event
超连接
类型	<href>标签/flash自定义超连接	使用Xlink和XPath

 

 

 

 

（七） flash与SVG多媒体特性比较

	flash	SVG
光栅图象
加载外部图象文件	JPEG	PNG, JPEG
内部导入图象文件	各种压缩方式的JPEG	base64编码光栅图象
声音
取样比率	5.5 khz, 11 khz, 22 khz, 44 khz	--
类型	单声道/立体声	--
流化(streamable)	是	--
加载外部声音	MP3 sound data	--
内部导入声音	ADPCM sound data MP3 sound data Nellymoser data	--
视频
类型	synchronized video/audio stream	--
流化(streamable)	是	--
过滤器	影片平滑处理/内部视频编辑器	--
外部视频	progressive FLV streaming FLV	--
内部视频	Sorenson H.263	--
其他特性
嵌入PDF	不支持	支持， 可以被Adobe Acrobat Reader读取
打印	支持	不能被打印