<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='480' height='350' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='426' height='326' viewBox='-25, -25, 426, 326' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg width='400' viewBox='0 0 400 300'   xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
       <metadata>
           <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:connect='http://www.w3.org/1999/08/29-svg-connections-in-RDF#'>
               <rdf:Description about='#CableA'>
                   <connect:ends rdf:resource='#socket1'/>
                   <connect:ends rdf:resource='#ComputerA'/>
               </rdf:Description>
               <rdf:Description about='#CableB'>
                   <connect:ends rdf:resource='#socket2'/>
                   <connect:ends rdf:resource='#ComputerB'/>
               </rdf:Description>
               <rdf:Description about='#CableN'>
                   <connect:ends rdf:resource='#socket5'/>
                   <connect:ends>Everything</connect:ends>
               </rdf:Description>
               <rdf:Description about='#Hub'>
                   <connect:ends rdf:resource='#socket1'/>
                   <connect:ends rdf:resource='#socket2'/>
                   <connect:ends rdf:resource='#socket3'/>
                   <connect:ends rdf:resource='#socket4'/>
                   <connect:ends rdf:resource='#socket5'/>
               </rdf:Description>
           </rdf:RDF>
       </metadata>
       <title>Network</title>
       <desc>An example of a computer network based on a hub.</desc>

       <style>
           svg {
           /* Default styles to be inherited */
           }

           text { fill: black; stroke: none; }
       </style>

       <!-- Define symbols used in the SVG -->
       <defs>

           <!-- hubPlug symbol. Used by hub symbol -->
           <symbol id='hubPlug'>
           <path stroke='black' stroke-width='2' opacity='.6' fill='white'  d='m5,8.5 m0,-7.5h2 v4 h2 v9 h-8 v-9 h2 v-4 z' stroke-linejoin='round' />
           </symbol>
           <symbol id='light'>
           <path opacity='1' d='m1.5,1.5 m0,-1.5 h1.5v3h-3v-3z' />
           </symbol>
           <symbol id='lights'>
           <use xlink:href='#light' fill='green''/>
           <use xlink:href='#light' fill='gold' stroke='black' stroke-width='0.15' transform='translate(7,0)'/>
           </symbol>
           <symbol id='plugassy'>
           <use xlink:href='#hubPlug'/>
           <use xlink:href='#lights' transform='translate(0,16)'/>
           </symbol>

       <!-- hub symbol -->
       <symbol id='hub'>
           <desc>A typical 10BaseT/100BaseTX network hub</desc>
           <text x='0' y='40' font-size='8'>Hub</text>
           <path stroke='grey' stroke-width='4' fill='silver' opacity='.6'   d='m50,15 m0,-13 h48v26h-96v-26z' stroke-linejoin='round' />
           <!-- five groups each using the defined socket -->
           <title>Socket 1</title>
           <use xlink:href='#plugassy' transform='translate(10,5.5)'/>
           <title>Socket 2</title>
           <use xlink:href='#plugassy' transform='translate(25,5.5)'/>
           <title>Socket 3</title>
           <use xlink:href='#plugassy' transform='translate(40,5.5)'/>
           <title>Socket 4</title>
           <use xlink:href='#plugassy' transform='translate(55,5.5)'/>
           <title>Socket 5</title>
           <use xlink:href='#plugassy' transform='translate(70,5.5)'/>
           <path stroke='red' stroke-width='0' fill='red' opacity='1'   d='m50,15 m37.5,0 m-1,0 a2,2 0,0,1 4,0a2,2 0,0,1 -4,0' />
       </symbol>

       <!-- computer symbol -->
       <symbol id='computer'>
           <desc>A common desktop PC</desc>
           <g id='monitor'>
               <title>Monitor</title>
               <desc>A very fancy monitor</desc>
               <path stroke='silver' stroke-width='4' fill='blue' opacity='.6' d='m50,37.5 m0,-35.5 h48v56h-96v-56z' stroke-linejoin='round' />
               <path stroke='silver' stroke-width='3' opacity='.6' fill='black' d='m50,37.5 m-7,22.5 v0.5 l-7,13 h28 l-7,-13 v-0.5' stroke-linejoin='round' />
           </g>
           <g id='processor' transform='scale(0.5) translate(20 150)'>
               <title>The computer</title>
               <desc>A desktop computer - broad flat box style</desc>
               <rect width='160' height='60' fill='white'/>
               <g id='discDrive' transform='translate(70 8)'>
                   <title>disc drive</title>
                   <desc>A built-in disc drive</desc>
                   <rect width='58' height='3' x='12' y='8'/>
                   <rect width='8' height='2' x='12' y='15'/>
               </g>
               <circle cx='135' cy='40' r='5'/>
           </g>
       </symbol>
       </defs>

       <text x='0' y='15'>Network</text>

       <!-- Use the hub symbol. -->
       <g id='Hub' transform='translate(80 50)'>
           <title>Hub</title>
           <use xlink:href='#hub' transform='scale(2)'/>
       </g>

       <!-- Use the computer symbol. -->
       <g id='ComputerA' transform='translate(20 170)'>
           <title>Computer A</title>
           <use xlink:href='#computer' transform='scale(1)'/>
       </g>

       <!-- Use the same computer symbol. -->
       <g id='ComputerB' transform='translate(280 170)'>
           <title>Computer B</title>
           <use xlink:href='#computer' transform='scale(1)'/>
       </g>

       <!-- Draw Cable A. -->
       <g id='CableA' transform='translate(107 88)'>
           <title>Cable A</title>
           <desc>10BaseT twisted pair cable</desc>
           <path stroke='black' fill='None' d='M0,0c100,140 80,160 3,160'/>
       </g>

       <!-- Draw Cable B. -->
       <g id='CableB' transform='translate(142 88)'>
           <title>Cable B</title>
           <desc>10BaseT twisted pair cable</desc>
           <path stroke='black' fill='None' d='M0,0c100,180 50,160 148,160'/>
       </g>

       <!-- Draw Cable N. -->
       <g id='CableN' transform='translate(230 88)'>
           <title>Cable N</title>
           <desc>10BaseT twisted pair cable</desc>
           <path stroke='black' fill='None' d='M0,0c0,-70 20,-50 60,-50'/>
       </g>
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='395' y='17' font-size='20'>(400,0)</text>
<text x='5' y='345' font-size='20'>(0,300)</text>
<text x='395' y='345' font-size='20'>(400,300)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='425' cy='25' r='2' fill='black'/>
<circle cx='25' cy='325' r='2' fill='black'/>
<circle cx='425' cy='325' r='2' fill='black'/>
</svg>