SVG图形基本语法及其应用（0526 4:40更新：大家早点起床看动画三叔流鼻涕.SVG图片）

ljmstock

5.26更新
原创新鲜出炉，大家早点起床看：三叔流鼻涕.SVG图片，下载 三叔2.rar (2.81 KB, 下载次数: 24)

2008-5-24 00:51 上传

点击文件名下载附件
这个样子的：当然是动画的！

5.18更新
　　　　　　　　　　上传SVG规范(中文版).txt
下载： SVG规范(中文版).txt (26.19 KB, 下载次数: 25)

2007-5-18 21:45 上传

点击文件名下载附件
5.17更新
　　　　　　　　　　　　SVG图片的用途
　　大部分机友可能并不知道SVG图片在65中有什么用。实际上，和所有图片一样，SVG图片也可以作桌面墙纸，待机、开机、关机动画。
　　装入S65的SVG图片和小人动画，就可以作为待、开、关动画；装入老虎、蝴蝶图片，可以作为墙纸使用。所以，SVG格式图片也可以作为主题图片使用。并且由于文件小，动画效果制作容易，移植人家图片容易，是很好的图片格式。

5.16更新
　　　　　　　　　　　　　教你一笔一划画SVG图

先看本人原创新鲜出炉的SVG格式的S65图片。下载 s65.rar (2.14 KB, 下载次数: 31)

2008-5-24 00:51 上传

点击文件名下载附件

　　手机屏幕文字是简单动画。好玩吧！Flow me…..
一、制作工具
　　流行的SVG工具有CorelDraw和Illustrator。由于本人熟悉AutoCad和Photshop，所以很容易上手CorelDraw，此处只介绍该软件。
　　CorelDraw是平面设计软件，平面广告、装修平面图设计等等经常用到它。没有AutoCad的精确绘图，但有Photshop的图形处理能力；图形处理没有Photshop强大，但有AutoCad的坐标系。因此，CorelDraw是上述两个软件的结合，具有杂交优势。它可以将绘出的图形存为SVG格式。网上的12版和9版的简体中文下载链接比较多。
二、过程
1.准备图片
　　先准备一张现成的图片，JPG、BMP等都可以，可以扫描照片、手绘草图输入。我下了张S65照片：

2.CorelDraw制作
　　从菜单文件－导入S65.JPG

菜单－位图－轮廓图－查找边缘，得到轮廓图


对于曲线部分，选左侧工具栏中的手绘工具－贝塞尔工具

在轮廓图上进行描图

对于矩形、圆形、椭圆直接选对应工具描图，得到轮廓线图

删除先前导入的JPG图形，另存为SVG格式。即在保存格式中选SVG，保存参数如下：

3.后期处理
　　得到的SVG图形只是初步的，由于是机器生成的，有些语句太罗嗦进行归并；有些多余的语句可删掉；由于手绘描图，有些地方不准确进行修正；添入一些需要的内容，如动画、填色等。要做到这些，必须对SVG基本语法有所了解才行，好在并不复杂，大家根据例子揣摩吧。
　　PC机上装入SVGview，双击做好的SVG轮廓线图，在浏览器上打开它，最小化；再用右键点同个文件，选打开方式－记事本，就是同时用记事本打开该图。在记事本上修改后，保存；再在浏览器上刷新，可以实时显示修改结果。后期处理就这样可以不断摸索，改错了撤销；没改好继续调整参数，直到满意为止。
　　最后得到如开篇处的图形。
　　利用这种方法，可以制作头像动画，眨眼睛、流鼻涕、吐舌头，随便啦。
　　制作地图就更简单了，可以不进行轮廓处理，因为地图上都是轮廓分明的。只要下张地图作底稿，在上面描图就可以了。有兴趣的朋友制作几张地图让大家使使。这种地图可以无限缩放，不会出现模糊的情况，这就是最大的优势。网上也有将BMP地图进行矢量化的工具，将结果再进行手工修改，效果就非常好。

SVG图形基本语法及其应用

　　曾经有机油贴出过SVG图片，但没有引起大家的重视。究其原因恐怕是大家对这种图片形式太缺乏了解。本贴目的为了扫盲，同时也提出个人的一些想法。
一、SVG介绍
　　SVG是基于XML语言的可伸缩向量图形，用文本指定图像。传统图形需要指定矩形的每一个像素，而 SVG 只要说明矩形存在，并指出它的大小、位置和其它属性即可。可以轻松地从数据库信息生成图形（如图或图表），以及向图形添加动画和人机交互性操作。
　　熟悉Autocad的机友知道，.dwg图形文件也是一种向量图形格式，但不是文本文件；而用Autocad的Script命令就可以用文本作为脚本，创建图形，并且可以调用诸如excel、文本文件数据来画出图形。SVG图形与之非常相似，但不需要几百兆的Autocad支持。
　　熟悉Html网页设计的机友知道，我们看到的htm网页实际上仅仅是一个文本文件加上一个图片文件夹。在IE中－查看－源文件，就可以发现这点。你将源文件内容复制下来，粘贴到记事本中，另存为扩展名htm（另存时选择文件类型为所有文件,保存文件为　文件名. htm），就跟原来的网页没有区别，只是需要下载所有图片，并正确取名、设置路径。Html与XML（SVG图形仅仅是其中的一个重要组成部分）有点相象，但不能用语句画出图形。正是这一点，XML大有取代Html的趋势。
　　SVG图形不仅是静态的还可以是动画，可以作出Flash动画效果，有一天动画都将是SVG格式的；不仅是图形显示，还可以接受交互，所以可以作成游戏；图形用文本描述，图形文件非常小，图形中的文字不是死尸，可以被任意搜索并提取，出现图像搜索引擎；能与Html和JAVA结合，使功能及其强大。这些特点的组合，使得他独一无二。虽未受主流浏览器的集成，但很多手机提供支持，将成为3G时代手机和网络的神话！
　　65西机内置的SVG是Mobil　SVG，即Tiny　1.ｘ，功能受到很多限制。在PC上能用的很多功能，手机上用不了。本贴中图片和动画都可以在65中运行。
二、SVG图形例子
　　在PC上看SVG图形需要SVGView的支持（提供附件下载，文件过大，分割后上传，大家也可以网上找），在65上可以直接看到图形。先看些例子，让大家有深刻印象。
<svg width="8cm" height="8cm">
<circle cx="4cm" cy="4cm" r="3cm"
style="fill:blue; stroke:red; stroke-width:0.5cm" />
</svg>
显示图形如下：圆环


　　这是本帖开篇提到的那位机友原来提供的，只是被本人简化和修改了（对不起，没时间去搜索原帖了，请原帖作者原谅，请跟帖申明作者权益）。大家看到了吧，一张图片，却可用寥寥数字，一两个普通短信就可传递。包含SVG语句的短信，用本坛中的SMSReader手机JAVA软件保存成TXT文件，再改扩展名为SVG即可显示了。

<svg width="200" height="150" >　
<rect y="15" width="50" height="50" fill="red">　
<animate attributeName="x" from="0" to="140" dur="15s"　
repeatCount="indefinite"/>　
</rect> </svg>
一张简单动画，自己装入65中看看吧。将上面的源代码粘贴到windwos的记事本，选择文件类型为所有文件，保存文件为*.svg(扩展名需自己填写上)。 方块动画.rar (248 Bytes, 下载次数: 16)

2007-5-9 19:11 上传

点击文件名下载附件

下面这张动画复杂一点，也更好玩。下载 小人动画.rar (390 Bytes, 下载次数: 40)

2007-5-9 19:11 上传

点击文件名下载附件
<svg width="500" height="300" >
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="none" stroke="red" stroke-width="2" />
<g stroke-width="5" stroke="black">
<circle cx="0" cy="-45" r="10" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" />
</g>
</svg>
显示如下：小人动画



再提供两张好看的图片：
老虎 老虎.rar (29.99 KB, 下载次数: 60)

2007-5-9 19:11 上传

点击文件名下载附件


蝴蝶 蝴蝶.rar (10.03 KB, 下载次数: 44)

2007-5-9 19:11 上传

点击文件名下载附件


　　由于文件太大，提供附件大家下载。
　　够了吧？
三、SVG图形的制作
1.用现成图片制作
　　用软件SvgFactoryInstall.exe可以将普通图片转换成SVG图片，但是只能转换BMP图片。对于JPG图片，必须先用WINDOWS自带的　图画　软件另存为BMP图片，体积将增大10倍；再转换成SVG体积只是略小一点。也就是JPG图片转换成SVG图片时，体积将增大几倍，除非是对称程度高的图片转换后与JPG相当。所以，这种方式对于手机没有什么意义。不过还是提供大家软件下载。 SvgFactoryInstall.rar (206.92 KB, 下载次数: 10)

2007-5-9 19:11 上传

点击文件名下载附件
　　喜欢收集的机友不妨先收藏着，藏的时间长了自然值钱。20年前本人收藏的一个武汉东西湖啤酒厂生产的瓶盖里的凝胶，藏在一个镀金首饰盒内。五一天热，拿着藏品去了当铺，竟然换了三箱啤酒。这会儿还有喝的呢！
    提供这种方法制作的两张图片。MM1 MM1.rar (24.92 KB, 下载次数: 16)

2007-5-9 19:11 上传

点击文件名下载附件 ,MM2 MM2.rar (11.68 KB, 下载次数: 15)

2007-5-9 19:11 上传

点击文件名下载附件
2.一笔一划地画
　　上述老虎、蝴蝶的图片就是属于这种类型。点蝴蝶.SVG文件－打开方式－记事本，打开看看，再打开MM1.SVG比较一下。可发现两个图片文件内容有很大的区别，蝴蝶是由命令组成的，而MM1是由混乱字母组成的。这就是SVG的优势，无论如何，一张复杂、幅面很大的图片只有区区30K，只有矢量图才能做得到。
　　一笔一笔地画画，只有那些特别有兴趣的机友会去做，可能是吃饱了撑的。吾观本坛半载有余，肚子扁扁者居多，中国粮荒到如此程度竞不见国际社会援助！可幸的是，几位版主倒是大腹便便的。本人偶尔也喜欢把枕头塞在背心里，不知道的以为肚子大，知道的实际上是胃寒。
　　SVG将是3G时代的宠儿，有志于在未来拥有一个能容得下自己双脚的舞台之机友不妨钻研钻研。到时不要因为自己脚太大而自卑，因为到时人家都是头大得很。
四、SVG基本命令介绍
以上述图片为例加以说明。

有个文件帽，天热可以不戴。
<svg width="8cm" height="8cm">
<svg是不能少的，width、 height图片大小，也是显示图片的区域大小。
<circle cx="4cm" cy="4cm" r="3cm"
　　画圆，圆心位置、半径大小
style="fill:blue; stroke:red; stroke-width:0.5cm" />
　　特性描写，由于圆的线宽被设置成了0.5 cm，相对可视区域是个圆环了；圆周（此处即圆环）红颜色，
　　里面填蓝色。
</svg>
　　结尾
　　语句之间有空格（或多个空格）或回车，都相当于运行下个命令。

下个例子
<svg width="200" height="150" >
<rect y="15" width="50" height="50" fill="red">
　　在Y=15个像素处画50见方的方块，填红色
<animate attributeName="x" from="0" to="140" dur="15s"
　　运行动画，沿X轴从0到140处，15秒
repeatCount="indefinite"/>
　　重复运行
</rect> </svg>

再个例子
<svg width="500" height="300" >
<rect x="1" y="1" width="498" height="298"
　　在1,1处开始画一个498 X 298的矩形
fill="none" stroke="blue" stroke-width="2" />
　　矩形不填色，边线蓝色，线宽2
<path d="M0,300 S150,100 200,200 S400,400 500,0"
　　画一条路线，M移动画笔到0,300坐标处（左上角为0，0），以这点为起点，绘制“光滑”三次贝塞尔曲线。一条复杂的曲线由多个曲线弧段所构成，弧段与弧段之间要光滑衔接，各个弧段的控制点必须满足一定条件。首先，这一段曲线弧的起点必须是前一段曲线弧的终点，否则连不上；其次，这一段曲线弧的第一控制点必须与前一段曲线弧的第二控制点呈对称关系，对称中心是这段曲线弧的起点，只有这样才能保证曲线衔接处的光滑。S和s命令的语法是“S X2 y2 destx desty”，省略了光滑曲线弧所隐含的第一个控制点的坐标。命令执行完后，当前点坐标同样停留在最后绘制的一段曲线弧的终点上。
fill="none" stroke="red" stroke-width="2" />
　　不填颜色，线条红色，宽2个像素
<g stroke-width="5" stroke="black">
　　制作一个可重复调用的图形
<circle cx="0" cy="-45" r="10" fill="black"/>
　　画圆，人头部分
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
　　画线，四肢部分。
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" />
　　重复调用图形随着路径自动旋转
</g>
</svg>

　　还有几个常用的命令在后面介绍。
五、SVG的应用前景
1.flash动画。通过上述动画介绍，估计大部分机友可以理解了。
2.游戏。妈妈说玩游戏不好，所以本人不玩游戏。喜欢玩的机友自己想吧。
3.地图及手机定位，作重点介绍。
　　画了张半拉子地图作说明。地图图片


源程序如下：地图下载 地图.rar (724 Bytes, 下载次数: 13)

2007-5-9 19:11 上传

点击文件名下载附件
<svg style="shape-rendering:geometricPrecision;"
viewBox="-10 -10 100 120">
　　　可见区域，负号在原点0，0的外侧
<path d="M0,100 L22,59 30.5,29 48,1"
　　　移动画笔到0，100，从上个点画线到下个点。注意，L为画线命令，可用大写和小写。大写表示绝对坐标，小写表示相对于上个点的坐标。
fill="none" stroke="blue" stroke-width="11" />
　　　画出长江部分，如果用S命令更好，曲线优美。也可以用画多边形的命令画成多个多边形，表示江面有宽有窄
<path d="M-9,58 L13,53 29,43"
fill="none" stroke="blue" stroke-width="2" />
　　　汉水
<path d="M25,20 L5,10 -9,14 0,62 10,60 M30,68 L40,70 90,90 M40,27 L60,39 49,59 45,72 M60,39 L95,19 M60,39 L75,41"
fill="none" stroke="green" stroke-width="1" />
　　　道路
<path d="M25,20 l15,7 M10,60 l20,8"
fill="none" stroke="yellow" stroke-width="1" />
　　　长江大桥、二桥
<text x="20" y="90" style="font-size:4pt" font-family="simsun">武昌汉阳汉口</text>
　　　显示文字
<path d="M51.5 26.25 L54 26.25 M50.5 27.5 L58 27.5 M53 28.5 L53 31 M52 29.5 L52 31.5 M53 29.5 L54.5 29.5 M51 32 L54.5 30.5 M54.5 25 L56 31 57 32.5 57.5 31 M55.5 25.5 L57 26.5"
fill="none" stroke="black" stroke-width="0.5" />
<path d="M6.5 5.5 L8.5 7 M6 7.5 L8 8.5 M6.5 11.5 L8.5 9 M7.5 12.5 L10 9 12 5.5 8.5 5.5 10 9 12.5 12.5"
fill="none" stroke="black" stroke-width="0.5" />
<path d="M6.5,47 L6.5,41 13,41 13,47 Z"
　　　Z为画线闭合命令
fill="none" stroke="black" stroke-width="0.5" />
<path d="M52.5 82 L52.5 80.5 56 80.5 56 83 52.5 83 52.5 81.75 56 81.75 M51.5 85.5 L51.5 84.25 57 84.25 57 87 51.5 87 51.5 85.5 57 85.5"
fill="none" stroke="black" stroke-width="0.5" />
<path d="M-3.5 65.5 L-1.5 67 M-4 67.5 L-2 68.5 M-3.5 71.5 L-1.5 69 M-2.5 72.5 L0 69 2 65.5 -1.5 65.5 0 69 2.5 72.5"
fill="none" stroke="black" stroke-width="0.5" />
<path d="M-8.5 87.5 L-8.5 80.5 -6.5 80.5 -6.5 81.5 -7.5 82.5 -6.5 84 -6.5 85 -8.5 85 M-5.75 84 L-5.75 81 -2.75 81 -2.75 86.75 -5.75 86.75 -5.75 84 -2.5 84"
fill="none" stroke="black" stroke-width="0.5" />
　写了几个字，不知是自己没有搞清楚还是Mobil　SVG不支持文字显示，只好自己做了几个字。
</svg>

　　这个地图文件非常小，如果去掉做的几个字，还要小；并且图形在放大和缩小时不会产生任何模糊。SVG中肯定可以显示文字的，可能是字库的原因。显示文字处有X、Y坐标，文字中可以加入地名、CID-LAC数据，这给检索和定位提供了无与伦比的方便，从此可以甩掉数据库了。
　　这就是手机定位的出路所在！不管是本机地图显示还是网站下载地图显示，都表现出了非凡的效率。
　　下载汇总 汇总.rar (310.59 KB, 下载次数: 35)

2007-5-9 19:20 上传

点击文件名下载附件
       浏览器插件SVGView上传不了，大家网上找吧。
　　以上这些例子大家都可以修改，从中体会。方法如下：
双击以网页方式打开SVG图片，再右击－打开方式－记事本打开同个文件。在记事本中修改，保存；在网页上刷新，即可显示修改效果。
喝口啤酒，弹一下烟灰。。。。。。

[ 本帖最后由 ljmstock 于 2008-5-24 00:54 编辑 ]

comdin

占位看看..考虑加精中..

comdin

很可爱的说哦..

下午四点半

哦耶~~~~~~~~~~~~~~~~

下午四点半

楼主武汉的么.....我快去武汉了

                               
登录/注册后可看大图

下午四点半

又看了一遍，楼主真是可爱啊~~~~~~
可惜我现在没有手机....

                               
登录/注册后可看大图

ljmstock

在武汉工作，欢迎16：40来看机友

jpg001

。。支持一下。。。很不错的帖子

下午四点半

为了支持您，我被下沙黑了....48两银子啊

                               
登录/注册后可看大图

他看不懂人类的语言...不知道那是表达激动与兴奋...
我不和他一般见识.....

jpg001

                               
登录/注册后可看大图

                               
登录/注册后可看大图

他看不懂人类的语言...不知道那是表达激动与兴奋...

                               
登录/注册后可看大图

                               
登录/注册后可看大图

下午四点半

好爽啊，用Html语句加上坐标定位竟然能弄出这么漂亮的图片！

ljmstock

谢谢各位版主的赞赏。

niu-niu

蛮有趣的 支持LZ

bclsky

好强的文，好漂亮的图

电脑爱好者

几张图片我都收藏了,看最后一张图LZ应该是武汉的吧

zoro

还是那个小人的觉得可爱..

liuwei6044

研究研究。

ljmstock

以上这些例子大家都可以修改，从中体会。方法如下：
双击以网页方式打开SVG图片，再右击－打开方式－记事本打开同个文件。在记事本中修改，保存；在网页上刷新，即可显示修改效果。

Zach

这个专业，哈哈，学习先

下午四点半

技术贴没有人支持？？？怒了！！