<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!--
 Copyright (c) 2003 World Wide Web Consortium,

 (Massachusetts Institute of Technology, European Research Consortium for
 Informatics and Mathematics, Keio University). All Rights Reserved. This
 work is distributed under the W3C(r) Software License [1] in the hope that
 it will be useful, but WITHOUT ANY WARRANTY; without even the implied
 warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

 [1] http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231

 $Id: dom-architecture.svg 226242 2005-06-17 20:59:08Z mrglavas $
 -->

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink='http://www.w3.org/1999/xlink' width='640' height='440'
     viewBox='0 0 640 440'>
  
  <title>DOM Architecture</title>
  
  <desc>
    This diagram represents the DOM Architecture. It contains all the
    modules defined by the DOM specifications.
  </desc>
  
  <defs>
    <!-- I picked up this part in one of the Batik Apache example and
         modified it a bit
         See http://xml.apache.org/batik
         "Top level architecture diagram"
           author vincent.hardy@eng.sun.com
     -->
    <filter id="dropShadow" x="0" y="0" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2 2"/> 
      <feOffset dx="2" dy="2" />
      <feComponentTransfer result="shadow">
	<feFuncA type="linear" slope=".25" intercept="0" />
      </feComponentTransfer>
      <feMerge>
	<feMergeNode />
	<feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    
    <marker id="arrowHead" markerWidth="12" markerHeight="9" 
	    viewBox="0 0 4 3" refX="4" refY="1.5" orient="auto">
      <path fill="black" stroke="none" d="M 0 0 L 4 1.5 L 0 3 Z" />
    </marker>

    <!-- Informations -->
    <g id='infos'>
      <line class="arrowLinks" x1="0" y1="0" x2="30" y2="0"/>
      <text x="35" y="5">Depends on</text>
    </g>

    <!-- Small boxes -->
    <g id="module" filter="url(#dropShadow)">
      <rect x="0" y="0" width="100" height="30" />
    </g>
    <g id="baseModule">
      <use xlink:href="#module"/>
      <line class="arrowLinks" x1="50" y1="45" x2="50" y2="30"/>
    </g>
    <g id="extendsModule">
      <use xlink:href="#module"/>
      <line class="links" x1="50" y1="-15" x2="50" y2="0"/>
    </g>
    <g id="extendsBaseModule">
      <use xlink:href="#baseModule"/>
      <line class="links" x1="50" y1="0" x2="50" y2="-15"/>
    </g>

    <!-- Large Small boxes -->
    <g id="moduleLargeSmall" filter="url(#dropShadow)">
      <rect x="0" y="0" width="125" height="30" />
    </g>
    <g id="baseModuleLargeSmall">
      <use xlink:href="#moduleLargeSmall"/>
      <line class="arrowLinks" x1="62.5" y1="45" x2="62.5" y2="30"/>
    </g>
    <g id="extendsModuleLargeSmall">
      <use xlink:href="#moduleLargeSmall"/>
      <line class="links" x1="62.5" y1="-15" x2="62.5" y2="0"/>
    </g>
    <g id="extendsBaseModuleLargeSmall">
      <use xlink:href="#baseModuleLargeSmall"/>
      <line class="links" x1="62.5" y1="0" x2="62.5" y2="-15"/>
    </g>

    <!-- Large boxes -->
    <g id="moduleLarge" filter="url(#dropShadow)">
      <rect x="0" y="0" width="200" height="30" />
    </g>
    <g id="baseModuleLarge">
      <use xlink:href="#moduleLarge"/>
      <line class="arrowLinks" x1="100" y1="45" x2="100" y2="30"/>
    </g>
    <g id="extendsModuleLarge">
      <use xlink:href="#moduleLarge"/>
      <line class="links" x1="100" y1="-15" x2="100" y2="0"/>
    </g>
    <g id="extendsBaseModuleLarge">
      <use xlink:href="#baseModuleLarge"/>
      <line class="links" x1="100" y1="0" x2="100" y2="-15"/>
    </g>

    <!-- Extra Large boxes -->
    <g id="moduleExtraLarge" filter="url(#dropShadow)">
      <rect x="0" y="0" width="300" height="30" />
    </g>
    <g id="baseModuleExtraLarge">
      <use xlink:href="#moduleExtraLarge"/>
      <line class="arrowLinks" x1="150" y1="45" x2="150" y2="0"/>
    </g>
    <g id="extendsModuleExtraLarge">
      <use xlink:href="#moduleExtraLarge"/>
      <line class="links" x1="150" y1="-15" x2="150" y2="0"/>
    </g>
    <g id="extendsBaseModuleExtraLarge">
      <use xlink:href="#baseModuleExtraLarge"/>
      <line class="arrowLinks" x1="150" y1="0" x2="150" y2="-15"/>
    </g>

  </defs>
  <style type='text/css'>
svg {
  font-family: sansserif, sans-serif;
  font-size:   12;
}
text {
  fill:        black;
}
rect {
  fill:        white;
  stroke:      black;
}
.label { 
  text-anchor: middle;
  stroke:      none;
}
.DOMLabel { 
  fill:        gold;
  text-anchor: middle;
}
.package {
  fill:        orange;
}
.arrowLinks {
  fill:        none;
  stroke:      black;
  marker-end:  url(#arrowHead);
}
.links {
  fill:        none;
  stroke:      black;
}
.red {
  stroke: red;
}
.depend {
  stroke-dasharray: 2, 3, 5, 3;
}
  </style>

  <g id='DOM3' transform="translate(10, 10)">

    <rect x="-50%" y="-50%" width="200%" height="200%" style='fill:#ffffff'/>

    <g filter="url(#dropShadow)">
      <rect class='package' x="0" y="0" width="620" height="410"/>
    </g>
    <g transform="translate(480, 20)">
      <use xlink:href="#infos"/>
    </g>

    <g transform="translate(10, 15)">
      <g id="DOMBase" transform="translate(187.5, 0)">
	<desc>DOM Core, XML, and HTML. XML extends Core. HTML extends
	  Core.</desc>
	<g id="Core" transform="translate(62.5, 0)">
	  <use xlink:href="#baseModule"/>
	  <text class="label" x="50" y="20">Core</text>
	</g>
	
	<g id="XML" transform="translate(0, 60)">
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">XML</text>    
	</g>
	
	<g id="HTML" transform="translate(125, 60)">
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">HTML</text>    
	</g>
	
	<g transform="translate(50, 45)">
	  <line class="links" x1="0" y1="0" x2="125" y2="0"/>
	</g>
      </g>
      
      <g transform="translate(0, 120)">
	<g id="XPath" transform="translate(0, 0)">
	  <desc>DOM XPath. XPath on Core.</desc>
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">XPath</text>
	</g>
      
	<g id="Validation" transform="translate(125, 0)">
	  <desc>DOM Validation. Validation on Core.</desc>
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">Validation</text>
	</g>      
      
<!--
	<g id="DocumentLS" transform="translate(250, 0)">
	  <desc>DOM DocumentLS. DocumentLS depends on Core.</desc>
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">DocumentLS</text>    
	  <g id="ElementLS" transform="translate(0, 60)">
	    <desc>DOM ElementLS. ElementLS depends on Core.</desc>
	    <use xlink:href="#module"/>
	    <text class="label" x="50" y="20">ElementLS</text>    
	  </g>
	</g>
	-->
	<g transform="translate(362.5, 0)">
	  <g id="LS">
	    <desc>DOM Load and Save. Load and Save depends on Core.</desc>
	    <use xlink:href="#extendsBaseModule"/>
	    <text class="label" x="50" y="20">LS</text>    
	  </g>
	  <g id="LS-Async" transform="translate(0, 60)">
	    <desc>DOM Load Asynchronous. It depends on Load.</desc>
	    <use xlink:href="#extendsModule"/>
	    <text class="label" x="50" y="20">LS-Async</text>    
	  </g>
      	</g>

	<g id="Views" transform="translate(475, 0)">
	  <desc>DOM Views. Views depends on Core.</desc>
	  
	  <use xlink:href="#extendsModule"/>
	  <text class="label" x="50" y="20">Views</text>
	  
	  <!-- links Views with UIEvents and CSS -->
	  <line class="arrowLinks" x1="20" y1="135" x2="20" y2="30"/>
	  <line class="links" x1="20" y1="135" x2="25" y2="135"/>

	  <line class="arrowLinks" x1="10" y1="135" x2="10" y2="30"/>
	  <line class="links" x1="0" y1="135" x2="10" y2="135"/>
	</g>    

      </g>
      
      <g transform="translate(0, 120)">

	<g transform="translate(0, 60)">
	  <g id="Traversal">
	    <desc>DOM Traversal. Traversal depends on Core.</desc>
	    <use xlink:href="#module"/>
	    <text class="label" x="50" y="20">Traversal</text>    
	  </g>
	  <g id="Range" transform="translate(0, 60)">
	    <desc>DOM Range. Range depends on Core.</desc>
	    <use xlink:href="#module"/>
	    <text class="label" x="50" y="20">Range</text>    
	  </g>
	</g>

	<g id='DOMEvents' transform="translate(125, 0)">
	
	  <desc>DOM Events, UIEvents, MouseEvents, Mutations, and
	  HTMLEvents. UIEvents extends Events and depends on
	  Views. MouseEvents extends UIEvents. MutationEvents extends
	  Events. HTMLEvents extends Events.</desc>

	  <g id="Events" transform="translate(125, 0)">
	    <use xlink:href="#extendsModule"/>
	    <text class="label" x="50" y="20">Events</text>    
	  </g>	  
	  
	  <g transform="translate(0, 120)">
	    
	    <g id="HTMLEvents" transform="translate(0, 0)">
	      <use xlink:href="#extendsModule"/>
	      <text class="label" x="50" y="20">HTMLEvents</text>    
	    </g>
	    
	    <g id="MutationEvents" transform="translate(125, 0)">
	      <use xlink:href="#extendsModule"/>
	      <text class="label" x="50" y="20">MutationEvents</text>
	      <g id="MutationNameEvents" transform="translate(-12.5, 60)">
		<use xlink:href="#moduleLargeSmall"/>
		<text class="label" x="62.5" y="20">MutationNameEvents</text>
		<line class="arrowLinks" x1="62.5" y1="0" x2="62.5" y2="-30"/>
	      </g>
	    </g>
	  
	    <g transform="translate(250, 0)">
	      <g id="UIEvents">
		<use xlink:href="#extendsModule"/>
		<text class="label" x="50" y="20">UIEvents</text>    
	      </g>
	      
	      <g transform="translate(-250, 120)">
		<g id="KeyboardEvents" transform="translate(0, 0)">
		  <use xlink:href="#extendsModule"/>
		  <text class="label" x="50" y="20">KeyboardEvents</text>    
		</g>
		
		<g id="TextEvents" transform="translate(125, 0)">
		  <use xlink:href="#extendsModule"/>
		  <text class="label" x="50" y="20">TextEvents</text>    
		</g>
		
		<g id="MouseEvents" transform="translate(250, 0)">
		  <use xlink:href="#extendsModule"/>
		  <text class="label" x="50" y="20">MouseEvents</text>    
		</g>
		<g transform="translate(50, -15)">
		  <line class="links" x1="0" y1="0" x2="250" y2="0"/>      
		</g>
		<line class="arrowLinks"
		      x1="275" y1="-15" x2="275" y2="-90"/>      
	      </g>
	    </g>
	  </g>
	  <g transform="translate(50, 45)">
	    <line class="links" x1="0" y1="60" x2="250" y2="60"/>      
	    <line class="arrowLinks" x1="125" y1="0" x2="125" y2="-15"/>      
	    <line class="links" x1="125" y1="-15" x2="125" y2="60"/>
	  </g>
	</g>
      
	<g transform="translate(500, 60)">
	  <desc>DOM StyleSheets, CSS, and CSS2. CSS depends on StyleSheets and
	    Views. CSS2 depends on CSS.</desc>
	  
	  <g id="StyleSheets" transform="translate(0, 0)">
	    <use xlink:href="#baseModule"/>
	    <text class="label" x="50" y="20">StyleSheets</text>    
	  </g>
	  
	  <g id="CSS" transform="translate(0, 60)">
	    <use xlink:href="#extendsModule"/>
	    <text class="label" x="50" y="20">CSS</text>    
	  </g>
	  
	  <g id="CSS2" transform="translate(0, 120)">
	    <use xlink:href="#module"/>
	    <text class="label" x="50" y="20">CSS2</text>    
	    <line class="arrowLinks"
		  x1="50" y1="0" x2="50" y2="-30"/>      
	  </g>
	</g>
      </g>
      
      <!-- now, the conformant dependencies -->

      <g>
	<line class="links" x1="300" y1="105" x2="300" y2="30"/>      
	<line class="links" x1="50" y1="105" x2="587.5" y2="105"/>      

	<line class="links" x1="108" y1="105" x2="108" y2="195"/>      
	<line class="links" x1="100" y1="195" x2="108" y2="195"/>      
	<line class="links" x1="113" y1="105" x2="113" y2="255"/>      
	<line class="links" x1="100" y1="255" x2="113" y2="255"/>      

<!--
	<line class="links" x1="240" y1="105" x2="240" y2="195"/>	
	<line class="links" x1="240" y1="195" x2="250" y2="195"/>	
	<line class="links" x1="235" y1="105" x2="235" y2="195"/>	
	<line class="links" x1="225" y1="195" x2="235" y2="195"/>	

	<line class="links" x1="300" y1="105" x2="300" y2="180"/>	
-->

	<line class="links" x1="587.5" y1="105" x2="587.5" y2="180"/>      
      </g>
      
    </g>
  </g>
</svg>