Co to jest plik SVG (i jak go używać)?

Skalowalna grafika wektorowa (SVG) to unikalny typ formatu obrazu. W przeciwieństwie do innych odmian, pliki SVG nie opierają się na unikalnych pikselach tworzących obrazy, które widzisz. Zamiast tego używają danych „wektorowych”.

Używając SVG, otrzymujesz obrazy, które można skalować do dowolnej rozdzielczości, co przydaje się do projektowania stron internetowych w wielu innych przypadkach użycia. W tym artykule zadamy pytanie: Co to jest plik SVG? Następnie nauczymy Cię, jak korzystać z formatu.

Weźmy się za to!

Subskrybuj nasz kanał YouTube

Co to jest plik SVG?

SVG to grafika zbudowana przy użyciu wektorów. Dla niewtajemniczonych wektor jest elementem o określonej wielkości i kierunku. Teoretycznie możesz wygenerować prawie każdy rodzaj grafiki, używając kolekcji wektorów. Weźmy na przykład ten obraz niebieskiego prostokąta z czarną ramką i cieniem:

Jest to inny rodzaj pliku obrazu o nazwie Portable Network Graphic (PNG), używany do ilustracji i rysunków. Jeśli chciałbyś zreplikować coś podobnego za pomocą grafiki wektorowej, musiałbyś wygenerować to za pomocą kodu XML (tego samego, który jest używany w mapach witryn). Poniższy kod może osiągnąć ten sam wynik:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

Teoretycznie, jeśli weźmiesz ten kod i wrzucisz go do pliku HTML, zobaczysz podobny zestaw prostokątów do PNG – to znaczy, o ile przeglądarka, której używasz, obsługuje pliki SVG. Chociaż oba obrazy wyglądają tak samo, pliki SVG oferują wiele korzyści, których nie oferują inne formaty. Na przykład pliki SVG są w stanie zachować jakość obrazu podczas skalowania w górę lub w dół.

Jeśli będziesz dalej powiększać prostokąt PNG, zauważysz, że w pewnym momencie jego jakość zaczyna spadać. W przypadku bardziej złożonej grafiki opartej na pikselach degradacja staje się widoczna znacznie szybciej. Jednak pliki SVG wyglądają dobrze w praktycznie każdej rozdzielczości.

Dlaczego warto korzystać z pliku SVG?

Wiele stron internetowych używa prawie zamiennie formatów takich jak PNG i JPEG. Jednak pliki SVG nie są tak wszechstronne. Jeśli spróbujesz odtworzyć złożone zdjęcie za pomocą wektorów, zwykle otrzymasz ogromne i bezużyteczne pliki SVG.

Format SVG jest jednak fantastyczną opcją dla całego zestawu innych scenariuszy:

• Projekt logo. Ponieważ prawdopodobnie będziesz ponownie używać logo w witrynach internetowych i mediach społecznościowych, użycie SVG rozwiązuje wszelkie potencjalne problemy ze skalowalnością.
• Schematy. Pliki SVG idealnie pasują do diagramów i wszelkich innych ilustracji, które opierają się na prostych liniach.
• Elementy animowane. Możesz użyć CSS do animowania SVG, co czyni je przydatnym elementem w projektowaniu stron internetowych, szczególnie w przypadku mikrointerakcji.
• Wykresy i wykresy. Możesz używać SVG do tworzenia skalowalnych wykresów i wykresów obsługujących animacje.

Ponieważ pliki SVG używają formatu XML, dzięki temu można je przeszukiwać i indeksować. Czytniki ekranu mogą interpretować pliki SVG, o ile używasz odpowiednich znaczników ułatwień dostępu.

Wreszcie, pliki SVG są zwykle znacznie mniejsze niż ich odpowiedniki w wysokiej rozdzielczości w innych formatach. Na papierze oznacza to, że możesz zmniejszyć niektóre rozmiary stron i skrócić czas ładowania. Jeśli jednak nie planujesz przekonwertować większości obrazów do formatu SVG, wzrost wydajności prawdopodobnie będzie minimalny.

Jak utworzyć plik SVG (2 sposoby)

Istnieją dwa podejścia, które możesz zastosować, jeśli chodzi o pliki SVG. Możesz stworzyć je od podstaw lub wziąć istniejący obraz i przekonwertować go. Zacznijmy od metody ręcznej.

1. Utwórz plik SVG ręcznie

Tworzenie pliku SVG zwykle nie wymaga wpisywania informacji wektorowych, jak to zrobiliśmy wcześniej. To był tylko przykład pokazujący koncepcję. Zamiast tego tworzysz SVG jak każdą inną grafikę – używając programu do projektowania i zapisując plik jako SVG. Wiele nowoczesnych narzędzi do projektowania graficznego obsługuje formaty SVG po wyjęciu z pudełka. Niektóre najlepsze opcje obejmują:

• Adobe Illustrator, Photoshop, Animate i InDesign
• Microsoft Visio
• Inkscape
• KORDONEK

Dwie ostatnie opcje na tej liście to rozwiązanie typu open source. To sprawia, że ​​są świetną opcją do eksperymentowania z tworzeniem plików SVG bez płacenia za oprogramowanie premium. W rzeczywistości mogą być wszystkim, czego potrzebujesz.

Jeśli nie masz doświadczenia z projektowaniem graficznym, stworzenie własnego logo lub innych elementów na Twoją stronę będzie nie lada wyzwaniem. W takim przypadku najlepiej będzie zrobić istniejące obrazy i przekonwertować je na SVG.

2. Konwertuj istniejące obrazy na pliki SVG

Istnieje wiele darmowych narzędzi, których możesz użyć do konwersji obrazów z innych formatów na SVG. Większość oprogramowania, o którym wspomnieliśmy w ostatniej sekcji, umożliwia otwieranie obrazów i zapisywanie ich jako plików SVG.

Jeśli nie chcesz pobierać żadnego oprogramowania, możesz również skorzystać z narzędzi do konwersji online – i istnieje wiele usług, z których możesz skorzystać. Jednym z przykładów jest Vector Magic, którego możesz użyć do konwersji wszelkiego rodzaju typów plików na SVG:

Podoba nam się to konkretne narzędzie, ponieważ pokazuje podgląd pliku SVG przed jego pobraniem. Możesz także użyć wbudowanego edytora, aby wprowadzić drobne zmiany i poprawki przed pobraniem pliku:

Oczywiście to tylko jedna opcja. Inne usługi konwertera PNG i JPG na SVG obejmują Convertio i Img2Go. Będziesz chciał zrobić rozeznanie, aby znaleźć najbardziej odpowiednie rozwiązanie dla Twoich potrzeb.

Z naszego doświadczenia wynika, że ​​większość konwerterów SVG oferuje wyniki o podobnej jakości. Aby uzyskać najlepsze możliwe wyniki, używany konwerter nie ma tak dużego znaczenia, jak wybrane obrazy.

Zasadniczo sensowne jest używanie formatu SVG tylko w przypadku „prostych” obrazów – to znaczy obrazów z określonymi ramkami i czystymi liniami. Im bardziej złożony obraz, tym większe prawdopodobieństwo, że otrzymasz ogromny plik SVG, który trudno jest edytować ręcznie lub animować.

Jak korzystać z pliku SVG (w WordPressie i poza nim)

SVG nie są trudne w użyciu. Dodanie pliku SVG do witryny jest tak proste, jak pobranie jego kodu i wklejenie go w dokumencie HTML w dowolnym miejscu, w którym chcesz umieścić obraz.

Jeśli Ty i użytkownicy Twojej witryny korzystacie z przeglądarek obsługujących pliki SVG (a obecnie większość tak robi), będą mogli zobaczyć ten element. Animowanie SVG jest oczywiście trudniejsze, ponieważ wymaga użycia CSS.

Proces zmienia się jednak, jeśli używasz WordPressa. System zarządzania treścią (CMS) nie obsługuje gotowych plików SVG. Jeśli chcesz włączyć obsługę SVG, aby móc przesyłać pliki bezpośrednio do swojej witryny, użyj wtyczki, takiej jak Safe SVG:

Możliwe jest również ręczne włączenie obsługi SVG w WordPressie, ale proces ten jest znacznie bardziej skomplikowany. W takim przypadku korzystanie z wtyczki jest bezpieczniejszą opcją.

Wniosek

Dostosowanie witryny do korzystania z plików SVG jest znacznie prostsze, niż możesz sobie wyobrazić. Prawdziwym wyzwaniem jest projektowanie od podstaw SVG lub wybór odpowiednich obrazów do konwersji do formatu. Na szczęście istnieje wiele narzędzi, których możesz użyć do obu.

Niektóre świetne opcje to Adobe Illustrator, InDesign i GIMP. Korzystając z tych narzędzi, możesz tworzyć i konwertować istniejące obrazy na pliki SVG. Jeśli korzystasz z WordPressa, możesz przesłać te pliki SVG za pomocą wtyczki Safe SVG, a następnie dobrze je animować.

Masz pytania dotyczące korzystania z plików SVG? Porozmawiajmy o nich w sekcji komentarzy poniżej!

Miniatura obrazu artykułu autorstwa VectorsMarket / shutterstock.com