SVG (Scalable Vector Graphics) to format graficzny i język służący do opisywania obrazów wektorowych. Plik nie jest plikiem binarnym, ale zawiera zwykły tekst (XML) opisujący obiekty, ich efekty oraz zachowanie.
Grafika wektorowa ma szereg zalet.
Skalowanie - w przeciwieństwie do grafiki rastrowej, SVG nie traci jakości podczas skalowania.
Rozmiar pliku - obrazy wektorowe ważą znacznie mniej niż obrazy rastrowe, gdy są używane do zapisywania ikon lub innych abstrakcyjnych grafik. Używanie plików wektorowych do zapisywania realistycznych obrazów prowadzi jednak do powstawania plików o dużych rozmiarach.
Dynamika - używając CSS i JavaScript, możesz zmienić parametry obrazu wektorowego, takie jak kolor lub obramowanie.
Wiemy już, że grafika wektorowa, podobnie jak obrazy rastrowe, może być dodawana za pomocą elementu img. Wystarczy określić:
ścieżkę do obrazu
tekst opisu
inne atrybuty (jeśli to konieczne).
<img src="path/to/image.svg" alt="Description" />
1.2 Wbudowany SVG
W przypadku statycznych grafik, takich jak abstrakcyjne tła lub ikony, do których nie trzeba dodawać efektu po najechaniu kursorem lub fokusu, najczęściej stosuje się dodawanie obrazów wektorowych za pomocą elementu <img> lub jako tła za pomocą elementu background-image.
Metody te mają jedną istotną wadę: nie pozwalają na dynamiczną zmianę koloru oraz innych cech obrazu wektorowego z poziomu CSS. Obrazy SVG mogą być dodawane w HTML. Otwierasz po prostu plik SVG w edytorze tekstu, kopiujesz jego zawartość i wklejasz ją do dokumentu HTML. Nazywa się to "wbudowanym SVG" (inline SVG).
Podejście to ma jednak szereg ograniczeń.
Wbudowany kod SVG zwiększa wielkość pliku HTML.
Niemożliwe jest ponowne użycie tego samego obrazu bez powielania kodu.
Utrzymywanie i naprawianie wbudowanego SVG jest czasochłonne i trzeba szukać go w kodzie HTML.
Przeglądarka nie może buforować takich obrazów, w przeciwieństwie do zewnętrznych plików SVG.
W CSS możesz dynamicznie zmieniać niektóre parametry wbudowanego obrazu wektorowego, takie jak kolor. Właściwość fill kontroluje kolor wypełnienia. Możesz ustawić kolor w dowolnym, wygodnym formacie.
Jeśli nie określono koloru wypełnienia, kształt zostanie wypełniony bieżącym kolorem tekstu (domyślnie czarnym).
Możesz usunąć wypełnienie za pomocą wartości none, co spowoduje, że kształt będzie całkowicie przezroczysty.
SVG Sprites to technika używana najczęściej podczas pracy z grafiką wektorową.
Wszystkie ikony wektorowe są gromadzone w jednym pliku.
Plik sprite jest buforowany przez przeglądarkę i nie będzie ponownie ładowany, przy ponownych odwiedzinach strony.
Możesz zmienić kolor i inne cechy ikon sprite za pomocą CSS.
Algorytm tworzenia SVG Sprites
Otwórz layout w programie Figma, wybierz wszystkie ikony i wyeksportuj je w formacie SVG na swój komputer.
Wejdź na stronę icomoon.io , kliknij przycisk Import Icons w lewym górnym rogu i dodaj wszystkie ikony.
Kliknij Generate SVG & More w lewym dolnym rogu.
Kliknij Download w lewym dolnym rogu.
Na Twoim komputerze pojawi się plik .svg. Jest to właśnie SVG sprite.
Dokument SVG to po prostu plik tekstowy, który - w przeciwieństwie do grafiki rastrowej - opisuje kształty, które będa renderowane przez przeglądarkę. W jednym pliku za pomocą elementu <symbol> możesz opisać wiele różnych grup kształtów, a następnie, nadając każdemu symbolowi unikalny id, możesz uzyskać dostęp do dowolnego z nich z poziomu dokumentu HTML.
Wewnątrz SVG sprite, znajduje się zestaw elementów <svg> i <symbol>, które opisują cały SVG sprite i każdy kształt osobno. Każdy <symbol> ma unikalny identyfikator.
Aby użyć ikony ze sprite'a w dokumencie HTML, musisz dodać znaczniki elementu <svg> i zagnieżdżonego elementu <use> z atrybutem href, który zawiera ścieżkę do ikony. Ścieżkę należy określić jak ścieżkę do zwykłego pliku, ale na końcu dodać kotwicę z identyfikatorem symbolu w sprite.
