1 2 3 4 5  下一页

　　如果在互联网网站的设计中使用过图形，一定听说过可伸缩矢量图形（SVG），甚至下载一个插件在浏览器中浏览SVG图片。对于SVG，我们首先需要了解也是最重要的一点是，它不是一种专有的形式。相反，它是一种描述二维图形的XML语言，是由W3C提出的一项开放性标准。
SVG是一种在XML中定义二维图形的语言，它包括3种类型的图形对象：适量图形（例如，包括直线、曲线在内的图形边）、图像和文本。图形对象可以与已经绘制好的对象结合，其特性包括多重转换、裁减、α变换、滤镜效果和模块对象。
　　SVG图像具有交互性和动态性。动画可以通过定义（例如在SVG内容中嵌入SVG动画元素）或脚本制作。
　　在这篇文章中，我将阐述使用SVG图形所需要的所有基础知识。

　　
　　　　图：解读SVG1


　　安装

　　我们希望制作的招贴画的大小为信纸大小的一半儿，这一规模将在＜svg＞后进行说明，还应该包含＜title＞和＜desc＞元素，SVG的显示程序使用＜title＞标志显示工具提示，搜索引擎需要用到＜desc＞标记提供的信息。此外，我们创建的文档也很方便视力不大好的用户使用。

＜!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"＞
＜svg width="21cm" height="13.5cm"＞
＜title＞MegaMall Handbill＜/title＞
＜desc＞
Handbill for the fictitious MegaMall
＜/desc＞
＜!-- graphic specifications go here --＞
＜/svg＞

　　在指定width和height后，我们实际上就建立了一个显示图形的显示区，单位可以使用em、ex、px、pt、pc、cm、mm，如果不指定单位，则缺省的单位是像素点。

　　所有其他物品的测量数字的单位与width和height所使用的单位相同。在我们的招贴画中，我们将设定width=21cm和height=13.5cm。为了必须在坐标中使用小数点，我们将建立一个viewBox。viewBox建立与viewport边界相重合的用户自己的坐标系统，如果与显示区不成比例，可以对图像进行缩放，只有在preserveAspectRatio被设置成none（这不是缺省设置）时才会进行缩放。在下面的说明中，我们把每厘米设定为10个单位。
＜svg id="body" width="21cm" height="13.5cm"
viewBox="0 0 210 135"＞


　　添加图像元素

1 2 3 4 5  下一页