Using Sun Java Studio Creator with SVG

While this tutorial is not about SVG, the SVG files used in the tutorial are shown here together with screen shots of how they are rendered in the IE 6.0 browser. SVG files are XML files and are usually saved with the .svg extension. Here is the circles.svg file used in one of the examples.

<?xml version="1.0" encoding="iso-8859-1" 
standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg  width="100mm" height="100mm">
<circle cx="60" cy="120" r="25" fill="red"/>
<circle cx="120" cy="120" r="20" fill="blue"/>
<circle cx="120" cy="200" r="25" fill="magenta"/>
<circle cx="60" cy="200" r="15" fill="yellow" 
stroke="black" stroke-width="2"/>
</svg>

This creates a view area of 100mm x 100mm with four circles with different radii filled with different colors. Thetag denotes that it is a svg file. Also note the reference to the DTD in the DOCTYPE. More recently browsers have started supporting SVG file types and rendering them without the need of special viewers. If you just double click the file icon on your desktop, IE or FireFox would render them like any file with the .htm extension. The displayed portion of the graphic is shown in the next picture.

The second SVG file used in the example is UnicodeTest.svg (a tutorial I wrote in 2004). This was a test file created to see if the browser is capable of rendering the Unicode characters. More recently browsers have started supporting SVG files without the need for an SVG viewer such as the Adobe SVG Viewer. IE 7.0 supports it with an additional install of a Adobe ActiveX control, whereas some browsers like Firefox 2.0 and Opera have embedded viewers.

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/

TR/SVG/DTD/svg10.dtd">
<svg>
<text x="5" y="30" font-weight="bold" font-size="14">Unicode Characters 

and Internationalization
</text>
<text x="5" y="50" font-weight="bold" style="fill:green;">Scripts do not 

go right-to-left always!!
</text>
<text x="5" y="70" font-weight="bold" style="fill:blue;">--------------

----------------------------------------</text>
<text x="5" y="90"  style="fill:blue; text-decoration=underline">
Arabic <tspan  font-size="18" font-weight="bold" fill="red">معلّق
ة امرئ القيس</tspan></text>
<text x="5" y="120" style="fill:blue; text-decoration=underline">Kannada 

[South India: Dravidian Language] 
<tspan  style='font-size:14.0pt;
font-family:"BRH Sirigannada";font-size:18pt;font-weight:bolder;

fill:red;mso-bidi-font-family:"BRH Sirigannada";
color:red;background:yellow;mso-highlight:yellow;mso-font-kerning:0pt'>

</tspan></text>
<text x="5" y="150" 
style='fill:blue; font-family:HGMaruGothicMPRO; mso-ascii-font-family:
Arial;fill:red;font-size:18' ><tspan fill="blue" font-size="12">

Japanese:</tspan> 産業コメント</text>
<text x="5" y="180" fill="blue" >Tamil [Dravidian]:

<tspan style='fill:red;font-size:18.0pt;font-family:Latha;mso-ascii-

font-family:Latha;
color:black;mso-font-kerning:0pt' >அஇஈஉஊ</tspan></text>
<text x="5" y="220" ><tspan fill="blue" font-size="12">

Japanese:</tspan></text> 
<text x="75" y="220" style="writing-mode:tb;glyph-orientation-

vertical:0;"><tspan style='fill:blue;
font-family:HGMaruGothicMPRO; mso-ascii-font-family:
Arial;fill:red;font-size:18;'>産業コメント</tspan></text>
<text x="5" y="350" font-size="18" fill="red"><tspan font-size="12" 

fill="blue">Russian[ Cyrillic]:</tspan>Что
такое</text>
</svg> 

The next picture shows this rendered file on IE 6.0 with an Adobe viewer. The way these characters were generated was through the intermediary of a Microsoft Word document. The characters were copied from the web pages in their native languages and pasted into the Word document, through whose source these characters were mapped. You may be able to do the same in Microsoft FrontPage 2000 as well by pasting into the Normal tab of a new HTML file.