Czym jest SVG? Przewodnik po formacie wektorowym
Czym jest SVG? Jak działają wektorowe obrazy SVG, czym różnią się od PNG i JPG, jakie mają zalety i ograniczenia, do czego służą oraz jak je otwierać i edytować.
1. Czym jest SVG?
SVG to skrót od Scalable Vector Graphics — otwarty format grafiki wektorowej oparty na XML, ustandaryzowany przez W3C. Tam, gdzie PNG i JPG zapisują obraz jako siatkę pikseli, SVG posługuje się wzorami matematycznymi opisującymi kształty: prosta, koło, krzywa Béziera — każda zapisana w pliku jako współrzędne i polecenia ścieżki.
Właśnie dlatego SVG nigdy się nie rozmywa po powiększeniu: przeglądarka po prostu rysuje ponownie te wzory w nowym rozmiarze, zamiast rozciągać piksele. To właśnie znaczy słowo „wektor”.
2. SVG a PNG / JPG
| Cecha | SVG | PNG / JPG |
|---|---|---|
| Jak zapisuje obraz | Ścieżki matematyczne (wektor) | Siatki pikseli (raster) |
| Przy powiększeniu | Skaluje się bez ograniczeń i bez zniekształceń | Pojawiają się zniekształcenia i rozmycie |
| Rozmiar pliku | Znikomy dla prostych grafik (kilka KB) | Rozśnie proporcjonalnie do rozdzielczości |
| Możliwość edycji | Tekst, który można edytować, kolorować i animować | Wymaga programu do obróbki obrazów |
| Najlepsze do | Ikony, logotypy, ilustracje, wykresy | Zdjęcia i złożone oświetlenie |
3. Do czego zwykle służy SVG
- Ikony i logotypy w witrynach: jeden plik SVG pasuje do każdej gęstości ekranu i pozostaje ostry na wyświetlaczach Retina;
- Ilustracje i wykresy: biblioteki wizualizacji danych, takie jak ECharts i Recharts, domyślnie generują SVG;
- Druk i grawerowanie: grawery laserowe, plotery do wycinania folii i drukarki UV powszechnie akceptują ścieżki SVG;
- Animacja: ścieżkami SVG można sterować bezpośrednio z CSS / SMIL / JavaScript, co umożliwia efekty rysowania kreski i wiele więcej.
4. Jak otworzyć i edytować plik SVG?
Każda nowoczesna przeglądarka (Chrome / Edge / Firefox / Safari) otwiera pliki SVG bezpośrednio, a programy do projektowania, takie jak Illustrator, Figma czy darmowy Inkscape, pozwalają je edytować. Jeśli chcesz tylko zmienić kolor, usunąć tło albo skasować fragment grafiki, skorzystaj z edytora SVG online PolySVG — bez instalowania jakiegokolwiek oprogramowania.
5. Jak zamienić własne PNG / JPG w SVG?
Użyj narzędzia Obraz na SVG w PolySVG: wgraj bitmapę, a autorski model automatycznie wykona kwantyzację kolorów, śledzenie konturów i dopasowanie krzywych, dostarczając edytowalny SVG w kilka sekund, z usunięciem tła jednym kliknięciem. Cały proces jest darmowy i nie wymaga rejestracji.
Podsumowanie: SVG to format, który „rysuje wzorami”, dlatego świetnie sprawdza się przy ikonach, logotypach i wszystkim, co musi się skalować; treści fotograficzne lepiej obsługują JPG / WEBP.
Najczęstsze pytania
Jakie oprogramowanie otwiera pliki SVG?
Każda nowoczesna przeglądarka wyświetli je wprost. Do edycji użyj Illustratorsa, Figmy lub Inkscape albo poprób w edytorze PolySVG bez instalacji.
Czy plik SVG można przekonwertować na PNG?
Tak. Edytor PolySVG eksportuje SVG do PNG w dowolnej rozdzielczości, a to samo robi zrzut ekranu przeglądarki albo eksport z programu do projektowania.