| 文章索引 |
|---|
| 客户端与服务器端的SVG |
| 服务器端的SVG |
| 所有页面 |
来源：SVG中国(ChinaSVG.COM)
翻译：刘彦青
英文：http://www.xml.com/pub/a/2002/02/27/batik/index.html
Batik是基于Java技术的工具包，适用于SVG各种应用。我们使用Batik是因为它能够生成矢量图形的servlet。如果客户端支持SVG，servlet将返回一个SVG文档，否则它将根据客户端支持的图像格式返回一个JPEG或PNG图形。
如果曾经使用过SVG，也许听说过Adobe SVG Viewer或Apache Batik工程。尽管Apache Batik是以其SVG阅读器而著名的，但它又不仅仅只是SVG阅读器。据其网站所称，Batik是一个基于Java技术的工具包，它适用于使用可升级矢量图形（SVG）格式的各种应用。
Batik阅读器应用程序使用JSVGCanvas组件，该组件是一个Java类，它接受SVG格式的文件作为输入，并在屏幕上显示它。在本篇文章中，我们将讨论Batik的其他二个组件：SVGGraphics2D、Batik transcoders。SVGGraphics2D类与JSVGCanvas的作用相反，使用Java的标准2维图形方法，我们可以进入 SVGGraphics2D环境，其输出是一个SVG文档。而JSVGCanvas则将SVG文档作为输入，输出则是JPG或PNG格式的图形。
我们使用这些工具的环境是一个能够生成蒙特里安风格的几何图画艺术的servlet。如果客户端支持SVG，servlet将返回一个 SVG文档，否则它将根据客户端支持的图像格式返回一个JPEG或PNG图形。
客户端
我们向用户展示的网页将让用户选择自己作品的定位和色彩设计。下面的图就是一个例子：
下面是HTML代码：
<head>
<title>Art-O-Matic</title>
</head>
<body>
<h2>Art-O-Matic</h2>
<p>Yes, you too can become a famous artist! With a few simple clicks
of the mouse, you can generate geometric art in the style of
Piet Mondrian.</p>
<form id="artForm" action="http://jde:8080/artmaker/servlet/ArtMaker">
<p>What kind of picture would you like?<br />
<input type="radio" name="picType" value="landscape"
checked="checked" /> Landscape
<input type="radio" name="picType" value="portrait" /> Portrait
<input type="radio" name="picType" value="square" /> Square</p>
<p>Which color scheme would you like?<br />
<input type="radio" name="scheme" value="bright"
checked="checked" /> Vivid colors
<input type="radio" name="scheme" value="pastel" /> Soft pastel</p>
</body>
</html>
对客户是否支持SVG的判断工作必须在客户端进行，我们将添加一段从Sun公司的资料中借鉴的脚本代码来处理这一判断工作。
<!-- <![CDATA[
var hasSVGSupport = false; // does client have SVG support?
var useVBMethod = false; // use VBScript or JavaScript?
/*
Internet Explorer returns 0 as the number of MIME types,
so this code will not be executed by it. This is our indication
to use VBScript to detect SVG support.
*/
if (navigator.mimeTypes != null
&& navigator.mimeTypes.length > 0)
{
if (navigator.mimeTypes["image/svg+xml"] != null)
{
hasSVGSupport = true;
}
}
else
{
useVBMethod = true;
}
// ]]> -->
</script>
<!--
Visual Basic Script to detect support of Adobe SVG plugin.
This code is not run on browsers which report they have MIME types,
and it is also not run by browsers which do not have VBScript support.
-->
<script type="text/vbscript">
On Error Resume Next
If useVBMethod = true Then
hasSVGSupport = IsObject(CreateObject("Adobe.SVGCtl"))
End If
</script>
为了让互联网网页将这一信息返回给服务器，我们有必要修改标记，并在表格上添加一个隐藏字段：
action="http://jde:8080/artmaker/servlet/ArtMaker"
onsubmit="return setSVGStatus();">
<input type="hidden" name="imgType" value="jpg" />
上面的代码需要添加一段如下的代码，使在我们向服务器发送数据之前设置隐藏字段的值：
<script type="text/javascript">
<!-- <![CDATA[
function setSVGStatus()
{
if (hasSVGSupport)
{
var theForm = document.getElementById("artForm");
theForm.imgType.value = "svg";
}
return true;
}
// ]]> -->
</script>
读者可以从这里下载整个HTML文件的源代码
