Poradnik
Co to jest plik SVG?
SVG to skrót od Scalable Vector Graphics, czyli skalowalnej grafiki wektorowej. Plik SVG opisuje obraz kształtami i współrzędnymi zamiast pikseli, więc pozostaje ostry w każdym rozmiarze.
SVG: co to za format pliku
SVG to plik tekstowy zapisany w języku XML. Zamiast koloru każdego piksela przechowuje instrukcje: narysuj tutaj okrąg, poprowadź ścieżkę przez te punkty, wypełnij ją tym kolorem. Przeglądarka lub edytor odczytuje te instrukcje i rysuje obraz w takim rozmiarze, w jakim jest wyświetlany.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Ten fragment to kompletny plik SVG: limonkowy okrąg na obszarze 100 na 100 jednostek. Ponieważ SVG jest tekstem, można go otworzyć w edytorze kodu, przeszukiwać, kompresować i zmieniać ręcznie.
SVG to otwarty standard konsorcjum World Wide Web Consortium, opublikowany po raz pierwszy w 2001 roku (W3C). Wszystkie nowoczesne przeglądarki wyświetlają go bez wtyczek.
Rozszerzenie pliku SVG
Pliki SVG mają rozszerzenie .svg i typ MIME image/svg+xml. Wariant skompresowany, .svgz, to ten sam plik spakowany gzipem. Z SVG korzystają też programy do ploterów tnących i narzędzia do fontów, ale format jest ten sam.
Do czego służy format SVG
- Logo i ikony na stronach i w aplikacjach, bo jeden plik jest ostry na ekranie o każdej gęstości pikseli.
- Ilustracje, wykresy i mapy, które trzeba powiększać lub drukować w dużym formacie.
- Animacje i grafiki interaktywne, bo każdy kształt można stylować w CSS albo zmieniać JavaScriptem.
- Plotery tnące i lasery, które prowadzą narzędzie po konturach kształtów.
- Favicony w nowoczesnych przeglądarkach.
SVG nie nadaje się do zdjęć. Zdjęcie ma płynne przejścia tonalne, które wymagałyby milionów drobnych kształtów. JPG i WebP zapisują je dużo wydajniej.
Jak otworzyć plik SVG
Plik SVG otworzy każda przeglądarka internetowa: przeciągnij go do okna Chrome, Firefoksa, Safari lub Edge. Aby zobaczyć kod obok obrazu, użyj naszego podglądu SVG. Do edycji rysunku służą edytory wektorowe, takie jak Inkscape (darmowy), Figma czy Adobe Illustrator. W Windows Eksplorator plików może pokazywać miniatury SVG po zainstalowaniu rozszerzenia, a na Macu podgląd daje Quick Look po naciśnięciu spacji.
Plik SVG czy PNG: porównanie formatów
| SVG | PNG | |
|---|---|---|
| Z czego się składa | Kształty i współrzędne | Piksele |
| Skalowanie | Ostry w każdym rozmiarze | Rozmyty po powiększeniu |
| Przezroczystość | Tak | Tak |
| Edycja jako tekst | Tak | Nie |
| Najlepszy do | Logo, ikon, diagramów | Zrzutów ekranu, szczegółowych obrazów i miejsc, które nie przyjmują SVG |
Konwersja działa w obie strony: konwerter PNG na SVG zamienia piksele w kształty, a konwerter SVG na PNG renderuje kształty jako piksele w wybranym rozmiarze.