Dynamic Five-Layer Room SVGs

I’m putting together a small interactive demo and need four separate, fully-layered SVG illustrations—one each for a bedroom, living room, kitchen and washroom. Every SVG has to contain the exact same five editable <g> groups in this order: Walls, Ceiling, Trims, Accent and Lighting. My goal is to swap colours or hide/show those layers on-the-fly with plain JavaScript or CSS, so please keep the markup clean, logically named and easy to target.

Accent pieces vary by room:
• Bedroom – bed frame, furniture and the left/right wood panels
• Living room – TV stand
• Kitchen – cabinets
• Washroom – vanity or cabinets

I’ll share PNG reference images; treat them as inspiration rather than strict blueprints. I have a loose palette and general style in mind, but I’m happy to adjust based on your artistic input.

What I expect from you
1. Four optimised SVG files, 2400 × 1680 px (10:7 aspect ratio), as small as possible , with the five labelled groups described above.
2. A minimal HTML/CSS/JS snippet proving that I can dynamically recolour or toggle visibility for every layer in every room.
3. Brief notes on any SVG-specific considerations (clip paths, masks, filters) you used so I can maintain them later.

Deliver the artwork ready for modern browsers (inline SVG preferred), and please keep the vector paths tidy—no unnecessary metadata or raster elements. If that sounds clear, let’s get started!