Pliki SVG

Omawiane zagadnienia

• Co to jest plik SVG?
  
• Historia formatu SVG
   
• Do czego służą pliki SVG?
   
• Wady i zalety plików SVG
  
• Otwieranie plików SVG
  
• Tworzenie i edytowanie plików SVG
   
• Pliki SVG — często zadawane pytania

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

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.

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?

Ikony i logo witryn internetowych

Projektanci często stosują format SVG w przypadki ikon (np. przycisków) witryn internetowych oraz logo firm. Efektywne skalowanie tych plików z zachowaniem jakości czyni je doskonałym wyborem w przypadku grafiki, która jest wyświetlana w wielu miejscach i różnych rozmiarach.

Grafiki informacyjne i ilustracje

Dzięki danym XML zawartym w plikach SVG wyszukiwarki takie jak Google potrafią efektywnie odczytywać schematy i wykresy z tekstem. Słowa kluczowe wykrywane przez wyszukiwarkę Google w plikach SVG mogą potencjalnie zwiększyć ranking strony w wynikach wyszukiwania. Format SVG obsługuje również animacje, co umożliwia tworzenie jeszcze bardziej interesujących stron.

Odkryj więcej plików wektorowych

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.

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. Aby wyświetlić plik, uruchom przeglądarkę i kliknij opcję Plik > Otwórz. 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 kroki w programie Adobe Photoshop.

1. Po opracowaniu obrazu w programie Photoshop kliknij opcję Plik > Eksportuj > Eksportuj jako.
   
2. Kliknij menu rozwijane Format w wyświetlonym oknie i wybierz pozycję SVG.
   
3. 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.

Pliki SVG — często zadawane pytania

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.