Interactive Apartment Selector SVG Creation

Заказчик: AI | Опубликовано: 25.03.2026

Hi, I'm building a website for a residential apartment complex. The website has an interactive apartment selector where visitors click on a building, then a floor, then a specific apartment. For this I need someone to draw precise SVG polygon outlines on top of my images. You will NOT be writing any code. You are simply tracing shapes on top of images — like drawing an outline with a pen tool in Illustrator or Figma. WHAT IS THIS ABOUT? Imagine a visitor comes to the website: First they see an aerial photo of the whole complex with 3 buildings. They click on a building. Then they see a front photo of that building with 3 floors. They click on a floor. Then they see a floor plan with apartments. They click on an apartment. For each of these steps I need shapes (polygons) drawn on top of the images so the website knows where the user clicked. WHAT EXACTLY I NEED YOU TO DO: --- Step 1: Aerial photo (1 image, 3 shapes) --- One bird's eye photo of the whole complex. I need you to trace the roof outline of each of the 3 buildings. So that's 3 shapes on 1 image. I'm attaching a labeled version so you know which building is A, B, and C — no guessing needed. --- Step 2: Building front photos (6 images, 18 shapes) --- Six photos showing the front of each building section. Every building has 3 floors: Ground floor (bottom) Second floor (middle) Attic with sloped roof (top) The floor separations are clearly visible (balcony edges, roof line, ground line). I need you to draw a shape around each floor zone. That's 3 shapes per image = 18 shapes total. --- Step 3: Floor plans (17 images, ~55 shapes) --- Seventeen architectural floor plan drawings. They show rooms, furniture, and walls. Each plan has 1 to 4 apartments separated by thick black walls. I need you to trace the outline of each apartment along the outer walls. The apartment numbers are printed on the plans (101, 102, 201, etc.). Note: One floor plan (file: floor-b2-1np.png) shows only a parking garage — skip that one. WHAT I'M SENDING YOU: A ZIP folder called "apartment-map" containing: 25 PNG images (the aerial photo, 6 building fronts, 18 floor plans — all 1200px wide) A labeled reference image called "situ-overview-LABELED.png" showing which building is A, B, and C A specification file called "SPECIFICATION.md" with a table listing exactly how many apartments are on each floor plan, what their numbers are, and what to name each shape The specification file also has a FILE MAP at the top showing every single file and what to do with it, so you always know what you're looking at. WHAT I NEED BACK: One SVG file per image (24 files total) Each SVG contains the polygon shapes you drew. Example: <svg viewBox="0 0 1200 800"> <polygon id="apt-101" points="85,120 540,120 540,680 85,680" /> <polygon id="apt-102" points="560,120 1100,120 1100,680 560,680" /> </svg> The viewBox numbers must match the actual image dimensions in pixels. The id names must match what's in the specification file. One JSON file called "polygons.json" All the coordinates together in one structured file. The exact format is shown in the specification file. RULES: Be precise — trace along actual edges (walls, roof lines), not just rough rectangles No colors or styling — I only need the coordinates, I handle the visual design in code Staircases and elevators (central areas on floor plans) — do NOT include in any apartment shape Balconies and terraces — DO include if they belong to an apartment SVG file names should match the image names (e.g. floor-a1-2np.png becomes floor-a1-2np.svg) SUMMARY: Aerial photo: 1 image, 3 building shapes = 3 total Building fronts: 6 images, 3 floor shapes each = 18 total Floor plans: 17 images, 1-4 apartment shapes each = ~55 total GRAND TOTAL: 24 images, ~76 shapes Everything you need is in the attached ZIP. Start with the specification file — it tells you exactly what to do with each image. Thanks!