O SVG — formacie, który skaluje się w nieskończoność
SVG oznacza skalowalną grafikę wektorową. Jest to oparty na XML format obrazu, ustandaryzowany przez W3C w 1999 roku, zaprojektowany do matematycznego opisywania kształtów (ścieżek, krzywych, wypełnień, obrysów) zamiast piksel po pikselu. Praktyczna konsekwencja: SVG renderuje się ostro w każdym rozmiarze, od favikony 16×16 po tapetę 8K, bez utraty jakości i prawie bez różnicy w rozmiarze pliku.
Kiedy używać SVG
- Ikony — ikony interfejsu użytkownika, glify mediów społecznościowych, znaki firmowe.
- Loga — muszą wyglądać idealnie w każdym rozmiarze, od wizytówki po billboard.
- Ilustracje — płaska grafika wektorowa, infografiki, rysunki liniowe.
- Animowany interfejs użytkownika — animacje CSS lub SMIL na poszczególnych elementach kształtu.
Kiedy NIE używać SVG
Fotografie. Zdjęcie zachodu słońca ma tysiące subtelnych gradientów, których śledzenie wektorowe nie jest w stanie wiernie oddać. W przypadku treści fotograficznych trzymaj się JPG lub WebP.
Historia
SVG powstało, aby rozstrzygnąć wojnę formatów między PGML Adobe a VML Microsoftu pod koniec lat 90. W3C opublikowało SVG 1.0 we wrześniu 2001 roku. Obsługa przeglądarek była chwiejna przez pierwszą dekadę — Internet Explorer dodał natywną obsługę SVG dopiero w IE9 w 2011 roku — ale każda nowoczesna przeglądarka renderuje teraz SVG natywnie. SVG 2.0 (2018) dodało nowe polecenia ścieżek i ściślejszą integrację z HTML.
Narzędzia dla SVG
Potrzebujesz przekonwertować SVG na PNG (niektóre platformy wciąż odrzucają przesyłanie SVG)? Użyj SVG na PNG. Aby zmniejszyć pliki wyeksportowane z Figmy lub Illustratora (zazwyczaj redukcja rozmiaru pliku o 40–70% bez zmian wizualnych), użyj Optymalizatora SVG.