SVGZ a SVG: wybierz plik do edycji lub przekazania

SVGZ to plik SVG skompresowany za pomocą gzip. Po dekompresji odzyskujesz dokument SVG wraz ze ścieżkami, kolorami, tekstem i wszystkimi osadzonymi obrazami. Dokument W3C SVG media-type registration definiuje .svgz jako alias .svg.gz.

Wybierz SVGZ lub SVG w zależności od sposobu pracy odbiorcy. Zachowaj zwykły plik .svg, gdy ktoś potrzebuje czytelnego kodu lub aplikacja oczekuje tego formatu. Użyj .svgz, gdy odbiorca go obsługuje i masz powód, by dostarczyć skompresowany plik. W przypadku strony internetowej sprawdź kompresję HTTP, zanim zmienisz nazwy plików: adres URL kończący się na .svg może już przesyłać skompresowaną zawartość.

Poniższy przykład kompresuje oryginalny emblemat o rozmiarze 332 bajtów do 243 bajtów, a następnie przywraca dokładnie te same bajty co w oryginale. To wynik dla jednego pliku, a nie obietnica dotycząca Twojej grafiki lub szybkości strony.

Co się zmienia, gdy SVG staje się SVGZ?

Przewodnik MDN Getting started with SVG rozróżnia zwykły tekstowy SVG i SVG skompresowany za pomocą gzip oraz wyjaśnia konfigurację serwera wymaganą przez SVGZ. Jeśli sam dokument SVG jest Ci nieznany, zacznij od tego, co zawiera plik SVG.

Skompresowana kopia to użyteczny sposób pakowania pliku. Zachowaj osobno edytowalny plik źródłowy, aby móc sprawdzać obiekty, wprowadzać poprawki i eksportować plik w postaci wymaganej przez kolejne narzędzie.

Wypróbuj kompresję i dekompresję SVGZ na jednym małym emblemacie

Ta oryginalna ilustracja zawiera turkusowy sześciokąt, koralowe słońce i jasną górę. Zapisz poniższy kod jako badge.svg w folderze roboczym:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

W systemie z narzędziami gzip, cmp i wc uruchom te polecenia w tym folderze. Użyj nowych nazw plików wyjściowych, jeśli pliki o tych nazwach zawierają już pracę, którą chcesz zachować.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Pierwsze polecenie zapisuje skompresowaną kopię, zachowując plik źródłowy. Opcja -n pomija oryginalną nazwę pliku i znacznik czasu w nagłówku gzip. Drugie polecenie dekoduje skompresowaną kopię do innego pliku. cmp porównuje bajty, a wc -c podaje ich liczbę.

Uruchomiliśmy tę sekwencję przy użyciu Apple gzip 457.140.3. Wszystkie polecenia zakończyły się powodzeniem, a cmp nie wykrył żadnej różnicy między oryginalnym a zdekodowanym SVG.

Skompresowany plik pozwolił zaoszczędzić 89 bajtów, czyli około 26,8% rozmiaru tego pliku źródłowego. Inne białe znaki, zakończenia wierszy, metadane, grafika lub ustawienia kompresji mogą zmienić wynik. Porównanie bajtów potwierdza, że ta kompresja i dekompresja zachowały plik źródłowy. Nie mierzy ono czasu przesyłania w przeglądarce, wydajności renderowania ani zgodności z aplikacją do edycji.

Jeśli potrzebujesz jedynie otworzyć SVGZ w edytorze, który oczekuje SVG, właściwą operacją jest dekompresja. Zmiana nazwy badge.svgz na badge.svg pozostawia skompresowane bajty bez zmian. Podobnie zmiana nazwy SVG na SVGZ nie uruchamia gzip.

Oddziel kompresję od porządkowania grafiki

Załóżmy, że logo po wektoryzacji ma nierówny obrys i setki zbędnych punktów. Gzip może zmniejszyć rozmiar zapisanego pliku, ale dekodowanie przywraca te same punkty. Skorzystaj z przewodnika po porządkowaniu węzłów SVG, gdy problemem podczas edycji jest złożoność geometrii. Porównuj sylwetkę podczas upraszczania, ponieważ usuwanie punktów może zmienić grafikę.

Optymalizacja kodu to kolejna odrębna operacja. Usuwanie metadanych, zmiana zapisu liczb lub łączenie zgodnych kształtów zmienia dokument źródłowy przed kompresją. Kompresja i dekompresja gzip, które zachowują identyczność bajtów, nie wykonują żadnej z tych czynności. Jeśli narzędzie do optymalizacji także edytuje SVG, sprawdź jego wynik niezależnie, zamiast przypisywać każdą zmianę kompresji. Przewodnik po konfiguracji SVGO i zachowywaniu identyfikatorów pokazuje taką kontrolę na przykładzie oryginalnego emblematu, w którym domyślny zestaw ustawień usuwa punkt zaczepienia dla zewnętrznego CSS.

SVG może również zawierać obraz rastrowy. Kompresja takiego dokumentu zachowuje osadzony obraz; nie tworzy edytowalnych obrysów wokół przedstawionych na nim obiektów. Poradnik diagnozowania osadzonego obrazu rastrowego pomaga odróżnić dokument zawierający obraz rastrowy od grafiki zbudowanej ze ścieżek wektorowych.

Te rozróżnienia ułatwiają wybór kolejnego kroku: przeprowadź dekompresję, aby odzyskać kod, edytuj, aby zmienić geometrię, a wektoryzację wykonuj tylko wtedy, gdy odpowiednia grafika rastrowa wymaga nowych kształtów wektorowych.

Strona internetowa może kompresować odpowiedzi zawierające zwykły SVG

Kompresja HTTP jest niezależna od nazwy pliku widocznej w adresie URL. Serwer może otrzymać żądanie pliku badge.svg i wysłać skompresowaną reprezentację tego SVG. Przewodnik MDN Compression in HTTP opisuje negocjację: żądanie wskazuje obsługiwane kodowania, a odpowiedź określa użyte kodowanie. Gdy reprezentacja różni się w zależności od Accept-Encoding, odpowiedź używa Vary: Accept-Encoding, aby pamięci podręczne mogły rozróżnić te wersje.

W przypadku odpowiedzi SVG zakodowanej za pomocą gzip odpowiednie nagłówki to:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type określa typ zdekodowanej zawartości. Content-Encoding informuje odbiorcę, jak zdekodować treść odpowiedzi. Dokumentacja MDN Content-Encoding wyjaśnia to rozróżnienie. Te nagłówki muszą opisywać faktycznie wysłane bajty; dodanie Content-Encoding: gzip do nieskompresowanego SVG nie kompresuje go.

W przypadku zapisanego pliku .svgz udostępnianego jako obraz SVG wskazówki MDN w Getting started with SVG wymagają typu mediów SVG i kodowania zawartości gzip. Sprawdź ostateczną odpowiedź w panelu Network przeglądarki, uwzględniając także zachowanie CDN. Pomyślne otwarcie lokalnego pliku nie weryfikuje tej odpowiedzi.

Zanim zastąpisz istniejący SVG plikiem SVGZ, sprawdź, czy odpowiedź zawierająca zwykły SVG jest już skompresowana. Porównaj rzeczywiste odpowiedzi w tych samych warunkach, w tym przy takim samym stanie pamięci podręcznej, zamiast porównywać rozmiar lokalnego pliku SVG z rozmiarem transferu sieciowego. Nasz powyższy test emblematu nie obejmuje takiego porównania przesyłania przez sieć.

Wyślij plik, którego kolejna aplikacja może użyć

Jeśli przekazujesz plik do edycji, zapytaj, jaki format odbiorca może importować. Jeśli jego aplikacja przyjmuje SVG, ale odrzuca SVGZ, dostarcz SVG po dekompresji i przetestuj tę kopię. Dekompresja nie może dodać obsługi funkcji SVG, których sama aplikacja nie rozumie.

Otwórz akceptowany plik w docelowej aplikacji i sprawdź jego obiekty. Skontroluj napisy, przycinanie, osadzone obrazy, kolory i najmniejsze istotne szczegóły. Oddziel tę kontrolę od dekodowania pliku: aplikacje obsługujące różne zestawy funkcji mogą różnie interpretować nawet identyczne bajty pliku źródłowego.

Jeśli plik wygląda na pusty, najpierw ustal, czy został zdekodowany do czytelnego SVG. Następnie zbadaj dokument i kontekst jego wyświetlania, korzystając z przewodnika rozwiązywania problemów z pustym SVG. Wielokrotna kompresja nie naprawia niewidocznego wypełnienia lub obrysu, brakującej zawartości ani nieodpowiedniego obszaru roboczego.

Zachowaj plik źródłowy, kopię do przekazania i krótką notatkę z nazwą narzędzia odbiorcy. To bardziej użyteczne niż wybór najmniejszego lokalnego pliku, zanim dowiesz się, dokąd trafi.

Gdy plik źródłowy nadal potrzebuje ścieżek wektorowych

Jeśli brakuje wektorowego pliku źródłowego i pozostało tylko spłaszczone logo PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc przygotować edytowalny plik SVG do oceny. Porównaj podgląd z oryginałem, sprawdź otwory i oddzielne obszary, a następnie otwórz pobrany plik w docelowym edytorze. Wybierz kompresję dopiero po zaakceptowaniu grafiki.

PerfectVector nie jest potrzebny do rozpakowania istniejącego SVGZ. Do tego zadania użyj dekompresji. Zachowaj fotografie lub efekty malarskie w postaci rastrowej, gdy pozwala to utrzymać zamierzony wygląd, i korzystaj z istniejącego wektorowego pliku źródłowego, gdy jest dostępny. Przewodniki po formatach i edycji na blogu omawiają te wybory dotyczące materiału źródłowego przed jego spakowaniem.

Najczęściej zadawane pytania

Czy SVGZ ma wyższą jakość niż SVG? Nie. Kompresja gzip zmienia reprezentację zapisaną w pliku. Poprawna dekompresja przywraca źródło SVG; nie poprawia jego ścieżek, kolorów ani osadzonych obrazów.

Jak zamienić SVGZ na SVG? Przeprowadź dekompresję narzędziem obsługującym gzip, a następnie zapisz zdekodowany SVG. Na przykład gzip -dc badge.svgz > roundtrip.svg zapisuje zdekodowaną kopię. Sama zmiana rozszerzenia nie wykonuje tej operacji.

Czy SVGZ zawsze przyspiesza stronę internetową? Samo rozszerzenie nie gwarantuje określonej poprawy szybkości. Odpowiedź zawierająca zwykły SVG może już korzystać z kompresji HTTP. Sprawdź rzeczywiste nagłówki odpowiedzi, liczbę przesłanych bajtów, stan pamięci podręcznej i zachowanie strony.

Czy kompresja SVG zmniejsza liczbę jego węzłów? Nie. Gzip zachowuje źródło, które jest przywracane podczas dekodowania. Upraszczanie ścieżek lub inna optymalizacja SVG to odrębna operacja wymagająca osobnej kontroli grafiki.

Źródła

1. W3C — SVG media-type registration — definiuje SVGZ jako SVG skompresowany za pomocą gzip i określa jego związek z SVG.GZ.
2. MDN — Getting started with SVG — rozróżnia postacie plików i dokumentuje nagłówki odpowiedzi SVGZ.
3. MDN — Content-Encoding — wyjaśnia dekodowanie i związek między kodowaniem a typem mediów.
4. MDN — Compression in HTTP — omawia negocjację kompresji odpowiedzi i rozróżnianie wersji w pamięci podręcznej.

Dopasuj plik do przekazania do narzędzia odbiorcy, a następnie sprawdź zdekodowaną grafikę. Jeśli zaczynasz od rastrowego logo, które wymaga edytowalnych kształtów, przygotuj plik SVG do oceny i sprawdź jego ścieżki, zanim zdecydujesz, jak go skompresować.