Convert Floor Plan to SVG
Transform scanned or photographed floor plans into clean SVG vectors. imagetosvg.com traces room walls and outlines for interactive property maps, real estate listings, and architecture presentations.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Floor Plans for Real Estate and Property
Interactive floor plan SVGs are increasingly common on property listing websites. Each room is a separate SVG path — hovering over a room shows its name and area, clicking reveals room-specific photos or details. Converting a scanned floor plan to SVG provides the structural basis for these interactive experiences without requiring CAD expertise.
- Property listing: hover-to-reveal room details in SVG floor plan
- Real estate CRM: link floor plan rooms to inspection photos
- Hotel websites: clickable SVG room layout for booking
- Interior design apps: SVG room layout as design canvas
- Property management: maintenance zone identification by room
Getting Clean Floor Plan SVG from Scanned Drawings
Floor plans are typically drawn in black and white with clear room boundaries — ideal for vectorization. Scan at 300 DPI minimum. A flatbed scanner produces better results than a phone photo of a plan. The B&W or Line Art preset traces wall lines as paths. After converting, open in Inkscape to separate individual room paths and add room-specific attributes for interactive use.
- 300 DPI scan minimum, 600 DPI for detailed plans with fine text
- B&W mode: traces all wall lines as black paths on transparent background
- Crop precisely to the floor plan boundary
- Remove scale bars and north arrows before uploading for cleaner output
- Add id='room-living' to each room path in Inkscape for JavaScript access
Adding Interactivity to SVG Floor Plans
An SVG floor plan becomes interactive with a few lines of JavaScript. Identify each room path in the SVG, assign descriptive id attributes, and attach JavaScript event listeners for hover and click interactions. CSS handles the visual feedback — room highlighting, color change on hover, and tooltip display — entirely without JavaScript in modern browsers.
- CSS hover: path:hover { fill: rgba(0,100,255,0.2); cursor: pointer; }
- JavaScript click: document.querySelectorAll('[data-room]').forEach(el => el.addEventListener('click', fn))
- React: map over SVG paths, add onClick props with room data
- Tooltip: show room area m² or ft² on hover
- Legend: color-code rooms by type (bedroom blue, bathroom green)
Frequently Asked Questions
Can I convert a PDF floor plan to SVG?
If the PDF contains vector data, open it in Inkscape (File > Import) — Inkscape can extract the vector geometry directly as SVG. If the PDF is a raster scan, export as high-resolution PNG first, then upload to our converter.
Will dimension text on the floor plan be readable in the SVG?
Dimension numbers trace as path outlines and look correct visually, but aren't editable as text. For editable dimensions, add SVG text elements in Inkscape over the traced path positions.
How do I make individual room shapes selectable in SVG?
After converting, open in Inkscape. Use the Node editor to confirm each room wall is a closed path. If not, close open paths using Path > Break Apart then rejoin. Add id='room-bedroom' etc. to each closed room path for JavaScript targeting.
Can I add furniture layout to an SVG floor plan?
Yes. Open the floor plan SVG in Inkscape or Illustrator. Import furniture SVG icons (search for free furniture icon SVGs) and place them on a new layer above the floor plan. Save as a combined SVG.
What scale should I set for a floor plan SVG?
For web use, the scale is handled by CSS. For print, set the SVG viewBox dimensions to match the drawing scale in mm (e.g., 1:100 scale: a 10×8m room is 100×80mm in the SVG).
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free