Jak zaimportować SVG w React?

By zaoszczędzić trochę czasu programistom stawiającym swoje pierwsze kroki w Reakcie, chciałbym przedstawić sposoby importowania plików oraz grafik svg w projekcie reactowym. Zapraszam serdecznie

Co to jest SVG?

SVG to format plików wektorowych napisanych za pomocą języka XML. Powstał on z myślą o projektowaniu stron internetowych. SVG z punktu widzenia HTML, to zwykły znacznik, który najczęściej operuje wektorowymi kształtami (także zancznikami), takimi jak: path, stroke, line. Te kształty można dowolnie grupować i modyfikować dla naszych potrzeb. Co dokładnie to oznacza wyjaśnię za chwilę.

Ale zaraz, czy do wstawiania grafiki na stronę, nie powinniśmy używać formatów, takich jak: png czy jpg? Zgadza się, możemy to robić, ale po co utradniać sobie życie? Jak samo rozwinięcie akronimu SVG mówi (Scalable Vector Graphics), jest to format grafiki skalowalnej. Skalowalność natomiast rozwiązuję masę problemów przy projektowaniu stron internetowych. Pozwala na to, że dodana grafika będzie tak samo ostra i wyraźna na kazdej rozdzielczości ekranu i na każdym zdefiniowanym dla niej rozmiarze (wysokość - szerokość). To oznacza, że grafika wektorowa w formacie SVG użyta na stronie będzie swoim dokładnym odbiciem w każdym innym rozmiarze. Nawet jeżeli oryginalny rozmiar tej grafiki to 10 x 10 pikseli. Rozwiązuję to ogromny problem konieczności wstawiania wielu wariantów danej grafiki, a co za tym idzie zwiększaniem wagi strony. Tym bardziej, że pliki SVG to pliki tekstowe, a nie zakodowane, ciężkie pliki graficzne typu jpg. Jeden mały pliczek SVG z kilkoma ścieżkami to rozmiar rzędu 2 - 4 kB, a przypominam że można go użyć w dowolnym rozmiarze i zachowa on to samą jakość.

Czy to znaczy, że nie powinniśmy korzystać w ogóle z formatów rastrowych? Oczywiście, że tak nie jest. Obrazy rastrowe (png, jpg, jpeg, gif, webp etc.) używajmy tylko do wstawiania zdjęć lub ilustracji, dla których SVG byłoby przerostem formy nad treścią. Dlatego też, z pełną odpowiedzialnością stanowczo zalecam, żebyś nigdy nie używał formatów rastrowych na stronie internetowych dla swoich grafik, kosztem grafiki wektorowej.

zdjęcie tematyczne
Porównanie skalowania svg - png. Rożnica jest wyraźnie widoczna

Zalety SVG

Zalety stosowania grafiki wektorowej na stronie, w porównaniu z rastrową:

  • lekkie tekstowe formaty, zajmujące często po kilka, a nie setki kilobajtów,
  • 100% skalowalności, niezależnie od rozmiaru grafiki,
  • ładująca się szybciej strona,
  • wysoka jakość i łatwość tworzenia wektorów (np. w Illustratorze lub Adobe XD),
  • możliwość animowania poszczególnych elementów map wektorowych,
  • jak również ich swobodnej modyfikacji (np. kolor lub długość).

Dwie ostatnie zalety są sczególne. Wspomniałem na początku tekstu, że SVG możemy swobodnie grupować i modyfikować do własnych potrzeb. To jest, moim zdaniem, największa zaleta tego formatu. Za pomocą kilku linijek w CSS możemy zanimować dany element lub element zgrupowany lub na przykład zmienić mu kolor. Przykładowe modyfikacje svg w CSS:

svg > path {            /* path to jeden z najczęstszych elementów svg */
    stroke: black;     /* zmiana obramowania kształtu na kolor czarny */
    fill: red;                 /* zmiana wypełnienia kształtu na kolor czerwony */
    transfrom: rotate(45deg)        /* obrót kształtu o 45 stopni */
}

Jest to jeden z przykładów operowania na grafikach wektorowych w aplikacji internetowej. Po więcej odsyłam do jakiejkoiek dokumentacji CSS dostępnych w sieci.

Importowanie SVG w Reakcie

Po tym przydługim wstępie i teorii, przejdźmy wreszcie do meritum i głównego tematu tego artykułu.

  • importowanie jako plik do użycia w znaczniku <img />

To przydatne rozwiązanie, kiedy wiemy, że nie będziemy modyfikować w żaden sposób grafiki na stronie, tylko prosto chcemy ją wrzucić do img. Oczywiście dalej będzie ona w pełni skalowalna. Niestety, z punktu widzenia create-react-app, nie mamy możliwość importowania pliku SVG, tak jak np. pliki PNG. Twórcy nie umożliwili nam tego dla SVG, dlatego możemy sami stworzyć sobie taką możliwość, poprzez dodanie odpowiedniego loadera do webpacka, czyli bundlera naszego create-react-app. Wiąże się to jednak z tzw. ejectowaniem projektu. Nie opiszę tych pojęć tu i teraz, dlatego importowanie plików SVG i wszystkie inne rzeczy opiszę w artykule o webpacku, który pojawi się niedługo na blogu. A tymczasem przedstawię tylko sposób importowania:

import image from './example.svg';

const imageContainer = () => <div><img src={image} /></div>;
  • import za jako ReactComponent

React umożliwia nam nieco inne importowanie grafik SVG - jako czyste element JSX renderowane przez Reacta w komponencie. Robimy to w następujący sposób:

import {ReactComponent as SVGIllustration} from './example.svg';

const imageContainer = () => <div><SVGIllustration /></div>;

Dzięki powyższemu sposobowi, nie wstawiamy znaczników <svg> i nie brudzimy sobie go w deweloperskiej wersji. React sam go generuje w locie i przekształca do odpowiednich zmaczników zozumiałych dla HTMLa. W dodatku, w przeciwieństwie do używania svg w zwykłym tagu img, mamy możliwość swobodnych operacji na właśnie dodanej grafice, co często może okazać się przydatne.

Źródła

© Damian Kalka 2021
Wszelkie prawa zastrzeżone