SVG (Scalable Vector Graphics) to wektorowy format grafiki zapisywany jako kod XML. Obrazy skalują się bez utraty jakości, zajmują niewiele miejsca i można je stylować za pomocą CSS.
Do czego służy SVG?
Do logo, ikon, prostych ilustracji i wykresów. Sprawdza się tam, gdzie obraz ma być ostry na każdym ekranie, także o wysokiej gęstości pikseli.
SVG a formaty rastrowe
SVG opisuje kształty wzorami, a JPEG, PNG czy WebP przechowują piksele. Do zdjęć używa się formatów rastrowych, a do grafiki liniowej SVG.
Jak używać SVG na stronie?
Jako obraz w <img>, w CSS jako tło albo wstawiony bezpośrednio w HTML (inline), co pozwala animować i stylować elementy. Dodaj opis alternatywny i zminimalizuj plik narzędziem SVGO.
Plik SVG jest tekstem XML, więc można go edytować, animować w CSS i kompresować. Z plików od osób trzecich usuwaj skrypty, bo mogą zawierać złośliwy kod.
Prostszy kod przekłada się na mniejszą liczbę elementów na stronie, czyli na mniejszy rozmiar DOM.
Zobacz w praktyce
Jak zmniejszyć rozmiar DOM i przyspieszyć stronę 
Core Web Vitals - poradnik jak poprawić wskaźniki 
Optymalizacja LCP – jak skrócić czas renderowania poniżej 1.2s?