Do czego służą pliki SVG?

Format Scalable Vector Graphics stał się powszechny w ostatnich latach. Do czego w praktyce są używane pliki SVG?

Czy pliki SVG obsługują animacje?

Format plików SVG obsługuje nie tylko obrazy statyczne. Szereg narzędzi online pozwala dodawać elementy ruchome do grafiki internetowej. Animacje SVG mogą być prostymi elementami, takimi jak suwaki do przełączania slajdów grafiki informacyjnej. Również całe ilustracje mogą być ruchome, na przykład obracające się wskazówki zegarka.

Po czym można rozpoznać plik SVG?

Plik SVG najłatwiej jest poznać po kodzie rozszerzenia. Mają one rozszerzenie SVG. Aby sprawdzić, czy obraz jest wektorowy (np. w formacie SVG), można też powiększyć go do 200% na ekranie komputera. Obraz wektorowy pozostanie wyraźny i zachowa spójne kolory — bez powiększonych czy rozmytych pikseli.

Czy plików SVG można używać tylko w Internecie?

Choć obrazy SVG są najczęściej używane na stronach internetowych, funkcjonują też offline. Dzięki temu, że zachowują proporcje niezależnie od zmian wymiarów, pliki SVG są przydatne jako szablony do malowania na odzieży czy koszulkach. Ze względu na ilość pikseli plik JPEG nie jest tak prosty do przeniesienia na inne medium.

Jak duże są pliki SVG?

Rozmiar pliku SVG zależy od ilości zawartych w nim danych, ale najczęściej mniejszy niż plików innego typu. Złożona grafika z wieloma ścieżkami i punktami kotwiczenia zajmuje więcej miejsca niż proste, otwarte kompozycje. Staraj się ograniczać liczbę złożonych instrukcji zawartych w pliku.

Czym się różnią pliki SVG i PNG?

Pliki SVG są wektorowe, a pliki PNG — rastrowe. Nadmierne rozciągnięcie lub ściśnięcie pliku PNG powoduje jego rozmycie i pikselizację. Pliki SVG nie zawierają żadnych pikseli, dzięki czemu zawsze zachowują jakość. Oprócz tego pliki PNG nie zawierają animacji.

Pliki SVG

Format plików SVG jest powszechnie używany do wyświetlania grafiki płaskiej, schematów i ilustracji w witrynach internetowych. Ponieważ te pliki są wektorowe, można je dowolnie skalować z zachowaniem ostrości. Zapoznaj się z najważniejszymi funkcjami obrazów SVG, ich zaletami i wadami, a także historią rozwoju formatu SVG.

Omawiane zagadnienia

Co to jest plik SVG?

Format Scalable Vector Graphics (SVG) jest bardzo funkcjonalny w przypadku stron internetowych. Inaczej niż pliki rastrowe (oparte na pikselach), takie jak JPEG, obrazy w plikach wektorowych są przechowywane jako wzory matematyczne oparte na punktach i liniach siatki. Pliki wektorowe, takie jak SVG, mogą mieć różne rozmiary przy tej samej jakości, dzięki czemu dobrze nadają się do wyświetlania logo i złożonej grafiki online.

Pliki SVG są popularne wśród projektantów stron internetowych nie tylko ze względu na łatwość ich skalowania. Ponieważ format SVG jest oparty na kodzie XML, zawiera informacje w formie tekstu, a nie danych kształtów. Wyszukiwarki takie jak Google mogą odczytywać słowa kluczowe zawarte w plikach SVG, co może korzystnie wpłynąć na ranking wyszukiwania witryny internetowej.

Pliki SVG łatwo rozpoznasz po rozszerzeniu SVG.

Historia formatu SVG

W 1994 roku holenderski programista Martijn Koster po raz pierwszy przedstawił propozycję formatu plików SVG.

Historia formatu SVG rozpoczyna się pod koniec lat 90. XX wieku, kiedy organizacja World Wide Web Consortium (W3C) poprosiła programistów o zaproponowanie nowego formatu grafiki wektorowej. Złożono sześć propozycji, na podstawie których organizacja W3C ustaliła format SVG.

Minęło trochę czasu, zanim pliki SVG stały się popularne. Do 2017 r. niewiele programów je obsługiwało. Wtedy zauważono zalety plików SVG w nowoczesnych przeglądarkach internetowych. Obecnie pliki SVG są często używane w przypadku obrazów 2D w witrynach internetowych, ponieważ większość przeglądarek i aplikacji do rysowania z łatwością obsługuje pliki wektorowe.

Wady i zalety plików SVG

Warto zapoznać się z wadami i zaletami plików SVG przed zapisaniem danych w tym formacie.

Zalety plików SVG

W przeciwieństwie do plików rastrowych, które składają się z pikseli, grafika wektorowa w plikach takich jak SVG zawsze pozostaje wyraźna — po dowolnym powiększeniu lub zmniejszeniu. Nie trzeba się martwić, że obrazy SVG utracą jakość w niektórych przeglądarkach albo w razie zmiany ich rozmiaru zależnie od zastosowań.
Proste pliki SVG są często mniejsze niż obrazy rastrowe, które zawierają mnóstwo kolorowych pikseli zamiast równań matematycznych.
Ponieważ tekst jest w plikach SVG jawnie zapisywany (a nie traktowany jako grafika), czytniki ekranu mogą skanować słowa zawarte w obrazach SVG. Jest to bardzo pomocne dla osób, które potrzebują pomocy podczas czytania stron internetowych. Również wyszukiwarki mogą odczytywać i indeksować tekst w obrazach SVG.
Format SVG obsługuje działania interaktywne za pośrednictwem języków skryptowych, takich jak JavaScript. Umożliwia to tworzenie dynamicznej, angażującej odbiorców grafiki.
Język SVG jest oparty na formacie XML, dzięki czemu łatwo jest go modyfikować i integrować z innymi technologiami internetowymi.

Wady plików SVG

Pliki SVG doskonale nadają się do obsługi grafiki w Internecie, na przykład logo, ilustracji i wykresów. Brak pikseli utrudnia jednak wyświetlanie zdjęć cyfrowych wysokiej jakości. Format JPEG jest zwykle korzystniejszy w przypadku szczegółowych fotografii.
Tylko nowoczesne przeglądarki obsługują obrazy SVG. Stosowanie plików SVG w starszych przeglądarkach, takich jak Internet Explorer 8, może być utrudnione.
Kod zawarty w obrazach SVG sprawia wrażenie skomplikowanego, jeśli nie znasz jeszcze tego formatu plików.

Otwieranie plików SVG

Wszystkie popularne przeglądarki — Chrome, Edge, Safari i Firefox — umożliwiają dziś otwieranie plików SVG w systemach macOS i Windows. Uruchom przeglądarkę i kliknij opcję Plik.

Wybieranie pliku do konwersji: Obraz zostanie wyświetlony w przeglądarce.

Obrazy SVG można też otwierać we wbudowanym programie na komputerze. Kliknij dwukrotnie nazwę pliku, aby wyświetlić listę programów, które posłużą do jego otwarcia — albo automatycznie użyć zgodnego programu.

Tworzenie i edytowanie plików SVG

Wykonaj te czynności w programie Adobe Photoshop.

Po opracowaniu obrazu w programie Photoshop kliknij opcję Plik > Eksportuj > Eksportuj jako.
Kliknij menu rozwijane Format w wyświetlonym oknie i wybierz pozycję SVG.
Wybierz opcję Eksportuj wszystko i zapisz plik.

Uwaga: Ponieważ program Photoshop służy do edytowania grafiki rastrowej, wiele osób woli tworzyć i edytować pliki SVG w programie Adobe Illustrator — edytorze grafiki wektorowej.

Tworzenie plików SVG w programie Illustrator

Jeśli używasz programu Adobe Illustrator, wykonaj następujące czynności:

Po opracowaniu kompozycji w programie Illustrator zaznacz tekst, aby utworzyć obrysy. Pozwoli to uniknąć problemów z podstawianiem czcionek, gdy kompozycja będzie wyświetlana na innych komputerach. Wybierz polecenie Tekst > Zamień na krzywe.
Zapisz plik. Wybierz polecenie Plik > Zapisz jako. Kliknij menu rozwijane Format w wyświetlonym oknie i wybierz pozycję SVG.
Edytowany plik SVG możesz także wyeksportować za pomocą polecenia Plik > Eksportuj > Eksportuj jako, wybierając format SVG. Umożliwia to dostosowanie ustawień eksportu, takich jak precyzja i zgodność.

Edytowanie plików SVG w programie Illustrator

Wybierz plik SVG i otwórz go w programie Illustrator. Możesz też zaimportować plik SVG do istniejącego dokumentu programu Illustrator przy użyciu polecenia Plik > Umieść.
Używając narzędzia do zaznaczania (lub Zaznaczanie bezpośrednie), zaznacz ścieżki, kształty lub grupy w pliku SVG. Możesz dostosować ich rozmiar lub kształt, przekształcić lub edytować ścieżki, a także dodać kolory i efekty.

Pliki SVG — często zadawane pytania

style

grid width 8

Konwersja plików obrazów stała się jeszcze szybsza.

Usługa Adobe Express pozwala kilkoma kliknięciami uzyskać plik potrzebnego typu, na przykład plik SVG, JPG lub PNG (nawet zawierający przezroczystość).