XML Graphics

I have been working on Enterprise application for more than 6 years which has got lot of components and business rules. I spent most of my first 2 years to understand business rules and interaction between different components. As a best practise we introduced "Ramp up Session" to understand enterprise applications and different components for new joiners. Always pictorial representation is easy to understand, so we designed this as white board session. But we could not document this (draw picture/slides) because lot of scenarios and keep on changing flow to accommodate business needs. So I was looking for a tool which can be highly configurable. Today while going through Apache open tools found xmlgraphics. This is what I am looking for and it satisfies all my requirements.

• Easy to configure shapes (2D and 3D) using XML
• Visual effect can also be defined
• Animation
• User interactions

Downloads / Sources:

• SVG Browser can be downloaded from this link and it has got lot of examples. Try out all samples to understand more.
• SVG w3c document can be found here

Example SVG file (which i created with my little (30 mins) understanding of SVG):

<?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">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="100" y="100" width="300" height="200"
          fill="yellow" stroke="navy" stroke-width="1" />
    <circle cx="700" cy="200" r="100"
          fill="red" stroke="blue" stroke-width="1" />
    <g stroke="green" >
       <line x1="400" y1="200" x2="600" y2="200"
           stroke-width="5" />
    </g>
    <text class="title" x="50%" y="10%" font-size="35" text-anchor="middle" >
       Component Connection</text>
    <text x="200" y="350" style="font-size:48;
        filter:none; fill:black; text-  anchor:middle">
       Component A</text>
    <text x="700" y="350" style="font-size:48; filter:none;
        fill:black; text- anchor:middle">
       Database</text>
</svg>

Output:

Real cool stuff!!! But I am not sure how much time needed to implement for all scenarios with animation.