Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

3 Metody na użycie plików SVG. Wektory w praktyce.

2/1/2019
Bartek Cis

Kilka technik dla Web Developera przy używaniu grafiki SVG. Znasz je wszystkie?

Czego się dzisiaj dowiesz?

Na początku krótko o plikach .svg i dlaczego warto je używać. Następnie opiszę trzy różne podejścia do użycia grafik wektorowych w aplikacjach internetowych.

  1. Plik .svg jako obraz
  2. Kod SVG jako obiekt HTML
  3. URL encoded CSS injection

Postaram się też znaleźć plusy i minusy każdej z nich by łatwiej by Ci było określić kiedy warto zastosować konkretną technikę.

Czym jest grafika wektorowa?

Jest to typ grafiki gdzie obraz nie jest przedstawiany za pomocą zbioru pikseli o określonej barwie ( to są grafiki klasyczne- rastrowe ). Zdjęcie zrobione aparatem jest przykładem grafiki rastrowej.

Grafiki wektorowe tworzone są za pomocą syntezy figur składających się z łuków i linii prostych. Te figury mają punkty/wierzchołki o charakterystycznych współrzędnych które są zapisane w postaci kodu. Coś jak wykresy na matematyce 🙂 Dodatkowo te informacje są uzupełnione np. o kolor czy gradient wypełniający te figury.

Format .svg

Aby przeglądarka mogła sobie poradzić z renderowaniem grafik wektorowych opracowano format .svg. Jeśli jeszcze go nie znasz to najlepiej jak po prostu zobaczysz go na własne oczy w dalszej części artykułu.

Dlaczego używać wektorów?

Są dwa główne powody:

  1. Grafika wektorowa nie ma zdefiniowanej rozdzielczości. Możesz dowolnie powiększać jej rozmiar bez straty jakości. To jest piękne 🙂
  2. Grafiki wektorowe zazwyczaj zajmują zdecydowanie mniej miejsca na dysku niż rastry więc do aplikacji internetowych są wręcz idealne.

Poza tym można je zintegrować z kodem źródłowym aplikacji ( o tym później ).

Nie trudno się domyślić, że im mniej punktów/współrzędnych wewnątrz grafiki tzn. im figury są stosunkowo prostsze tym pliki wyjściowe są mniejsze. Korzysta z tego tzw. Flat Design oparty na prostych ( i estetycznych ) grafikach wektorowych.

Jednak ten format ma swoje ograniczenia bo nie odwzorujesz idealnie obrazów “rzeczywistości” takich jak np. zdjęcia. Nawet jeśli Ci się to uda to wtedy rozmiar takiego pliku będzie… No cóż… Niepraktyczny.

Jak edytować pliki .svg?

Są dwa podstawowe sposoby:

  1. Edycja kodu źródłowego – otwórz plik za pomocą dowolnego edytora tekstowego / IDE.
  2. Edycja graficzna – użyj jednego z programów graficznych.

Możesz też sprawdzić podgląd grafiki np. w przeglądarce internetowej.

No to tyle wstępu 🙂 Przejdźmy więc do spraw technicznych.

Zanim zaczniesz pracę z wektorami

By zaimplementować wektory do swojej aplikacji potrzebujesz pliku .svg. Jeśli jeszcze nie masz gotowych grafik wektorowych to polecam Freepick. Na potrzeby tego wpisu ściągnąłem z freepicka taką grafikę:

Optymalizacja wektorów

Każdy plik .svg powinien być zoptymalizowany. Kiedy masz już plik graficzny użyj narzędzie online które zrobi to za Ciebie. Ja używam TEGO.

Usuwany jest zbędny kod którego przeglądarka nie potrzebuje do obsługi grafiki. Na tym przykładzie zmniejszyłem rozmiar pliku .svg z 25KB do 16KB czyli redukcja o 36%. Warto?

Ciągle możesz polepszyć ten wynik przez usunięcie zbędnych klas, styli czy id które pozostają w kodzie.

Metoda 1 – Wektor jako plik .svg

Jest to podstawowy i najprostszy sposób. Traktujemy nasz wektor tak samo jak pozostałe pliki np. png lub jpg i używamy tagów <img> lub np. <div>.

Tag <img>

Czyli klasyczny tag HTML przeznaczony do załączania grafik.

<img class="picture" src="image.jpg" alt="Some description for SEO"/>

Używając tego tagu ciągle musimy ostylować obraz w CSS jednak jest to dość podstawowy zabieg.

See the Pen gZLeoj by Bartłoś Ce (@barto-ce) on CodePen.

Tag <img> wady i zalety

Plusem tego podejścia jest to, że jest bardzo łatwe i szybkie. Do tego można użyć atrybutu “alt” w HTML który poprawia SEO na stronie.

Minusem jest brak kontroli nad wieloma właściwościami CSS które pomagają w obróbce/modyfikacji naszej grafiki.

Tag <div>

W zasadzie można użyć każdego innego tagu HTML aby zamienić ten obiekt w grafikę ale na potrzeby tego wpisu użyję tego najprostszego. Polega to na tym, że traktujemy jakiś obiekt drzewa DOM jako grafikę i umieszczamy na stronie. w HTML może to wyglądać bardzo prosto:

<div class="top__wrapper"></div>

W CSS’ie jest nieco więcej kodu jednak to ciągle bardzo podstawowe sprawy. Więcej szczegółów na Codepenie poniżej:

See the Pen OrbZmL by Bartłoś Ce (@barto-ce) on CodePen.

Tag <div> wady i zalety

Zaletą tego podejścia jest to, że możemy wykorzystać pełny potencjał CSS przy ostylowaniu grafiki.

Minusem jest to, że przeglądarka w zasadzie nie traktuje tego wektora jako grafiki więc może to mieć negatywny wpływ na SEO i Accessibility.

Wektor jako plik .svg – wady i zalety

Zaletą tej metody jest szybkość implementacji. Po prostu bez zbędnych zabiegów używamy wektorów ciągle czerpiąc korzyści z braku ograniczeń w rozdzielczości.

Minusem jest brak możliwości modyfikacji grafiki za pomocą kodu. Nie możemy zmieniać kolorów poszczególnych elementów czy wykonywać skomplikowanych animacji.

Warto też wspomnieć, że używając tej metody musimy wrzucić plik statyczny .svg na serwer może być on więc indeksowany przez przeglądarki.

 

Metoda 2 – Kod SVG jako obiekt HTML

Tym razem wykorzystam pełen potencjał jaki dają grafiki wektorowe. Robi się to w ten sposób, że wklejam pełen kod SVG z grafiką do kodu HTML. Zoptymalizowany kod SVG dla naszej grafiki to dość spory wężyk… Nie będę go tu wklejał w całości (można zobaczyć w CodePenie poniżej) ale ważne aby rozumieć o co w nim chodzi.

Główny tag <svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
    
</svg>

Wewnątrz tego tagu definiuje się właściwości grafiki i umieszcza się wszystkie elementy.

Style

<style type=”text/css”>

   .st0{fill:#FFFFFF;}

   .st1{fill:#B3DFC8;}

   .st2{fill:#7A191A;}

   .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#7A191A;}

</style>

To jest domyślny CSS zawarty w pliku .svg. To się usuwa i potem implementuje w pliku CSS. Na tej podstawie możemy potem dowolnie modyfikować grafikę.

Grupa obiektów <g>

<g id="background">
    <rect class="st0" width="800" height="800"/>
    <rect class="st1" width="800" height="800"/>
</g>

Wewnątrz tagu <g> znajduje się kolekcja co najmniej dwóch pojedynczych elementów.

Pojedynczy obiekt np. <path/>

<path class="st2" d="M617.5,502.1c1.2,4-1.2,8.2-5.3,9.4c-4.1,1.2-8.4-1.1-9.6-5.
1c-1.2-4,1.2-8.2,5. C612.1,495.8,616.3,498.1,617.5,502.1z"/>

Rodzajów obiektów może być więcej ale <path> jest tym najbardziej podstawowym.

Praca z grafikami SVG

Jak zauważyłeś/aś na każdym poziomie kodu SVG możemy przypisać unikalne id lub class. Dzięki temu możemy dowolnie stylować tą grafikę na wszystkich poziomach.

Po co modyfikować SVG?

Wektory można animować lub modyfikować pod wpływem interakcji z użytkownikiem. To bardzo potężna broń przy tworzeniu dobrego UX 🙂

Na podstawie naszej grafiki stworzyłem prostą interakcję gdzie jedna z gałązek się porusza a po kliknięciu zmieniamy kolory grafiki:

See the Pen SVG using code by Bartłoś Ce (@barto-ce) on CodePen.

Przy tworzeniu skomplikowanych animacji z SVG należy bardzo uważać na cross-browser compatibility czyli sprawdzić czy wygląda to tak jak chcemy pod różnymi przeglądarkami.

Kod SVG jako obiekt HTML – wady i zalety

Zdecydowaną zaletą jest to, że mamy pełną kontrolę nad grafiką. Możemy dowolnie modyfikować każdy element tworząc bogate interakcje.

Zdecydowaną wadą jest to, że tworzymy w kodzie potężne tasiemce które niszczą readability równie skutecznie jak ja opróżniam talerz pełen spaghetti carbonara.

Można tworzyć oddzielne komponenty zawierające wektory które potem wstrzykujesz w odpowiednim miejscu i przez to poprawisz czytelność kodu.

Metoda 3 – URL encoded CSS injection

Ta metoda jest bardzo ciekawa. W zasadzie to ulepszona metoda numer 1. Nie mamy tu pełnej kontroli jak w metodzie numer 2 ale trzymamy wektor wewnątrz kodu i możemy go bardzo łatwo używać w wielu miejscach.

Koncepcja jest taka, że nasz kod SVG przekonwertujemy na encoded URL który jest zrozumiały dla przeglądarki. Poniżej kolejne kroki jakie należy wykonać w tej metodzie.

Konwersja na encoded URL

Najłatwiejszym sposobem jest po prostu użycie narzędzia online np. TEGO.

W odpowiednim oknie wklejasz kod zoptymalizowanej grafiki. Naciskasz konwertuj/ de-konwertuj(?) i otrzymujesz ciąg znaków w pożądanym formacie. Możesz przejść do następnego kroku…

Stworzenie zmiennej w CSS

Dla ścisłości tutaj robię to w SASS’ie 🙂 Po prostu stwórz zmienną i wewnątrz single brackets ‘’ wklej przekonwertowany ciąg znaków.

$image: 'CIĄG ZNAKÓW';

Więcej szczegółów sprawdź na CodePenie poniżej…

Stwórz @mixin z parametrem

W ten sposób będziemy przypisywać zmienne z poszczególnymi wektorami do odpowiednich klas w HTML/CSS. Za każdym razem gdy chcemy użyć danego wektora to podajemy po prostu odpowiedni parametr.

@mixin svg($svg){
    background-image: url('data:image/png;base64,' + $svg);
    background-image: url('data:image/svg+xml,' + $svg);
    background-repeat: no-repeat;
};

Użyj @mixin w odpowiednim miejscu

Teraz to już proste. Po prostu jako parametr podaj nazwę zmiennej kryjącej Twoją grafikę.

.picture {
    height: 400px;
    width: 400px;
    @include svg($image);
}

Praktyczny przykład

Wszystko zostało zebrane w kodzie poniżej

See the Pen URL encoded SVG by Bartłoś Ce (@barto-ce) on CodePen.

URL encoded CSS injection – wady i zalety

Zaletą tej metody jest to, że grafika jest ukryta wewnątrz kodu i w zasadzie mało kto jest w stanie ją skopiować bo po prostu nie wie o co chodzi. Dobre jest też to, że łatwo można używać jedną grafikę w wielu miejscach lub po prostu uporządkować wszystkie wektory w jednym miejscu.

Wadą jest to, że ciągle produkujemy sporo kodu. Tym razem jednak tylko w jednym miejscu. Niestety nie mamy też pełnej kontroli nad wektorem.

Podsumowanie

Dzisiaj pokazałem trzy różne sposoby na używanie grafik wektorowych w Twoim projekcie:

  • Wektor jako plik .svg
  • Kod SVG jako obiekt HTML
  • URL encoded CSS injection

Każda z nich ma swoje wady i zalety. Osobiście uważam, że idealne byłoby połączenie 2 i 3 🙂

A co Ty o tym sądzisz? Znasz jakieś inne sposoby na pliki SVG? Może jakiś ‘Game Changer’? Która jest według Ciebie najciekawsza?

Podziel się z innymi 🙂

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

warto
Social media & sharing icons powered by UltimatelySocial