Какво е SVG?

SVG (Мащабируеми векторни графики) е формат за векторна графика, базиран на XML, за създаване на двумерна графика. За разлика от растерните изображения, SVG описва графиката с помощта на математически формули, което позволява мащабиране на изображенията без загуба на качество.

Основни характеристики на SVG:

• Векторен формат: Изображенията се описват с помощта на геометрични примитиви (точки, линии, криви, фигури), а не с пиксели.
• XML основа: Структурата на SVG документа е базирана на синтаксиса XML, което го прави лесен за четене и редактиране.
• Мащабируемост: Изображенията могат да се увеличават или намаляват без загуба на острота и качество.
• Интерактивност: Елементите на SVG могат да бъдат интерактивни, реагирайки на събития (кликове, навеждане и т.н.) чрез JavaScript.
• Стил: Външният вид на елементите на SVG може да бъде стилизиран с помощта на CSS.
• Анимация: SVG поддържа анимация на елементи с помощта на вградени средства или CSS/JavaScript.

Предимства при използване на SVG в уеб:

• Идеално за икони и лога: Мащабируемостта осигурява ясна визуализация на всяко разрешение на екрана.
• По-малък размер на файловете: За много типове графики, SVG файловете могат да бъдат по-малки от подобни растерни формати.
• SEO-приятелски: Текстът в SVG се индексира от търсачките.
• Достъпност: Благодарение на текстовата си природа, SVG е по-достъпен за помощни технологии.
• Лесна модификация: Тъй като е XML, съдържанието му може да бъде динамично променяно.

Пример за прост SVG изображение (кръг):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>