SVG

Co to jest SVG i do czego służy?

SVG to format pliku, w którym rysunek powstaje z opisanych matematycznie kształtów, a nie wyłącznie z pikseli. Najczęściej wykorzystuje się go do logotypów, ikon, ilustracji, prostych infografik i elementów interfejsu. Jeden projekt może być wyświetlany w różnych rozmiarach bez przygotowywania osobnej wersji dla każdego ekranu.

Chrome, Firefox i Safari obsługują SVG bez dodatkowych wtyczek. Na stronie można umieścić go jako osobny obraz lub bezpośrednio w kodzie HTML. Dzięki temu formatowi grafik może przekazać firmie znak gotowy do zastosowania na stronie, a programista dopasować jego wielkość do układu mobilnego.

Dla SEO sam format SVG nie gwarantuje lepszych pozycji. Google obsługuje takie obrazy i może je indeksować, gdy robot ma do nich dostęp. Opisowa nazwa pliku, tekst alternatywny alt i kontekst na stronie pomagają wyszukiwarce rozpoznać grafikę. Ruch z Google Grafika można analizować w Google Search Console. Wpływ zmian na wydajność strony, w tym Core Web Vitals (LCP, INP i CLS), sprawdza się w PageSpeed Insights.

Jakie są 3 cechy grafiki wektorowej?

Trzy główne cechy grafiki wektorowej to skalowalność, możliwość edycji poszczególnych elementów i zapis oparty na geometrii.

• Skalowalność: koło, linia czy litera pozostają ostre po powiększeniu, o ile są zapisane jako obiekty wektorowe.
• Edytowalność: można osobno zmienić kolor ikony, przesunąć element logo lub poprawić jego kontur.
• Opis geometryczny: plik przechowuje współrzędne i właściwości obiektów w XML, zamiast zapisywać każdy punkt obrazu jako piksel.

Nie oznacza to, że SVG zawsze zajmuje mniej miejsca niż PNG. Prosty symbol może być bardzo lekki, lecz rozbudowana ilustracja z tysiącami ścieżek bywa ciężka. Do fotografii zazwyczaj lepiej pasują formaty rastrowe, takie jak WebP i AVIF.

Jak zrobić SVG z PNG?

Aby uzyskać wektorowy SVG z PNG, trzeba przeprowadzić wektoryzację, czyli odtworzyć kształty na podstawie obrazu złożonego z pikseli.

1. Otwórz oryginalny PNG w Inkscape lub Adobe Illustrator.
2. W Inkscape wybierz narzędzie do wektoryzacji bitmapy, a w Illustratorze skorzystaj z funkcji Image Trace.
3. Dopasuj ustawienia śledzenia konturów do liczby kolorów i szczegółowości grafiki.
4. Sprawdź powstałe kształty, usuń zbędne punkty i popraw niedokładne krawędzie.
5. Zapisz wynik jako SVG i obejrzyj go w przeglądarce przy kilku rozmiarach.

Samo przemianowanie pliku PNG na SVG nie zamienia pikseli w wektory. Podobnie działa umieszczenie obrazu rastrowego wewnątrz pliku SVG: plik ma właściwe rozszerzenie, lecz grafika nadal może tracić ostrość. Automatyczna wektoryzacja najlepiej radzi sobie z prostymi znakami i wyraźnymi konturami. W przypadku zdjęć często daje zbyt skomplikowany lub niedokładny wynik.

Jak edytować pliki SVG?

Pliki SVG najwygodniej edytować w programach wektorowych, takich jak Inkscape i Adobe Illustrator, a ich kod można też zmieniać w edytorze tekstu.

W programie graficznym zaznacz obiekt, aby poprawić kształt, kolor lub grubość linii. Jeśli logo zawiera tekst, sprawdź, czy wyświetla się prawidłowym krojem na innym komputerze. W razie potrzeby przygotuj wersję z literami zamienionymi na ścieżki i zachowaj osobny, edytowalny plik projektu.

Przed dodaniem grafiki do witryny usuń niepotrzebne grupy, metadane i niewidoczne obiekty, zachowując elementy potrzebne do prawidłowego wyświetlania i dostępności. Do optymalizacji kodu SVG służy między innymi SVGO. Po zmianach sprawdź wygląd grafiki w przeglądarce, ponieważ zbyt agresywne uproszczenie może naruszyć układ elementów lub efekty wizualne.

Jak otworzyć SVG na telefonie?

SVG można wyświetlić na telefonie w przeglądarce obsługującej ten format, na przykład w Chrome na Androidzie lub Safari na iPhonie.

Jeśli aplikacja do zdjęć nie otwiera załącznika SVG, użyj przeglądarki albo aplikacji obsługującej pliki wektorowe. Do samego podglądu można też poprosić grafika o eksport do PNG. Wersję SVG zachowaj do dalszej edycji i zastosowania na stronie.

Przed akceptacją projektu sprawdź czytelność drobnych detali na małym ekranie. Technicznie ostry obraz nie musi być czytelny, jeśli logo zawiera bardzo cienkie linie lub małe napisy.

Jak przekonwertować plik SVG na PDF?

SVG można zamienić na PDF przez zapis kopii dokumentu w formacie PDF w Inkscape lub eksport z Adobe Illustrator.

1. Otwórz plik SVG w programie graficznym.
2. Wybierz zapis lub eksport do PDF i ustaw odpowiedni obszar strony.
3. Sprawdź czcionki, przezroczystości, efekty graficzne i wymiary dokumentu.
4. Otwórz gotowy PDF, aby upewnić się, że wygląd odpowiada projektowi.

PDF może zachować obiekty wektorowe, ale nie wszystkie efekty SVG muszą zostać przeniesione identycznie. Jeśli plik trafia do drukarni, uzgodnij z nią wymagania dotyczące kolorów, spadów i krojów pisma. Oryginalny SVG zachowaj do przyszłych zmian.