您的位置：首页 > Web前端 > HTML5

HTML5 SVG可缩放矢量图形入门

2012-05-30 14:23 351 查看

HTML5 SVG可缩放矢量图形入门

0. 传统图形图像的缺点：

只读、文件较大、不同设备上显示效果不同

矢量图形规范->SVG(W3C)/可扩展矢量图形规范（Scalable Vector Graphics）

<由于是矢量的，不象PNG、JPEG等逐像素描述，因此文件更小、下载更快>

不但支持矢量还支持矢量/栅格混合图形的描述

SVG目前的缺点：

客户端Browser需要安装Adobe的SVGViewer(如果是IE的话)，FireFox1.5已经集成；

1. 什么是SVG

Scalable Vector Graphics(简称SVG)，是“可扩展矢量图形”的意思。

SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。

SVG严格遵从XML语法，SVG并用文本格式的描述性语言来描述图像内容，因此SVG是一种和图像分辨率无关的矢量图形格式。

Keywords：XML文本格式描述图像

2. SVG的强大功能：

SVG使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

3. SVG的优点：

Keywords: 矢量的可编辑压缩缩放 Web融合(动态) 数字地图搜索 Flash

SVG是纯XML的，是一个开发标准。SVG不属于任何个体的专利，而是工业标准，通过协作共同开发的标准。因此SVG能够得到更迅速的开发和应用；

SVG的图像文件可读，易于修改和编辑；

SVG文件比JPEG和GIF更小压缩比更大；

SVG是可以压缩的；

SVG图像是可以任意无损缩放，并以任何分辨率高清晰打印；

SVG与现有的WEB技术可以互相融合(如与HTML、GIF、JPEG、PNG、SMIL、ASP、JSP集成)。SVG的动态部分(包括时序控制和动画就是基于SMIL标准)。SVG文件还可嵌入JavaScript脚本来控制SVG对象；

SVG图形格式可以用来动态生成图形。SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户；

SVG里的文字是可供选择和搜索的,所以SVG图形格式可以方便的建立文字索引，从而让SVG实现基于内容的图像搜索；(参看精彩示例Adobe公司的Visual Building Search)

SVG图形格式支持多种滤镜和特殊效果，SVG在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果；

SVG面临的主要问题是与非开放式的Flash如何竞争以及SVG的本地运行环境的厂家支持程度。

Flash（Flash 可以使用画布对象和 JavaScript 代码绘制任何图像。还能够从服务器上直接以 XML 或 JavaScript Serialized Object Notation (JSON) 的形式把数据读入到图像中。）

5. SVG规范：

图形、文字和图像的有机统一

6.SVG应用示例：

a) SVG文件潜入到HTML页面中,

<embed src="start.svg" height="300" width="300" type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/"

style="border: 1px solid black; padding:5px;"/>

b) 定义一个SVG文件：

start.svg

XML/HTML Code复制内容到剪贴板

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">

<svg style="shape-rendering:geometricPrecision;" viewBox="00100100" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMidmeet">

<path fill-rule="nonzero" style="fill:#000000;stroke:#FF0000;" d="M00L100100Z"/>

<path fill-rule="nonzero" style="fill:#000000;stroke:#00FF00;" d="M500L50100Z"/>

<path fill-rule="nonzero" style="fill:#000000;stroke:#FF0000;" d="M0100L1000Z"/>

<path fill-rule="nonzero" style="fill:#000000;stroke:#00FF00;" d="M050L10050Z"/>

</svg>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航