<svg width="200px"
  height="300px"
  viewBox="0 0 200 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
>
  <!-- black interior, no outline -->
  <rect x="10" y="10" width="30" height="50"/>

  <!-- no interior, black outline -->
  <rect x="50" y="10" width="20" height="40"
    style="fill: none; stroke: black;"/>

  <!-- blue interior, thick semi-transparent red outline -->
  <rect x="10" y="70" width="25" height="30"
    style="fill: #0000ff;
      stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/>

  <!-- semi-transparent yellow interior, dashed green outline -->
  <rect x="50" y="70" width="35" height="20"
    style="fill: yellow; fill-opacity: 0.5;
      stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>

  <!-- rx and ry equal, increasing -->
    <rect x="10" y="110" width="20" height="40" rx="2" ry="2"
      style="stroke: black; fill: none;"/>

    <rect x="40" y="110" width="20" height="40" rx="5"
      style="stroke: black; fill: none;"/>

    <rect x="70" y="110" width="20" height="40" ry="10"
      style="stroke: black; fill: none;"/>

    <!-- rx and ry unequal -->
    <rect x="10" y="160" width="20" height="40" rx="10" ry="5"
      style="stroke: black; fill: none;"/>

    <rect x="40" y="160" width="20" height="40" rx="5" ry="10"
      style="stroke: black; fill: none;"/>

</svg>