René Nyffenegger's collection of things on the web
René Nyffenegger on Oracle - Most wanted - Feedback -
 

SVG examples: organigram

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

  <!ENTITY text_x      "40"                        >
  <!ENTITY text_y      "23"                        >
  <!ENTITY font_family "font-family:'Verdana';"    >
  <!ENTITY font_size   "font-size:12;"             >
  <!ENTITY text_anchor "text-anchor:middle;"       >

]>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width='800px' height='300px' >

<defs>
  <rect id='r' width='80' height='35' style='fill:#ccffcc;' />
  <style type="text/css">
      <![CDATA[
                    .l {stroke:black;stroke-width:2px;opacity:1;}
      ]]>
      </style>
</defs>


<g transform='translate(300,40)'>
  <use xlink:href='#r'  />
  <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >Mgmt</text>
</g>

<g transform='translate(400,120)'>
  <g transform='translate(0,0)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >HR</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>

  <g transform='translate(120,0)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >F</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>
</g>



<line class='l' x1='340' x2='560' y1='100' y2='100' /> 
<line class='l' x1='340' x2='340' y1='75'  y2='180' /> 

<g transform='translate(120,180)'>

  <line class='l' x1='40' x2='400' y1='0' y2='0' /> 

  <g transform='translate(0,20)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >M</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>
  
  <g transform='translate(120,20)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >S</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>

  <g transform='translate(240,20)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >Ops</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>

  <g transform='translate(360,20)'>
    <use xlink:href='#r' />
    <text x="&text_x;" y="&text_y;" style="&font_family;&font_size;&text_anchor;" >P</text>
    <line class='l' x1='40' x2='40' y1='-20' y2='0' /> 
  </g>
</g>

</svg>
See also other SVG examples.