Skalowalna grafika wektorowa, czyli SVG, odgrywa dziś ważną rolę w projektowaniu stron internetowych. Jeśli obecnie nie używasz SVG do projektowania stron internetowych, oto kilka powodów, dla których powinieneś zacząć to robić, a także rozwiązania zastępcze, których możesz użyć w starszych przeglądarkach, które nie obsługują tych plików.
Rozdzielczość
Największą zaletą SVG jest niezależność rozdzielczości. Ponieważ pliki SVG są grafikami wektorowymi (w przeciwieństwie do obrazów rastrowych opartych na pikselach), można zmienić ich rozmiar bez utraty jakości obrazu. Jest to szczególnie przydatne podczas tworzenia responsywnych witryn internetowych, które muszą dobrze wyglądać i działać na wielu różnych rozmiarach ekranu i urządzeniach. Możesz skalować pliki SVG w górę lub w dół, aby dostosować się do zmieniających się wymagań dotyczących rozmiaru i układu responsywnej witryny internetowej bez uszczerbku dla ich jakości.
Ogólnie obrazy SVG mają gładszy i ostrzejszy wygląd niż obrazy w innych formatach, niezależnie od rozmiaru.
Rozmiar pliku
Jednym z wyzwań związanych z używaniem obrazów rastrowych (np. JPG, PNG, GIF) w responsywnych witrynach internetowych jest rozmiar pliku. Ponieważ obrazy rastrowe nie skalują się tak, jak obrazy wektorowe, obrazy oparte na pikselach należy dostarczać w największym rozmiarze, w jakim będą wyświetlane. Dzieje się tak, ponieważ zawsze możesz zmniejszyć obraz i zachować jego jakość, ale to samo nie dotyczy powiększania obrazów. Rezultatem są obrazy, które są znacznie większe niż rozmiar, w jakim są oglądane, co zmusza przeglądarki do pobierania dużych plików.
W przeciwieństwie do tego, grafiki wektorowe są skalowalne, dzięki czemu można używać bardzo małych rozmiarów plików, niezależnie od tego, jak duże obrazy muszą być wyświetlane. To ostatecznie optymalizuje ogólną wydajność witryny i prędkość pobierania.
Styl CSS
Możesz łatwo dodać SVG bezpośrednio do kodu HTML strony. Nazywa się to wbudowanym SVG. Jedną z zalet korzystania z wbudowanego SVG jest to, że ponieważ grafika jest faktycznie rysowana przez przeglądarkę, nie ma potrzeby żądania HTTP w celu pobrania pliku obrazu.
Kolejna korzyść: możesz stylizować wbudowany plik SVG za pomocą CSS. Chcesz zmienić kolor ikony SVG? Zamiast edytować ten obraz w oprogramowaniu do edycji grafiki, a następnie ponownie eksportować i przesyłać plik, możesz zmienić plik SVG po prostu za pomocą kilku wierszy CSS. Możesz użyć CSS do zmiany SVG dla stanów najechania i innych potrzeb projektowych.
Dolna linia
Ponieważ możesz stylizować wbudowane pliki SVG za pomocą CSS, możesz również używać na nich animacji CSS. Przekształcenia i przejścia CSS to dwa proste sposoby na ożywienie SVG. Możesz uzyskać bogate wrażenia podobne do Flasha na stronie bez użycia Flasha, którego iPad już nie obsługuje. W rzeczywistości Adobe wycofuje Flasha do końca 2020 roku.
Zastosowania SVG
Tak potężne, jak pliki SVG, nie mogą zastąpić każdego innego formatu obrazu. Zdjęcia, które wymagają bogatej głębi kolorów, nadal powinny być w formacie-j.webp
SVG nadaje się również do niektórych złożonych ilustracji, takich jak wykresy, wykresy i logo firmy. Wszystkie te grafiki są skalowalne i mogą być stylizowane za pomocą CSS.
Obsługa starszych przeglądarek
Obecna obsługa SVG jest bardzo dobra w nowoczesnych przeglądarkach internetowych. Jedynymi przeglądarkami, które nie obsługują tej grafiki, są stare wersje Internet Explorera (którego Microsoft już nie obsługuje) i kilka starych wersji Androida. Podsumowując, bardzo mały procent użytkowników przeglądających strony nadal korzysta z tych przeglądarek, a liczba ta nadal się zmniejsza. Oznacza to, że możesz bez obaw używać SVG na swojej stronie.
Jeśli chcesz zapewnić zastępstwo dla SVG, użyj narzędzia takiego jak Grumpicon z Filament Group. Ten zasób tworzy pliki-p.webp
