Czym jest plik SVG? Jak go otworzyć i utworzyć

Plik SVG (Scalable Vector Graphics) to obraz opisany za pomocą XML i geometrii wektorowej zamiast wyłącznie stałej siatki pikseli. Może przechowywać grafikę jako kształty, ścieżki, tekst i wypełnienia, dzięki czemu elementy wektorowe zachowują ostrość po zmianie rozmiaru. Wielkość pliku zależy od liczby i złożoności elementów oraz od tego, czy SVG osadza rastry. Zobacz standard W3C SVG 2.

To prosty poradnik dla każdego, kto właśnie zetknął się z takim plikiem: czym właściwie jest SVG, co zawiera, do czego się nadaje, jakie ma ograniczenia, jak go otworzyć i jak utworzyć go z posiadanego obrazu. Nie potrzebujesz wiedzy o tworzeniu stron internetowych.

Wersja w skrócie

• SVG przechowuje obraz jako kształty opisane kodem, a nie piksele, więc można go skalować do dowolnego rozmiaru bez rozmycia.
• Świetnie nadaje się do logo, ikon, prostych ilustracji oraz pracy z Cricut lub drukiem. Słabo sprawdza się przy zdjęciach.
• Otwórz go w dowolnej przeglądarce, aplikacji projektowej (Illustrator, Inkscape, Figma, Canva) lub nawet zwykłym edytorze tekstu.
• Utwórz go, projektując w programie wektorowym albo konwertując posiadany obraz do SVG.

SVG a zwykły obraz PNG lub JPG

PNG lub JPG to obraz rastrowy: stała siatka kolorowych pikseli przypominająca mozaikę. Po odpowiednio dużym powiększeniu widać kwadraty, dlatego logo zapisane jako PNG rozmywa się po znacznym zwiększeniu rozmiaru.

SVG to obraz wektorowy: zestaw instrukcji mówiących „narysuj tu okrąg, wypełnij go pomarańczowym kolorem, tam narysuj tę krzywą”. Ponieważ obraz za każdym razem jest rysowany na nowo na podstawie instrukcji, wygląda ostro w każdym rozmiarze. Właśnie ta różnica stanowi jego główną zaletę. (Pełne wyjaśnienie, kiedy używać każdego formatu, znajdziesz w porównaniu PNG i SVG.)

Co naprawdę znajduje się w pliku SVG

Oto rzecz, która zaskakuje wiele osób: SVG to tekst. Otwórz plik w Notepad lub dowolnym edytorze kodu, a możesz go przeczytać. W środku znajduje się XML, tekstowy format ze znacznikami, w którym każdy kształt jest opisany linią kodu. Prosty SVG pomarańczowego koła wygląda tak:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

To cały plik. circle rysuje kształt, cx/cy określają jego położenie, r ustala promień, a fill kolor. Ponieważ SVG to tekstowy XML, możesz go przejrzeć, a w tak prostym pliku zmienić kolor przez edycję jednego atrybutu. SVG jest otwartym standardem W3C obsługiwanym przez współczesne przeglądarki. Przeczytaj wprowadzenie W3C do SVG.

Jeśli plik ma rozszerzenie .svgz, porównanie SVGZ i SVG wyjaśnia, jak odzyskać jego kod i wybrać postać do edycji lub publikacji w internecie.

Do czego używa się SVG

SVG sprawdza się wszędzie tam, gdzie grafika musi zachowywać ostrość w różnych rozmiarach lub podlegać edycji jako kształty:

• Logo. Jeden SVG działa na wizytówce i banerze, bez osobnego pliku dla każdego rozmiaru.
• Ikony i grafika na stronach. Przyciski, strzałki i proste ilustracje zachowują ostrość przy różnych gęstościach pikseli ekranu; wydajność nadal zależy od złożoności pliku i sposobu jego dostarczania.
• Cricut i plotery tnące. SVG jest standardowym formatem plików do cięcia. Maszyna podąża za ścieżkami, wycinając folię, papier lub HTV. (Przygotowanie SVG do Cricut opisuje cały proces.)
• Druk i oznakowanie. Wektor skaluje się do dowolnego fizycznego rozmiaru bez pikselizacji.

Do czego SVG nie nadaje się najlepiej

SVG powstał do płaskiej grafiki, dlatego słabo sprawdza się przy fotografiach. Zdjęcie to miliony subtelnie przenikających się kolorów bez jednolitych obszarów. Wtłoczenie go w kształty daje albo wersję po posteryzacji przypominającą obraz malarski, albo ogromny, chaotyczny plik. Jeśli rozważasz wektoryzację zdjęcia, najpierw przeczytaj, co naprawdę dzieje się przy konwersji fotografii do SVG. Aby zachować prawdziwe szczegóły fotograficzne, pozostaw JPG lub PNG.

Jak otworzyć plik SVG

Masz trzy proste możliwości, zależnie od celu:

• Tylko obejrzeć: przeciągnij plik do dowolnej przeglądarki. Wyświetli się natychmiast, bez dodatkowego oprogramowania.
• Edytować wizualnie: otwórz go w aplikacji projektowej, takiej jak Inkscape (bezpłatny), Illustrator, Figma lub Canva. (Jak edytować SVG wyjaśnia zmianę kolorów i kształtów.)
• Zobaczyć lub zmienić kod: otwórz plik w zwykłym edytorze tekstu, takim jak Notepad lub VS Code.

Jeśli po otwarciu pliku widzisz puste płótno, przed ponownym zapisem skorzystaj z listy kontrolnej pustego SVG. Ścieżki mogą leżeć poza płótnem, być niewidoczne, przycięte lub nieobsługiwane przez tę aplikację.

Jak utworzyć SVG

Są dwie drogi, a właściwy wybór zależy od punktu wyjścia.

Zaprojektuj od zera. Narysuj logo, ikonę lub ilustrację w programie wektorowym (Inkscape, Illustrator, Figma lub Canva) i wyeksportuj jako SVG. Daje to najczystszy wynik, ponieważ plik od początku był wektorowy.

Przekonwertuj posiadany obraz. Właśnie tego potrzebuje większość osób. Jeśli logo lub grafika istnieje tylko jako PNG lub JPG, zmienisz je w SVG przez wektoryzację, która odtwarza piksele jako edytowalne kształty. (Czym jest wektoryzacja obrazu wyjaśnia proces.)

Jak wygląda to w PerfectVector

Jeśli masz PNG lub JPG i potrzebujesz prawdziwego SVG, wybierasz konwersję. PerfectVector odtwarza odpowiednie logo, ikony i płaskie ilustracje jako edytowalne ścieżki SVG i kolorowe kształty. Zmień obraz w SVG, porównaj bezpłatny podgląd ze źródłem i sprawdź ścieżki, zanim wydasz jeden kredyt na odblokowanie gotowego pliku.

Najlepiej działa na tym, do czego nadaje się sam SVG: płaskiej grafice i logo. Żaden konwerter nie da prawdziwie fotograficznego wektora ze szczegółowego zdjęcia i mówimy o tym wprost, zamiast udawać, że jest inaczej.

Krótka uwaga o bezpieczeństwie

SVG może zawierać aktywną zawartość, w tym element <script>, więc niezaufany SVG nie jest automatycznie bezpieczny tylko dlatego, że to format obrazu. MDN bezpośrednio dokumentuje skrypty SVG. Przy przesyłaniu plików na stronę weryfikuj typ i zawartość, zmieniaj nazwy zapisywanych plików, ograniczaj rozmiar i udostępniaj je z minimalnymi uprawnieniami; OWASP zaleca taką wielowarstwową ochronę dla niezaufanych plików. Zobacz poradnik OWASP dotyczący przesyłania plików.

FAQ

Do czego służy plik SVG? Do logo, ikon na stronach, przycisków, prostych ilustracji i plików do cięcia w maszynach takich jak Cricut. Wszędzie, gdzie grafika musi zachowywać ostrość w różnych rozmiarach lub umożliwiać edycję kształtów, SVG jest dobrym wyborem. Jest szeroko stosowany w internecie, ponieważ pliki są małe i skalują się bez utraty jakości.

Jak otworzyć plik SVG? Przeciągnij go do współczesnej przeglądarki, aby obejrzeć, otwórz w zgodnej aplikacji projektowej, takiej jak Inkscape, Illustrator, Figma lub Canva, aby edytować wizualnie, albo w edytorze tekstu, takim jak Notepad, aby sprawdzić XML. Sam brak miniatury w systemie operacyjnym nie oznacza uszkodzenia pliku; sprawdź go w zgodnej przeglądarce plików.

Jak utworzyć plik SVG? Zaprojektuj go w programie wektorowym (Inkscape, Illustrator, Figma lub Canva) i wyeksportuj jako SVG albo zwektoryzuj posiadany obraz, na przykład logo PNG lub JPG. Projektowanie od zera daje najczystszy wynik; konwersja jest szybką drogą, gdy masz tylko raster.

Czy SVG to plik wektorowy? Tak. SVG to skrót od Scalable Vector Graphics i przechowuje obrazy jako kształty wektorowe zamiast pikseli. Właśnie dlatego skaluje się do dowolnego rozmiaru bez utraty jakości.

Czym różni się SVG od PNG lub JPG? PNG i JPG składają się z pikseli i rozmywają się po powiększeniu ponad ich rozdzielczość. SVG składa się z kształtów i zachowuje ostrość w każdym rozmiarze. PNG i JPG są lepsze do zdjęć; SVG do logo, ikon i grafiki.

Czy mogę otworzyć SVG w Microsoft Word lub Office? Tak, w obsługiwanych wersjach Microsoft 365 i Office. Microsoft dokumentuje wstawianie SVG i używanie opcji Graphics Format do zmiany kolorów lub stylu; dostępne ustawienia zależą od aplikacji i wersji. Zobacz poradnik Microsoft dotyczący edycji SVG.

Źródła

1. W3C — Scalable Vector Graphics (SVG) 2 — Normatywna definicja elementów SVG, geometrii, renderowania i składni XML.
2. W3C — osadzona zawartość SVG — Standardowe zachowanie rastrów i innej zawartości osadzonej w SVG.
3. MDN — <script> w SVG — Dokumentacja pokazująca, że SVG może zawierać wykonywalne skrypty.
4. OWASP — poradnik przesyłania plików — Zabezpieczenia przyjmowania i udostępniania niezaufanych przesłanych plików.
5. Pomoc Microsoft — edycja obrazów SVG w Microsoft 365 — Oficjalna obsługa SVG w Office i procedura ich edycji.

---

SVG może opisywać grafikę ścieżkami zamiast stałej siatki pikseli. Jeśli odpowiednia płaska grafika istnieje tylko jako PNG lub JPG, zwektoryzuj ją w PerfectVector, sprawdź kształty w podglądzie i przetestuj odblokowany SVG w narzędziu, które będzie go edytować, drukować lub wycinać.