img/html-tree.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="261" viewBox="-2 -2 440 261"><style>
    @font-face {
      font-family: 'PT Mono';
      font-style: normal;
      font-weight: 400;
      src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
    }
    .box {
      stroke: #666;
      fill: url(#boxgrad);
      border-radius: 4px;
    }
    .leafbox {
      fill: url(#leafgrad);
    }
    .boxtext {
      font-size: 20px;
      font-family: "PT Mono";
      stroke: none;
      fill: black;
    }
    .leafboxtext { font-family: "Georgia"; }
    .arrow { stroke: black; }
  </style>
  <defs>
    <linearGradient id="boxgrad" x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#f8f8f8" offset="0%"></stop>
      <stop stop-color="#e8e8f2" offset="100%"></stop>
    </linearGradient>
    <linearGradient id="leafgrad" x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#f8f8f8" offset="0%"></stop>
      <stop stop-color="#caf0f0" offset="100%"></stop>
    </linearGradient>
  </defs>
<g><rect x="0.5" y="0.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="9.700000000000001" y="23" class="boxtext" fill="black" stroke="none">html</text><rect x="91.5" y="0.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="100.7" y="23" class="boxtext" fill="black" stroke="none">head</text><path d="M 66.5 15.5 L 91.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(91.5 15.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="182.5" y="0.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="23" class="boxtext" fill="black" stroke="none">title</text><path d="M 157.5 15.5 L 182.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(182.5 15.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="285.5" y="0.5" width="150" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="295.1" y="23.75" class="boxtext leafboxtext" fill="black" stroke="none">My home page</text><path d="M 260.5 15.5 L 285.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 15.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="91.5" y="45.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="100.7" y="68" class="boxtext" fill="black" stroke="none">body</text><path d="M 74.5 15.5 L 74.5 56.5 A 4 4 0 0 0 78.5 60.5 L 91.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(91.5 60.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="182.5" y="45.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="68" class="boxtext" width="78" fill="black" stroke="none">h1</text><path d="M 157.5 60.5 L 182.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(182.5 60.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="285.5" y="45.5" width="150" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="295.1" y="68.75" class="boxtext leafboxtext" fill="black" stroke="none">My home page</text><path d="M 260.5 60.5 L 285.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 60.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="182.5" y="90.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="113" class="boxtext" width="78" fill="black" stroke="none">p</text><path d="M 165.5 60.5 L 165.5 101.5 A 4 4 0 0 0 169.5 105.5 L 182.5 105.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(182.5 105.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="285.5" y="90.5" width="150" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="295.1" y="113.75" class="boxtext leafboxtext" width="150" fill="black" stroke="none">Hello! I am...</text><path d="M 260.5 105.5 L 285.5 105.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 105.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="182.5" y="135.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="158" class="boxtext" width="78" fill="black" stroke="none">p</text><path d="M 165.5 60.5 L 165.5 146.5 A 4 4 0 0 0 169.5 150.5 L 182.5 150.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(182.5 150.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="285.5" y="135.5" width="150" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="295.1" y="158.75" class="boxtext leafboxtext" width="150" fill="black" stroke="none">I also wrote...</text><path d="M 260.5 150.5 L 285.5 150.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 150.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="376.5" y="180.5" width="59" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="386.1" y="203.75" class="boxtext leafboxtext" fill="black" stroke="none">here</text><rect x="285.5" y="180.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="294.7" y="203" class="boxtext" width="66" fill="black" stroke="none">a</text><path d="M 268.5 150.5 L 268.5 191.5 A 4 4 0 0 0 272.5 195.5 L 285.5 195.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 195.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><path d="M 351.5 195.5 L 376.5 195.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(376.5 195.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path><rect x="285.5" y="225.5" width="24" height="31" class="box leafbox" rx="4" ry="4"></rect><text x="295.1" y="248.75" class="boxtext leafboxtext" fill="black" stroke="none">.</text><path d="M 268.5 150.5 L 268.5 237.5 A 4 4 0 0 0 272.5 241.5 L 285.5 241.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(285.5 241.5) rotate(90) scale(1)" scale="1" stroke="none" fill="rgb(0, 0, 0)"></path></g></svg>