Back to Blog

Building an SVG Indoor Map Editor

Jere on August 26, 2025
•
2 min read
svg
react
mappedin
web-apis
indoor-maps

One of the most challenging projects I've worked on recently is the SVG Indoor Map Editor - a tool that allows you to modify styling properties of indoor maps from Mappedin in real-time.

The Challenge

Indoor mapping is complex. Mappedin provides detailed SVG representations of building layouts, but sometimes you need to customize the appearance for specific use cases. The challenge was creating a user-friendly interface that could:

  1. Parse complex SVG structures
  2. Group elements by type (spaces, walls, windows, etc.)
  3. Provide real-time style editing
  4. Export the modified SVG

Technical Implementation

SVG Parsing and Manipulation

The core of the editor revolves around DOM manipulation of SVG elements:

const createSvgElement = (content: string): SVGSVGElement => {
  const parser = new DOMParser()
  const svgDoc = parser.parseFromString(content, 'image/svg+xml')
  return svgDoc.documentElement as unknown as SVGSVGElement
}

Group-Based Styling System

I organized the editor around different element groups, each with their own styling properties:

  • Spaces - Room areas and floor spaces
  • Walls - Structural elements
  • Shapes - Decorative or functional shapes
  • Entrances - Doorways and access points
  • Windows - Window elements

Each group has configurable properties:

  • Fill and stroke colors
  • Stroke width and opacity
  • Stroke dash patterns
  • Line caps

Real-Time Updates

Using React's state management, changes are applied immediately to the SVG:

const [styles, setStyles] = useState<Styles>({
  spaces: defaultGroupStyle,
  walls: defaultGroupStyle,
  // ... other groups
})

UI Components with shadcn/ui

The interface uses shadcn/ui components for a consistent, accessible experience:

  • Tabs for organizing different element groups
  • Accordions for collapsible style sections
  • Color inputs for visual color picking
  • Cards for grouping related controls

Key Features

  1. Real-time preview - See changes as you make them
  2. Group-based editing - Modify entire categories at once
  3. Export functionality - Download your customized SVG
  4. Responsive design - Works on different screen sizes

Challenges Overcome

SVG Namespace Handling

Working with SVG in the browser requires careful namespace management, especially when parsing and serializing.

Performance with Large Maps

Indoor maps can be incredibly detailed. I had to optimize rendering and updates to maintain smooth performance.

Cross-Browser Compatibility

Different browsers handle SVG manipulation slightly differently, requiring careful testing and fallbacks.

What's Next

Future improvements could include:

  • Undo/redo functionality
  • Style templates and presets
  • Batch operations across multiple elements
  • Integration with Mappedin's API for live map updates

The SVG Indoor Map Editor demonstrates how modern web technologies can create powerful tools for specialized use cases. You can try it out and see the code on my GitHub.

Tech Stack Used

  • React with TypeScript
  • DOM Parser API
  • HTML5 File API
  • shadcn/ui components
  • Tailwind CSS
  • Lucide icons

Building this tool taught me a lot about SVG manipulation, complex UI state management, and creating intuitive user experiences for technical tools.

Share Article