ROZDZIAŁ 25. SVG

W TYM ROZDZIALE:

Kształty SVG

Przycinanie i maskowanie

Filtry efektów

Nadawanie stylu w SVG

Interaktywności i animacje

Narzędzia SVG

Podpowiedzi dotyczące tworzenia obrazków SVG

Responsywne obrazki SVG

O formacie SVG (ang. Scalable Vector Graphics) wspominałam w książce już kilkakrotnie, natomiast w tym rozdziale przedstawię go znacznie dokładniej.

Podczas generowania treści w oknie przeglądarki WWW grafika w formacie SVG może wyglądać jak obrazek zapisany w dowolnym innym formacie. Jednak dopiero to, co kryje się pod maską, czyni treść naprawdę wyjątkową i wszechstronną. Przede wszystkim SVG to zgodnie z nazwą format wektorowy, czyli wszelkie kształty występujące w plikach SVG są definiowane przez współrzędne i linie, a nie siatki pikseli. Dzięki temu są skalowalne, zatem mogą zmieniać rozmiar w nieskończoność bez utraty jakości.

Rysunek 25.1 przedstawia ten sam obraz tygrysa zapisany w formatach SVG i PNG. Obrazy wektorowe mogą być skalowane do bardzo małych lub bardzo dużych rozmiarów bez utraty jakości. Linie oraz tekst pozostają ostre niezależnie od tego, czy oglądane są na 100 pikselach, czy też na 10 000 pikseli. Spróbuj to samo zrobić z obrazem bitmapowym! Skoro nasze projekty oraz strony muszą działać prawidłowo na wszystkich rodzajach urządzeń — od smartfonów po monitory o wysokiej gęstości, a nawet na wielkich telewizorach — to możliwość przygotowania jednego obrazka wyglądającego świetnie w każdym wypadku jest czymś niesamowitym.

RYSUNEK 25.1. Obrazy ...

Get Projektowanie stron internetowych now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.