Drawing With SVGs

Overview

In this exercise, you will build a simple illustrated scene using only SVG shapes and coordinate positioning, shown below:

You will construct the scene entirely through code by thinking carefully about placement, proportions, and the SVG coordinate system.

This exercise is designed to help you move from “understanding SVG structure” to “thinking spatially inside a viewBox.”

What You Are Practicing

By completing this challenge, you will strengthen your ability to:

• Work confidently inside a defined viewBox

• Think in terms of x/y coordinates

• Control placement using attributes

• Use basic SVG shapes (rect, circle, polygon)

• Reason about proportions and layout

• Understand stacking order in SVG

• Translate visual ideas into structured markup

• Make use of the group tag to organize related elements (e.g., the house will contain a roof, a body, and a door)

The Challenge

You will create a small illustrated scene using only:

• Rectangles

• Circles

• Polygons

Your scene must include:

• A sky and ground (background layers)

• A sun placed intentionally in the sky

• A house with a roof

• A door

Starting Code

<svg xmlns="http://www.w3.org/2000/svg" >

<!-- Layer: Sky -->

<g id="sky">

<rect />

</g>

<!-- Layer: Ground -->

<g id="ground">

<rect />

</g>

<!-- Layer: Sun -->

<g id="sun">

<circle />

</g>

<!-- Layer: House with Roof -->

<g id="house">

<!-- Main House Structure -->

<rect />

<!-- Roof -->

<polygon />

</g>

<!-- Layer: Door to House -->

<g id="door">

<rect />

<!-- Door handle (Circle) -->

<circle />

</g>

</svg>