За базу возьмём «холст» 400х400 пикселей. Векторная графика хороша тем, что её потом можно изменять без потери качества до больших или меньших размеров.
<svg> width="400" height="400" viewBox="0 0 400 400"> </svg>
Что нам понадобится дальше? Дом =
прямоугольник (стены);
треугольник (крыша);
прямоугольники (дверь, окна).
Начнём со стен:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<rect x="100" y="160" width="200" height="160" fill="#E0E0E0"/>
</svg>
Здесь у нас прямоугольник (rect) с началом координат ширина 100 и высота 160, и далее ширина прямоугольника 200 пикселей, высота 160 с заливкой цветом RGB: #E0E0E0.
С крышей будет немного сложнее:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<rect x="100" y="160" width="200" height="160" fill="#E0E0E0"/>
<polygon points="80,160 200,60 320,160" fill="#B03030"/>
</svg>
Здесь мы используем многоугольник (polygon), вообще с его помощью можно было и прямоугольники нарисовать, но прямоугольник более «простая» фигура и чтобы не стрелять из пушек по воробьям, с ними «точками» не заморачиваются. С треугольниками уже так не получится, здесь приходится указывать координаты точек, «внутренняя» часть которых заливается, в нашем случае цветом #B03030, а координат у нас три 80,160 это тоже самое что и x="80" y="160", аналогично с двумя другими точками 200,60 и 320,160.
Давайте теперь добавим окна и дверь:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<rect x="100" y="160" width="200" height="160" fill="#E0E0E0"/>
<polygon points="80,160 200,60 320,160" fill="#B03030"/>
<rect x="180" y="220" width="40" height="100" fill="#704214"/>
<rect x="120" y="190" width="40" height="40" fill="#AEE1F9"/>
<rect x="240" y="190" width="40" height="40" fill="#AEE1F9"/>
</svg>
По тому же принципу, что и стены. Нам остаётся только добавить обводку для чёткости.
stroke="#333"
stroke-width="2"
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<rect x="100" y="160" width="200" height="160" fill="#E0E0E0" stroke="#333" stroke-width="2"/>
<polygon points="80,160 200,60 320,160" fill="#B03030" stroke="#333" stroke-width="2"/>
<rect x="180" y="220" width="40" height="100" fill="#704214" stroke="#333" stroke-width="2"/>
<rect x="120" y="190" width="40" height="40" fill="#AEE1F9" stroke="#333" stroke-width="2"/>
<rect x="240" y="190" width="40" height="40" fill="#AEE1F9" stroke="#333" stroke-width="2"/>
</svg>
Иконка готова.
