SVG Monitor Examples:

SVG Monitor Example:

SVG Monitor with blue center bounded by a blue 100*75 rectangle, and red center bounded by a red r58.3 circle with center offset 7.5 upward.

Geometry of Hub

SVG Heart Examples

SVG Code Input:

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

    
<svg style='border:1px solid black' width='380' height='140' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='326' height='116' viewBox='-25, -25, 326, 116' 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>
  
   <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>
   <g transform='scale(3) translate(0 0)'>
   <path stroke='grey' stroke-width='4' fill='silver' opacity='.6'   d='m50,15 m0,-13 h48v26h-96v-26z' stroke-linejoin='round' />
   <use xlink:href='#plugassy' transform='translate(10,5.5)'/>
   <use xlink:href='#plugassy' transform='translate(25,5.5)'/>
   <use xlink:href='#plugassy' transform='translate(40,5.5)'/>
   <use xlink:href='#plugassy' transform='translate(55,5.5)'/>
   <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' />
   <rect x='0' y='0' width='100' height='30' stroke='blue' stroke-width='1' fill='None' />
   <circle cx='50' cy='15' r='1' stroke='blue' stroke-width='1' fill='cyan' />
   </g>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='295' y='17' font-size='20'>(100,0)</text>
<text x='5' y='135' font-size='20'>(0,30)</text>
<text x='295' y='135' font-size='20'>(100,30)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='325' cy='25' r='2' fill='black'/>
<circle cx='25' cy='115' r='2' fill='black'/>
<circle cx='325' cy='115' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output:

Hub