SVG——新一代Web设计及互动媒体的革新

SVG与图形图像及SVG图片调用

什么是DOM?以及DOM的结构和接口   在网上的论坛或社区经常看到读者提到后面类似的疑问:“怎样将图片转成SVG以便让手机使用?SVG能够制作位图的矢量格式图吗?图片能生成渐变的SVG 吗?如何用Adobe Illustrator CS3使JPG,PNG等格式的图片做成SVG格式?jpg转换为svg?SVG格式转换成别的格式?请教用程序操作svg图像的问题?SVG与图片有什 么关系?“本篇文章的内容就非常适合他们了解SVG与矢量图形及图像的关系、以及他们的怎样相互作用。

来源:SVG中国(ChinaSVG.COM)

1 SVG与矢量图

  矢量图形是flash流行起来后让更多大众了解的图形流派,之所以说是流派,是因为矢量图形还没有一个统一的格式标准。矢量图形包括一系列几何形体,如点、线、面等,所描绘和存储的是线条和色块的信息,这与点阵图像或者叫光栅图像那样把每一点的颜色都记录上来的存储方式不同,所以才有可不失真缩放和体积小的优点。当然,光用线条画不出世界,光用矢量图形也不能满足图像领域的需要,所幸的是几乎所有的矢量图形格式都有着集成点阵图像的功能,这种方式能使点阵图与矢量图形结合以达到复杂的绘图效果,SVG在这方面也不例外。

  值得注意的是,矢量图形描绘只是一种中间式的数据,无论是网络或是实际的应用,最后这个图形都必须转换成点阵图像来处理。其转换效果的好坏直接影响到到矢量图形的使用。SVG在这方面有着灵活的处理手段,例如, 可以设置防锯齿功能以美化效果等。这种转换的工作可以由服务器承担也可以交给客户端去处理,当然大多数是后者,否则,SVG体积小的优点就没有了!

  SVG的严格定义使得图像处理人员在从点阵图像到矢量图形的移植过程中,用不着担心会不会失真。再者,SVG定义的滤镜功能可以在转换后重现各种复杂的特效,这一系列优点将会使矢量图形的应用越来越广泛。

2 SVG与图像图片调用

  XML文档一般传送的是文字信息或数据,极少有图像,即使有也不提供什么功能,到多像HTML中的<img>标记那样用来插入一个图并限定其高和宽。而SVG的矢量图描绘规则提供了关于矢量图和点阵图的众多结构化的描述,既可单独存在,也可以嵌入XML文档中,形式相当灵活。

  需要说明的是,在图像学中,“图像”与“图形”两个词的含义是有所差别的,“图形”偏重于指线条多的矢量图形,“图像”偏重于指点阵图像,两者太混淆了容易闹笑话。比如虽然可以说一幅精炼的漫画是“图像”,但总不好说一幅风景画属于“图形“,所以SVG中国在这个方面都有所区别,你可以阅读“点阵图与矢量图形的区别一文对其进行更多的了解。

  SVG考虑到了与点阵图溶合,由于SVG是基于XML语言的,我们可以直接在SVG文件中载入图片,就像我们在网页(html)中载入图片一样。方法是采用<image>标签即可以载入点阵图,下面是SVG载入图片的代码。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="318" height="212">
<g>
<image height="20" width="92" preserveAspectRatio="none" image-rendering="optimizeSpeed"
xlink:href="http://www.chinasvg.com/templates/chinared/images/logo_small.gif"/>
</g>
</svg>

  代码产生的SVG实例,http://www.chinasvg.com/svg-examples/article/basic/svgloadimg.svg

  阅读更多的SVG文章,参见文章列表

(THE END)

 

将要更新