Czym jest SVG?

SVG, czyli Scalable Vector Graphics, to format obrazu wektorowego opartego na XML dla grafiki dwuwymiarowej.

Kluczowe cechy:

• Skalowalność: Obrazy pozostają ostre przy dowolnym powiększeniu, ponieważ są opisywane za pomocą formuł matematycznych, a nie pikseli.
• Format XML: Struktura plików SVG jest opisywana za pomocą tagów, podobnie jak HTML. Czyni je to czytelnymi i edytowalnymi tekstowo.
• Interaktywność: Możliwość dodawania elementów interaktywnych za pomocą JavaScript.
• Animacja: Obsługa animacji elementów za pomocą CSS lub JavaScript.
• Dostępność: Możliwość opisywania zawartości dla osób z ograniczeniami.
• Lekkość: Pliki SVG mogą być mniejsze od obrazów rastrowych przy tej samej jakości.

Sposoby użycia SVG:

• Osadzanie w HTML za pomocą tagu <svg>:

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

• Użycie jako tło w CSS:

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

• Przez tag <img>:

  <img src="image.svg" alt="Mój obraz SVG">
  

• Przez tag <object> lub <iframe>.

SVG jest idealny do logo, ikon, ilustracji, wykresów i diagramów, gdzie ważna jest ostrość w różnych rozmiarach i możliwość interakcji.