Елемент <svg></svg> по суті є контейнером для графіки.
Коли ми додаємо його у html-розмітку - браузер створює систему координат viewport, де, власне, і розташовуватиметься весь наш графічний контент.
Атрибути height та width елемента svg задають розмір саме цього viewport. Тобто, нашої площини для графічного контенту.
Якщо їх не задати - то значення за замовчуванням будуть дорівнювати width=300px height=150px.
Якщо задати width=100% height=100% - в такому випадку viewport прийме 100% розмірів батьківського елементу.
В загальному розумінні, контур графіки визначає елемент <path>, який знаходиться в svg. Але для простих випадків побудови популярних геометричних об'єктів ми можемо використовувати попередньо встановлені елементи, такі як:
<line> - лінія
<polyline> - ламана лінія
<rect> - прямокутник
<circle> - коло
<ellipse> - еліпс
<polygon> - багатокутник
Всі вони є приватними аналогами елемента <path>
У кожного з цих елементів є невід'ємні атрибути "fill" (заливка) та "stroke" (обведення)