Каква е разликата между векторната графика (SVG) и растровата? Как се използва SVG в уеб разработката?

Векторната графика (SVG) описва изображения с помощта на математически формули — линии, криви, многоъгълници. Това позволява мащабиране на изображението без загуба на качество, тъй като то се пресъздава наново при всякакъв размер.

Растерната графика се състои от пиксели — малки точки с фиксиран цвят. При увеличаване на растрово изображение качеството се влошава, появяват се пикселизация и размазване.

В уеб разработката SVG се използва за иконки, лога, диаграми и анимации, където е важна яснотата при всяко разрешение. SVG може да бъде вмъкнат директно в HTML като таг <svg>, стилизиран чрез CSS и управляван чрез JavaScript, което го прави много гъвкав за интерактивни и адаптивни интерфейси.

Пример за вмъкване на SVG в HTML:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>