经过上一次对SVG的介绍,相信大家对SVG已经有了一定的了解,那么这次让我们一起动手做一个自己的SVG的作品吧!在开始之前,你得安装Adobe SVG Viewer,这样才能显示SVG格式的图片。后面我们将通过该SVG的简单例子形象的理解SVG及SVG语法。
首先,让我们打开记事本,正确输入下面的代码。
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="300">
<circle cx="200" cy="130" r="100" style="fill:rgb(255,0,255);opacity:1"/>
<text style="font-size:24" x="120" y="135">I like svg</text>
</svg>
输完后,在弹出的保存对话框内输入你给它取的名字,后缀为“.SVG”,这里我们取名为first.svg。继续把保存类型选择为所有类型,确定。OK,我们已经完成了第一副SVG的作品。你可以直接用鼠标双击该文件,在浏览器窗口中打开它,也可以将它植入HTML文件,被任何安装了SVG插件的浏览器显示。怎么样,够简单吧?它占用的空间也很小,就象那段代码一样,只有几百个字节,即便你把它拉大到全屏也一样(只需要修改width、height等属性值)。记着用右键点击浏览器窗口里显示的SVG图,看看能做什么?
下面,让我们来分析这个SVG文件的代码。
前三行代码是一份SVG文件的标准开头格式SVG的文档类型声明,它向浏览器及代码阅读者标明了XML的版本、SVG命名空间、公共标识符和系统标识符等相关信息。至于它们的具体作用及其他属性在这里我们不做详述,刚开始做SVG图的我们只需要记住他们的格式就行了。
第三行以后的部分是SVG文档的主体部分,所有图形元素都包括在这一部分。熟悉HTML的朋友应该对这几行代码很容易理解,它们的语法和html语言有很多共通之处。首先是根元素<svg>。和HTML语法一样,SVG的元素有很多是成对出现的,<svg>和</svg>就相当于HTML里的<body>和</body>,分别出现在SVG文档内容的开头和结尾。
事实上,你还可以用很多类似于HTML语言中的标签一样的元素来画出更出色的东西,也可以象Flash一样做动画,SVG的强大功能将使你的想象变为现实。“SVG的简单实例介绍"一文通过SVG实例分析SVG代码的语法、规则以及SVG设计相关信息，希望通过本文让你进一步通过SVG实例来学习SVG。
(THE END)
