SVG в HTML

Ви можете вставляти SVG елементи безпосередньо у свої HTML-сторінки.

Вставте SVG безпосередньо на сторінки HTML

Ось приклад простої графіки SVG:

а ось код HTML:

Пояснення коду SVG:

• Зображення SVG починається з елементу <svg>
• Атрибути ширини та висоти елемента <svg> визначають ширину та висоту зображення SVG
• Елемент <circle> використовується для малювання кола
• Атрибути cx та cy визначають координати x та y центру кола. Якщо cx та cy не встановлено, центр кола встановлено на (0, 0)
• Атрибут r визначає радіус кола
• Атрибути stroke (обведення) та stroke-width (ширина обведення) керують виглядом контуру фігури. Ми встановлюємо для контуру кола зелену "border" (межу) розміром 4 пікселя
• Атрибут fill (заливки) стосується кольору всередині кола. Ми встановили жовтий колір заливки
• Закриваючий тег </svg> закриває SVG зображення

Нотатка: Оскільки SVG написаний у XML, всі елементи мають бути належним чином закриті!