<metadata>

html

<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 */
      fill: white;
      stroke: black;
    }
    text {
      fill: black;
      stroke: none;
    }
    path {
      fill: none;
    }
  </style>

  <!-- Define symbols used in the SVG -->
  <defs>
    <!-- hubPlug symbol. Used by hub symbol -->
    <symbol id="hubPlug">
      <desc>A 10BaseT/100baseTX socket</desc>
      <path d="M0,10 h5 v-9 h12 v9 h5 v16 h-22 z" />
    </symbol>

    <!-- hub symbol -->
    <symbol id="hub">
      <desc>A typical 10BaseT/100BaseTX network hub</desc>
      <text x="0" y="15">Hub</text>
      <g transform="translate(0 20)">
        <rect width="253" height="84" />
        <rect width="229" height="44" x="12" y="10" />
        <circle fill="red" cx="227" cy="71" r="7" />
        <!-- five groups each using the defined socket -->
        <g id="sock1et" transform="translate(25 20)">
          <title>Socket 1</title>
          <use xlink:href="#hubPlug" />
        </g>
        <g id="socket2" transform="translate(70 20)">
          <title>Socket 2</title>
          <use xlink:href="#hubPlug" />
        </g>
        <g id="socket3" transform="translate(115 20)">
          <title>Socket 3</title>
          <use xlink:href="#hubPlug" />
        </g>
        <g id="socket4" transform="translate(160 20)">
          <title>Socket 4</title>
          <use xlink:href="#hubPlug" />
        </g>
        <g id="socket5" transform="translate(205 20)">
          <title>Socket 5</title>
          <use xlink:href="#hubPlug" />
        </g>
      </g>
    </symbol>

    <!-- computer symbol -->
    <symbol id="computer">
      <desc>A common desktop PC</desc>
      <g id="monitorStand" transform="translate(40 121)">
        <title>Monitor stand</title>
        <desc>
          One of those cool swivelling monitor stands that sit under the monitor
        </desc>
        <path d="m0,0 S 10 10 40 12" />
        <path d="m80,0 S 70 10 40 12" />
        <path d="m0,20 L 10 10 S 40 12 70 10 L 80 20z" />
      </g>
      <g id="monitor">
        <title>Monitor</title>
        <desc>A very fancy monitor</desc>
        <rect width="160" height="120" />
        <rect fill="lightgrey" width="138" height="95" x="11" y="12" />
      </g>
      <g id="processor" transform="translate(0 142)">
        <title>The computer</title>
        <desc>A desktop computer - broad flat box style</desc>
        <rect width="160" height="60" />
        <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 45)">
    <title>Hub</title>
    <use xlink:href="#hub" transform="scale(0.75)" />
  </g>

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

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

  <!-- Draw Cable A. -->
  <g id="CableA" transform="translate(107 88)">
    <title>Cable A</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c100,140 50,140 -8,160" />
  </g>

  <!-- Draw Cable B. -->
  <g id="CableB" transform="translate(142 88)">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c100,180 110,160 159,160" />
  </g>

  <!-- Draw Cable N. -->
  <g id="CableN" transform="translate(242 88)">
    <title>Cable N</title>
    <desc>10BaseT twisted pair cable</desc>
    <path d="M0,0c0,-70 20,-50 60,-50" />
  </g>
</svg>