PageLayout.svg

image/svg+xml

Download

<svg width="580" height="280" viewBox="0 0 580 280" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
  .text_small   {font-style:normal;
                 font-weight:normal;
                 font-size:11px;
                 font-family:"Open Sans", sans-serif;
                 fill:black;
                }
  .text_normal  {font-style:normal;
                 font-weight:normal;
                 font-size:14px;
                 font-family:"Open Sans", sans-serif;
                 fill:black;
                }
  .text_big     {font-style:normal;
                 font-weight:normal;
                 font-size:28px;
                 font-family:"Open Sans", sans-serif;
                 fill:black;
                }
  .text_comment {font-style:italic;
                 font-weight:normal;
                 font-size:14px;
                 font-family:"Open Sans", sans-serif;
                 fill:black;
                }
  .text_mono    {font-style:normal;
                 font-weight:normal;
                 font-size:14px;
                 font-family:monospace, monospace;
                 white-space:pre;
                 fill:black;
                }
  </style>
  <defs>
    <marker id="a" markerHeight="10" markerWidth="10" orient="auto" refY="5">
      <path d="m0 0 10 5-10 5 3-5z"/>
    </marker>
  </defs>

<!-- border and background -->
  <rect x="1" y="1" width="99.4%" height="99.4%" rx="1%" 
        fill="whitesmoke" stroke="#CCCCCC" /> <!-- fill="hsl(0, 0%, 97%)" stroke="hsl(0, 0%, 80%)" /> -->
<!-- outer rectangle and texts -->
  <rect x="20" y="80" width="500" height="150" fill="white" stroke="black"/>
  <text class="text_big" x="178" y="50">Page Layout</text>
  <text class="text_mono" x="540" y="125" transform="rotate(90 540 125)">8   k B</text>
  <text class="text_normal" x="392" y="144">Free space</text>
<!-- first line -->
  <rect x="20" y="80" width="90" height="30" fill="lime" stroke="black"/>
  <text class="text_normal" x="30" y="100">Header</text>
  <rect x="110" y="80" width="60" height="30" fill="cornflowerblue" stroke="black"/>
  <text class="text_normal" x="115" y="100">ItemId</text>
  <rect x="170" y="80" width="60" height="30" fill="cornflowerblue" stroke="black"/>
  <text class="text_normal" x="175" y="100">ItemId</text>
  <path d="m235 95h78" style="marker-end:url(#a);stroke-dasharray:5, 5" stroke="black"/>
  <path d="m184 105-71 85" style="marker-end:url(#a)" fill="none" stroke="black"/>
  <path d="m138 105 202 85" style="marker-end:url(#a)" fill="none" stroke="black"/>
<!-- last line -->
  <path d="m100 215h-30" style="marker-end:url(#a);stroke-dasharray:5, 5" stroke="black"/>
  <rect x="105" y="200" width="245" height="30" style="fill:#80BFFF" stroke="black"/> <!-- fill:hsl(210, 100%, 75%) -->
  <text class="text_normal" x="121" y="220">Item</text>
  <rect x="345" y="200" width="85" height="30" style="fill:#80BFFF" stroke="black"/>  <!-- fill:hsl(210, 100%, 75%) -->
  <text class="text_normal" x="352" y="220">Item</text>
  <rect x="430" y="200" width="90" height="30" style="fill:springgreen" stroke="black"/>
  <text class="text_normal" x="440" y="220">Special</text>
<!-- explanation -->
  <text class="text_small" x="100" y="260">Content grows from start to center and from end to center.</text>
</svg>