Какво е SVG?

SVG, или Скалиращи се Векторни Графики, е векторен формат за изображение, базиран на XML за двумерна графика.

Ключови характеристики:

• Скалиране: Изображенията остават ясни при всякакъв мащаб, тъй като се описват с математически формули, а не с пиксели.
• XML формат: Структурата на SVG файловете се описва с тагове, подобно на HTML. Това ги прави четими и редактирани като текст.
• Интерактивност: Възможност за добавяне на интерактивни елементи с JavaScript.
• Анимация: Поддръжка на анимация на елементи с CSS или JavaScript.
• Достъпност: Възможност за описание на съдържание за хора с увреждания.
• Лекота: SVG файловете могат да бъдат по-малки от растровите изображения при същото качество.

Начини за използване на SVG:

• Вграждане в HTML чрез таг <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Използване като фон в CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Чрез таг <img>:

  <img src="image.svg" alt="Моето SVG изображение">
  

• Чрез таг <object> или <iframe>.

SVG е идеален за лога, икони, илюстрации, графики и диаграми, където важна е яснотата при различни размери и възможността за интерактивност.