In this example, we combine everything we learned so far to draw a house.
This is done by using circles, rectangles, lines, polylines, and polygons.
We start with the front of the house. Note that we not only have a class on the wall element but on the whole SVG as well.
<svg class="house" width="200px" height="200px" viewBox="-100 -100 200 200">
<style>
.house {
stroke: black;
stroke-width: 2px;
fill: white;
}
</style>
<polygon class="wall" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
</svg>
Then we add a roof on top of it. This is the only thing that is new here. We use a polyline
. The difference between a polyline
and a polygon
is that a polygon
will always close itself, and the polyline
will stay open. Note that we are using the stroke-linecap
property again as we did with the gingerbread figure example.
<svg class="house" width="200px" height="200px" viewBox="-100 -100 200 200">
<style>
.house {
stroke: black;
stroke-width: 2px;
fill: white;
}
</style>
<polygon class="wall" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
</svg>
Then we keep adding simple elements for the door, the windows, and the stairs. The final code for the image on the left will be as follows:
<svg class="house" width="200px" height="200px" viewBox="-100 -100 200 200">
<style>
.house {
stroke: black;
stroke-width: 2px;
fill: white;
}
.house .roof {
fill: none;
stroke: #d1495b;
stroke-width: 10px;
stroke-linecap: round;
}
.house .door {
fill: #d1495b;
}
.house .stair {
fill: gray;
}
.house .window {
fill: #fdea96;
}
.house .window-sill {
fill: #d1495b;
stroke-linecap: round;
}
.house .backdrop {
stroke: none;
fill: #F5F1EB;
}
</style>
<polygon class="wall" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
<polyline class="roof" points="-75,-8 0,-78 75,-8" />
<rect class="door" x="-45" y="10" width="30" height="60" rx="2" />
<circle class="door-knob" cx="-35" cy="40" r="2" />
<rect class="stair" x="-47" y="70" width="34" height="5" />
<rect class="stair" x="-49" y="75" width="38" height="5" />
<rect class="window" x="5" y="15" width="40" height="35" rx="5" />
<line x1="5" y1="32.5" x2="45" y2="32.5" />
<line x1="25" y1="15" x2="25" y2="50" />
<rect class="window-sill" x="2" y="48" width="46" height="5" rx="5" />
<circle class="window" cx="0" cy="-25" r="15" />
<line x1="-15" y1="-25" x2="15" y2="-25" />
<line x1="0" y1="-40" x2="0" y2="-10" />
</svg>