SVG (Scalable Vector Graphics)简介-CSDN博客

本文介绍了使用Batik生成SVG图表的方法及实例。SVG作为一种矢量图形语言，具有文件小、易生成和交互性强等特点，适用于网络统计图表。Batik是基于Java的SVG工具集，支持SVG的显示、编辑和转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG (Scalable Vector Graphics)是一种开放标准的描述矢量图形的语言,它继承了XML的优点,能够实现图形图像、文字的统一。文章在介绍SVG和Batik的基础上描述了使用Batik来生成SVG图表的方法和一个具体实例,初步说明了SVG的广泛应用前景。来源：SVG中国(ChinaSVG.COM)

1 前言

　　随着网络技术的高速发展,基于web的图表也越来越多地被使用。常用的软件经常使用PNG、GIF、JPG等格式的图片来显示数据统计图表。这些格式的图片能形象地展示统计内容,但是也存在一些缺点,比如:图片占用空间比较大;生成图片占用较多服务器资源;图片不可更改;图片不能检索;图片不适合缩放等。SVG(Scalab le Vector Graphics)正好能弥补上诉图片的不足。不但文件占用空间小,利于网络传输,节省网络带宽,可以轻松地从数据库信息生成图形,还可以向图形添加交互性的能力,支持动画。

图1 Batik相关图

2 SVG的特点

　　SVG是一种开放标准的矢量图形描述语言,是W3C的推荐标准。SVG完全基于XML,因此它继承了XML的优秀扩展性等很多优点,能提供给用户和开发者更多的功能。SVG,XML都是基于文本的一元格式,因此,SVG图像具有以下特点:

SVG图像中的命令语句可以自由的和脚本程序或XML进行交互,完全通过代码来实现。
作为基于文本的格式,SVG图像中的文字可以被网络搜索引擎所搜寻,或被用户浏览器查找和编辑。
SVG图像可以方便的由程序语言来动态的生成,例如用JavaScript、perl、Java,这对于一些数据库制表是非常实用的,图像可以根据数据库中的关系量实时的改变。
SVG完全支持DOM(文档对象模型),因而SVG以及SVG中的对象(元素)完全可以通过脚本语言接受外部事件的驱动,例如鼠标动作,实现自身或对其他对象、图像的控制。
SVG可以很好的跨平台工作,解决外部输出、色彩、带宽等相关问题。
SVG图像中的文字独立于图像,可以编辑和查询,同时,也不会再有字体的限制,用户系统即使没有安装某一字体,同样可以看到这些字体。
SVG有较小文件尺寸,从网络传输更迅速。
用户可以自由的放缩图像而不会破坏图像的清晰度,SVG图像的清晰度适合任何屏幕分辨率或打印分辨率(dpi)。
SVG图像具有一个1600万色彩的调色板,支持ICC标准,RGB,线性填充和遮罩,具有超强的色彩控制。

　　SVG有着特殊的优势,也逐渐被各行业关注,开始用于GIS等网络图形。

3 Apache Batik对svg的支持

　　Batik是Apache项目成员之一,该项目为开发人员提供了一个开发的可扩展的平台。Batik是基于java语言实现的一个SVG应用的工具集,用于实现对SVG对象的显示、编辑以及将SVG图形对象转换成其他图片格式,如jpg、gif等。这个项目的目标就是给开发人员一套用于处理或应用SVG对象的基础核心模型,同时它也提供了一个SVG浏览器。虽然batik还没有完全实现SVG的所有标准语法和标记,但通过比较不同版本的区别就会发现,他正在以很高的效率覆盖SVG所有的标准。

　　Batik提供了一个专门用来替代Graphics2D的新类SVG2Graphics2D。Graphics2D可以完成绘制、填充等功能,并且为每不同的输出设备实现了各自的特定方法,SVGGraphics2D就是为了生成SVG而实现上述格接口的类。SVGGraphics2D主要提供以下功能:把图形导出成SVG格式,无需修改图形的程序代码就可以导出成SVG,允许用户使用DOM API来操作生成
的SVG文档。

　　使用SVGGraphics2D和相关类就可以直接绘制成我们所需的SVG图表。

4 绘制网络统计图表

　　统计图表可以形象地表示出网络运行的状态,普遍用于网络数据分析和信息发布。网络在线人数统计是我管理工作的一部分。使用程序显示图表,随时提供实时结果,极大的方便了管理工作。程序的基本功能为每10分钟读取一次登录校园网关的人数,存入数据库,用java servlet读取数据,在servlet中使用Batik SVG Graphics2D接口编程绘制出SVG图表,最后将SVGGraphics2D对象输出到输出流response get Output Stream(),在浏览器上显示。程序的主要变量和代码片断如下:

long xlist[]=new long[580];
int ylist[]=new int[580];
//初始化SVG的绘制环境的代码片断
response set Content Type("image.svg+xml");
DOM Imp lementation dom Impl=GenericDOM Im2
plementation.getDOM Implemen tation();
Document document=dom Impl.createDocument(null,"
svg",null);
SVGGraphics2D g2=new SVGGraphics2D(document);
g2 setBackground(Color white);
g2 clearRect(0,0,imgw+10,imgh);
//绘制图表中的网格线的代码片断
for(intj=graphY;j<=graphY+graphH;j+=
graphRow){
graphLine.setLine(graphX-2,j,graphX+graphW,j);
g2.draw(graphLine);
}
//.绘制图表中的数据折线的代码片断
for(intj=0;j<size;j++){
xx=graphX+(xlist[j]-ldate+period324360)3
graphW.ppm;
yy=graphY+graphH-ylist[j]3graphRow.200;
if((xx-graphX>=0)&&(xx<imgw-10)){
if((xx-x0)>graphW.25){
x0=xx-1;
y0=yy;
}
graphLine.setLine(x0,y0,xx,yy);
g2.draw(graphLine);
}
x0=xx;
y0=yy;
}
//输出SVG结果
Servlet Output Streamout=response.get OutputStream();svgOutput.close();
g2.stream(svgOutput,true)

WritersvgOutput=newOutputStreamWriter(out);