SVG to skrót od Scalable Vector Graphics (skalowalna grafika wektorowa). Jest to otwarty standard W3C dla obrazów opisanych jako instrukcje, a nie piksele: narysuj tutaj okrąg, podążaj za tą krzywą, wypełnij ten kształt tym kolorem, zapisz to słowo w tamtym kroju pisma. Ponieważ obraz jest zbiorem poleceń, można go narysować w dowolnym rozmiarze bez utraty ostrości czy pojawiania się „schodków”, dlatego logo, ikony, mapy i wykresy tak często są w SVG.
Jak SVG zapisuje obraz
Plik SVG to XML: czytelny tekst, który można otworzyć w dowolnym edytorze. Element <path> zawiera zwartą sekwencję poleceń rysowania, <rect>, <circle> i <polygon> robią to, czego się po nich spodziewasz, <text> przechowuje prawdziwy, zaznaczalny tekst, a <g> grupuje elementy, aby można je było przesuwać lub stylować razem. Atrybut viewBox definiuje układ współrzędnych, co sprawia, że cały rysunek skaluje się poprawnie.
Ponieważ SVG jest tekstem, bardzo dobrze się kompresuje; skompresowany (gzipped) SVG (czasem z rozszerzeniem .svgz) bywa tylko ułamkiem pierwotnego rozmiaru. To, że jest tekstem, oznacza też, że SVG można stylować za pomocą CSS, animować i obsługiwać skryptami. Przeglądarka traktuje je jako część dokumentu, a nie jako nieprzezroczysty obraz.
Ta ostatnia możliwość ma istotny aspekt bezpieczeństwa: SVG może zawierać element <script>. W każdym miejscu, gdzie SVG jest akceptowane jako plik przesyłany przez użytkownika, musi zostać zsanityzowane lub serwowane w sposób uniemożliwiający wykonanie skryptów, dlatego niektóre serwisy odrzucają SVG, choć akceptują wszystkie formaty rastrowe.
SVG słabo sprawdza się jako kontener dla fotografii. Można w nim osadzić obraz rastrowy, ale wtedy otrzymujesz obraz pikselowy opakowany w XML, bez żadnych korzyści ze skalowania.
Jakie metadane zawiera SVG
SVG ma dedykowany element <metadata>, a ponieważ standard nie określa, co ma się w nim znaleźć, edytory umieszczają tam wiele informacji. Najczęściej jest to RDF używające terminów Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights oraz URI licencji. Elementy <title> i <desc> mogą również znajdować się w elemencie głównym lub na poszczególnych kształtach, gdzie pełnią także funkcję tekstu dostępności dla czytników ekranu.
Dochodzi do tego wewnętrzna ewidencja edytora, która zwykle zajmuje najwięcej miejsca. Inkscape zapisuje całą własną przestrzeń nazw: geometrię okna dokumentu, poziom powiększenia i położenie kursora przy ostatnim zapisaniu, linie pomocnicze, ustawienia siatki, nazwy i widoczność warstw oraz ciąg inkscape:version. Illustrator osadza pakiet XMP z własnymi identyfikatorami dokumentu i historią. Żaden z tych danych niczego nie rysuje.
Wynikają z tego dwie praktyczne wskazówki. Dane edytora mogą łatwo stanowić większość pliku, więc przepuszczenie SVG przez optymalizator przed publikacją często zmniejsza go o połowę. A nazwy warstw to tekst, który sam wpisałeś: <g inkscape:label="client logo v3 REJECTED"> jest niewidoczny na obrazie, ale doskonale widoczny w pliku.
Kiedy używać SVG
Używaj SVG do wszystkiego, co jest rysowane, a nie fotografowane: logo, ikony, diagramy, wykresy, ilustracje, mapy. To właściwy wybór w sieci, gdzie jeden plik obsługuje każdą gęstość ekranu, oraz w druku, gdzie można go skalować do dowolnego rozmiaru.
Używaj PNG lub JPG do fotografii i wszystkiego z płynnymi przejściami tonalnymi. Eksportuj także spłaszczoną kopię rastrową, gdy potrzebujesz obrazu, który otworzy się w oprogramowaniu zbyt starym lub zbyt ograniczonym, aby obsłużyć SVG, i usuń metadane edytora przed publikacją, zarówno aby zmniejszyć plik, jak i dlatego, że nazwy warstw nie zawsze są przeznaczone do publicznego wglądu.