Od marginalnie traktowanego rozszerzenia plików, po jedno z najważniejszych rodzajów plików jaki powszechnie używa się w procesie projektowania stron internetowych. W dzisiejszym artykule znajdą się informację na temat rozszerzenia SVG. Znajdziecie w nim państwo informacje czym jest SVG, jakie są jego przykłady użycia na stronach internetowych (i nie tylko), a także zapoznacie się z informacjami na temat konwersji oraz edycji plików z tym rozszerzeniem. Odpowiem również na pytanie „gdzie można otworzyć plik SVG?”. Zapraszam do lektury.
Co to jest SVG?
Tradycyjnie wszelkie grafiki na stronach internetowych były udostępniane w najpopularniejszych formatach, czyli JPG, oraz PNG. Wykorzystywanie formatów rastrowych ma swoje dobre i słabe strony. Jedną z tych słabych jest niewątpliwie utrata jakości przy powiększaniu grafik wykorzystujących powyższe formaty. Zaczęto zauważać zalety wykorzystywania plików wektorowych. Stąd też pojawił się format SVG. SVG, czyli Scalable Vector Graphics jest to uniwersalny format plików grafiki wektorowej. Jego uniwersalność wynika z możliwości zmiany jego wyglądu poprzez kaskadowe arkusze stylów. Jest on nieobwarowany licencjami, dzieki czemu może być powszechnie wykorzystywany w procesie projektowania stron. Twórcą SVG jest organizacja zajmująca się kształtowaniem interneto poprzez wyznaczanie standardów w zakresie projektowania stron internetowych, a także ich powszechnego użycia, czyli W3C.
Aby opisać najważniejsze zalety korzystania z plików z rozszerzeniem SVG należy opowiedziać w jaki sposób za jego pomocą są przedstawiane grafiki. SVG jest formatem grafiki wektorowej opartym na popularnym kodzie XML. Kod ten przypomina swoim wyglądem kod HTML, który jest wykorzystywany w projektowaniu stron internetowych. Można zadać pytanie, jak kod jest w stanie generować grafikę? Otóż może i jest w tym całkiem niezły. Dzięki wykorzystywaniu kodu, grafiki oparte o SVG potrafią zabierać nawet kilkakrotnie mniej miejsca w porównaniu do ich rastrowych odpowiedników. Ma to olbrzmie znaczenie biorąc pod uwagę optymalizację strony internetowej. Dzięki wykorzystaniu plików SVG oszczędzamy miejsce na serwerze, a dzięki “lekkim” grafikom strona internetowa ładuje się znacznie szybciej. Ma to bezpośredni wpływ na parametr renderu pierwszych sekcji na stronie, co zaś przekłada się na jej miejsce w wynikach wyszukiwania przeglądarki Google. Oczywiście jest to tylko jeden z wielu parametrów ale wykorzystując dziesiątki/setki grafik na stronie ma to znaczny wpływ.
Jak już wspomniałem wcześniej pliki SVG są edytowalne. Można je dowolnie skalować oraz zmieniać ich kształt. Swoboda jaką oferuje SVG sprawia, że rozszerzenie to jest często wybierane przez programistów. Mogą oni wpływać na wygląd pliku poprzez edycję kaskadowych arkuszy styli (CSS), jak również “wprawidź go w ruch” wykorzystując animacje w javascript. Co ważne, skoro plik SVG składa się z kodu, może być więc również indeksowany poprzez wyszukiwarki. Kolejny kamyk do ogródka zwanego SEO. Skoro już opowiedziałem jakie są jego zalety, warto również powiedzieć gdzie można ich używać?
Przykłady użycia
Każdy projektant UI/UX z pewnością w tym momencie uśmiechnie się pod nosem. Format SVG jest dla niego zapewne narzędziem dzięki któremu nie jeden mockup zyskał na wyglądzie. Rozszerzenie SVG może być wykorzystywane na wiele sposobów w procesie projektowania stron internetowych czy też aplikacji mobilnych. Zacząć należy już od samego znaku firmowego. Logo jako obraz reprezentujący markę musi dobrze wyglądać. Jak to jednak zrobić gdy po zbliżeniu okazuje się niewyraźne? Najczęściej tworząc logo każdy grafik skorzysta z programu do obróbki grafiki wektorowej. Jest to spowodowane większą wszechstronnością w projektowaniu rozmiaru i kształtów grafiki. Następnie pliki te są eksportowane – tak jak już się zapewne domyślacie – do formatu SVG. Kolejnym przykładem wykorzystania niniejszego formatu są wszelkiego rodzaju ilustracje oraz diagramy. Zwłaszcza jeśli mówimy tutaj o pliku wielowarstwowym, składającym się z wielu elementów, SVG jak najbardziej odnajdzie się dobrze w reprezentacji tej grafiki. Również jeśli chodzi o interaktywność, tworząc wykresy oraz inne infografiki użytkownik jest w stanie najechać/zaznaczyć dany obszar i wyświetlić informację o nim. Idealnym przykładek interaktywności są wszelkiego rodzaju mapy znajdujące się na stronie internetowej. Chcąc np. pokazać informacje odnoszące się do każdego województwa w Polsce, zaprogramowana mapa w formacie SVG będzie do tego bardzo dobrym wyborem. SVG może znajdować się tak naprawdę w każdym elemencie strony internetowej.
Przykład pliku wektorowego z rozszerzeniem SVG. Źródło: Undraw
Przykłady użycia
Jeżeli chcesz zmienić jakiś obrazek w plik SVG to masz dzisiaj dobry dzień. Istnieje bowiem sporo internetowych konwerterów dzięki którym zmienisz np. obrazek w formacie PNG na docelowe SVG. Wystarczy przesłać plik na zewnętrzny serwis oraz zaakceptować konwersję. Konwerter zrobi całą resztę za ciebie. Oczywiście jakość pików może się różnić. Ważne jest aby znaleźć odpowiedni dla siebie konwerter. Pamiętaj proszę aby wczytać się w regulamin konwerterów. Nie pozwól na to aby zewnętrzny serwis przechowywał Twoje pliki.
Drugim sposobem jest próba samodzielnego odtworzenia ścieżek wektorowych w zdjęciu. Aby tego dokonać chciałbym przedstawić państwu nasz artykuł odnośnie wektoryzacji bitmapy. Możecie znaleźć go pod TYM LINKIEM. Znajdziecie go również na dole artykułu.
Gdzie można otworzyć SVG?
Masz już swój plik SVG jednak chciałbyś dokonać zmian? Nie ma problemu. W tym rozdziale przedstawię państwu dostępne propozycje programów służących do edycji grafiki wektorowej. W poniżej podanych programach mogą państwo bez problemów otworzyć plik z rozszerzeniem SVG oraz dowolnie go edytować. Pamiętajcie aby eksportując z powrotem plik skorzystać z rozszerzenia.
Lista programów służących do edycji SVG:
- Adobe Illustrator
- CorelDRAW
- DrawPlus
- PaintShop Pro
- GIMP (darmowy)
- Inkscape (darmowy)
Mam nadzieję, że udało mi się wytłumaczyć wam czym jest SVG. Jeśli macie jakieś pytanie skorzystajcie z formularza kontaktowego. Zawsze staram się odpowiadać w ciągu 24 godzin. Zapraszam do kontaktu.
Źródła:
Sitepoint.com
Wikipedia.com
