Building 2-D Graphics Applications Using Java and SVG : Page 2

A Laconic SVG Tutorial
Now that you've seen some rendered SVG, here's how it works. The simplest way to create SVG files is with an SVG editor. There are quite a few SVG editors available today; in my opinion the best is Adobe Go Live. Text in SVG is both selectable and searchable, and can be displayed in any direction—which makes SVG a good choice for displaying text in non-Romanic languages such as Chinese, Japanese, or Arabic. After you familiarize yourself with the viewer plugin features (be sure to explore the right-click menu while viewing the SVG), here's the code, so you can see how simple it is to read and relate the SVG code to the rendered version.

The quickest way to understand the code is to walk through it. I've added extensive comments to the SVG code below that describe the purpose of the various SVG-specific elements:

   <?xml version="1.0" standalone="no"?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   
   <!-- defines the width and height in cm, and also the 
        viewing area (viewBox) in which the SVG gets 
        rendered-->
   <svg width="24cm" height="7.2cm" viewBox="0 0 1000 300"
        xmlns="http://www.w3.org/2000/svg">   
   
   <!-- defines a rectangle of certain height and width based 
        on x-y coordinate system within the viewbox -->
   <rect x="10" y="80" width="900" height="30" fill="orange">   
   
      <!-- animates the rectangle on y axis from 
           height 40 to 80 for 2s, once only -->
      <animate attributeName="y" values="40;80" dur="2s" 
         repeatCount="1"/>
   </rect>
   
   <rect x="10" y="110" width="900" height="30" fill="yellow">
      <animate attributeName="y" values="90;110" dur="2s" 
         repeatCount="1"/>
   </rect>
   
   <rect x="10" y="140" width="900" height="30" 
      fill="lightgreen">
   </rect>
   
   <rect x="10" y="170" width="900" height="30" fill="yellow">
      <animate attributeName="y" values="190;170" dur="2s" 
         repeatCount="1"/>
   </rect>
   
   <rect x="10" y="200" width="900" height="30" fill="orange">
      <animate attributeName="y" values="240;200" dur="2s" 
         repeatCount="1"/>
   </rect>
   
   <!-- defines the curved path seen in the SVG. M means 
        initially move to (100, 200) x, y position. C is a 
        cubic bezier command that handles the rest of the 
        path. -->
   <defs>
      <path id="MyPath"
          d="M 100 200
             C 300 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
     </defs> 
   <desc>SVG Example</desc>
   
   <!-- writes the text on the curved path with indefinite 
        animation of color -->
     <use xlink:href="#MyPath" fill="none" stroke="red"  />
     <text font-family="Verdana" font-size="42.5" 
       fill="blue" >
       <textPath xlink:href="#MyPath" startOffset="20%">
          <animateColor attributeName="fill" 
             values="blue;yellow;green;red;blue" begin="5s" 
             dur="10s" repeatCount="indefinite"/>
           SVG
         <tspan dy="30" fill="red">
           <animateColor attributeName="fill" 
              values="red;blue;yellow;green;red" begin="5s" 
              dur="10s" repeatCount="indefinite"/>
            Java, XML, JSP
         </tspan>
         <tspan dy="-30" fill="green">
           <animateColor attributeName="fill" 
              values="green;red;blue;yellow;green" begin="5s" 
              dur="10s" repeatCount="indefinite"/>
           DevX
         </tspan>
       </textPath>
     </text>
   
   </svg>

You can see from the preceding code that SVG is an XML vocabulary. You can change or animate any SVG element easily by making alterations to the base XML file. Because you can draw shapes, add overlay text, lines, and other graphic shapes easily, SVG is an excellent candidate for Web-based mapping and directions applications.

Previous Page

Next Page

---

• Download The Code for this Article

---