Skip to content
Raw SVG templates

Floor Plan (SVG)

Simple 2-D floor plan with rooms, doors, and labels.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 360" width="640">
  <style>
    .wall  { stroke: #0f172a; stroke-width: 4; fill: none; }
    .iwall { stroke: #0f172a; stroke-width: 2; fill: none; }
    .door  { stroke: #16a34a; stroke-width: 2; fill: none; }
    .label { font: 13px Inter; fill: #0f172a; }
  </style>
  <!-- exterior -->
  <rect class="wall" x="20" y="20" width="480" height="320" rx="2"/>
  <!-- interior walls -->
  <line class="iwall" x1="240" y1="20"  x2="240" y2="180"/>
  <line class="iwall" x1="20"  y1="180" x2="500" y2="180"/>
  <line class="iwall" x1="340" y1="180" x2="340" y2="340"/>
  <!-- doors (arc cutouts) -->
  <path class="door" d="M220 180 A20 20 0 0 1 240 200" />
  <path class="door" d="M380 180 A20 20 0 0 1 360 200" />
  <path class="door" d="M120 180 A20 20 0 0 1 140 200" />
  <!-- furniture: bed + sofa -->
  <rect x="40" y="40" width="100" height="60" fill="#dbeafe" stroke="#1f47f5"/>
  <rect x="40" y="105" width="60" height="20" fill="#dbeafe" stroke="#1f47f5"/>
  <rect x="280" y="40" width="180" height="80" fill="#fef3c7" stroke="#b45309"/>
  <rect x="360" y="200" width="120" height="40" fill="#fef3c7" stroke="#b45309"/>
  <!-- labels -->
  <g class="label">
    <text x="100" y="160">Bedroom</text>
    <text x="370" y="160">Living</text>
    <text x="160" y="320">Kitchen</text>
    <text x="420" y="320">Bath</text>
    <text x="270" y="14" text-anchor="middle" font-weight="600">3-bedroom apartment, 78 m²</text>
  </g>
</svg>