Chwileczkę...(/)
Obecnie optymalizujemy Twoje obrazy. Prosimy chwilę poczekać, zapewniając najwyższą jakość wyników.
Świetnie, Twoje obrazy zostały pomyślnie skompresowane.
Obrazy zoptymalizowane.
Kompresuj Obrazy SVG Online
Usuń metadane, zachowaj wektor: Twój SVG wygląda identycznie
Optymalizacja...
Kompresuj pliki SVG, usuwając to, co zostawił edytor
Otwórz plik SVG w Notatniku, a zobaczysz całość: tagi, liczby, tekst. Taki właśnie jest ten format. Bez pikseli, bez zdjęcia – tylko instrukcje rysowania kształtów. To ważne, bo zmienia znaczenie kompresji w tym przypadku. Nic nie jest ściskane ani przybliżane. Zbędny tekst po prostu znika, a rysunek pozostaje nienaruszony.
Skąd naprawdę bierze się waga pliku
Prawie nic z tego to nie jest grafika. Eksportując logo z Illustrator, Figma lub Inkscape, plik przychodzi z papierologią edytora: komentarzem generatora, deklaracją DOCTYPE niepotrzebną od 2008 roku, deklaracją XML, blokiem metadanych opisującym dokument w RDF, nazwami warstw i blokiem stylów pełnym klas, których żaden element nie używa. W prawdziwym logo, które testowaliśmy, wszystko to stanowiło około dwie trzecie pliku. Kształty były najmniejszą częścią.
Są jeszcze liczby. Edytory zapisują współrzędne z pełną precyzją zmiennoprzecinkową, więc prostokąt o pozycji 10 i szerokości 180 zostaje zapisany jako 10.000000 i 180.00000000. Pomnóż to przez każdy punkt w każdej ścieżce, a same miejsca po przecinku mogą ważyć więcej niż rysunek.
Pozostaje wektorem, więc nie ma czego stracić na jakości
To jest ten moment, o który ludzie martwią się bez powodu. SVG nie ma rozdzielczości. Jest rysowany na nowo w dowolnym rozmiarze, w jakim zostanie wyświetlony – czy to favicon 16 pikseli, czy billboard. Usunięcie bloku metadanych nie zmienia niczego. Plik, który wraca, skaluje się dokładnie tak samo jak ten przesłany, wygląda identycznie w każdym rozmiarze i nadal można go w pełni edytować w programie, w którym został stworzony.
Co zostaje usunięte
Porządkowanie jest z założenia ostrożne. Usuwane są tylko elementy nie mające wpływu na wyświetlanie.
| Usunięte | Pozostawione |
|---|---|
| Komentarze edytora i ciągi generatora | Każdy kształt, ścieżka i krzywa |
| Blok metadanych i jego przestrzenie nazw RDF | Kolory, gradienty i przezroczystość |
| DOCTYPE i deklaracja XML | Elementy tekstowe i czcionki |
| Definicje, do których nic się nie odwołuje | Filtry, maski i ścieżki przycinania w użyciu |
| Puste grupy i warstwy | Transformacje i viewBox |
| Nadmierna liczba miejsc po przecinku we współrzędnych | Wszystko, co wpływa na wygląd |
Dlaczego mniejsze SVG są ważniejsze niż mniejsze zdjęcia
SVG to zwykle logo lub ikona, czyli element w nagłówku każdej strony serwisu, ładujący się przed wszystkim innym. Zdjęcia ładują się późno i leniwie. Ikony nie. Ucięcie kilku kilobajtów z logo w nagłówku daje większy zysk dla szybkości strony niż ta sama oszczędność w obrazie w połowie artykułu, bo to nagłówek blokuje przeglądarkę przed rozpoczęciem renderowania.
Jedna rzecz warta sprawdzenia przed wdrożeniem
Porządkowanie skraca wewnętrzne atrybuty id w pliku. Odwołania wewnątrz tego samego SVG są aktualizowane, więc gradienty, maski i ścieżki przycinania działają jak wcześniej, a rysunek wyświetla się identycznie. Czego nie da się przewidzieć, to kod poza plikiem. Jeśli SVG jest częścią sprite’a ikon, na który wskazują inne strony, albo jeśli arkusz stylów lub skrypt odwołuje się do elementu po id, warto to przetestować po podmianie pliku. Dla zwykłego logo lub eksportowanej ikony, czyli większości SVG, nie ma czego sprawdzać.
Jeśli Twój SVG zawiera zdjęcie
Czasem SVG nie jest tak naprawdę wektorem. Jeśli umieścisz zdjęcie na obszarze roboczym w Illustratorze, wyeksportujesz jako SVG, obraz zostaje osadzony jako długi ciąg base64 w XML. Plik może mieć dwa megabajty i tylko jeden kształt. Czyszczenie znaczników nie dotknie tego bloku, bo to nie jest znacznik. Jeśli Twój plik prawie się nie zmniejszył i od początku miał w sobie zdjęcie, to dlatego – rozwiązaniem jest wyjęcie obrazu i osobna kompresja jako JPEG lub PNG.
Nic do ustawiania
Nie ma żadnych opcji, poziomów kompresji ani zaawansowanych zakładek. Prześlij plik, odbierz wyczyszczony. Kilka naraz działa tak samo – możesz pobierać pojedynczo w miarę gotowości lub cały zestaw jako ZIP.
Co dzieje się z Twoimi plikami
Pliki przesyłane są przez szyfrowane połączenie, czyszczone i usuwane z serwera po godzinie. Nic nie jest przechowywane ani wykorzystywane do innych celów.
Co zyskujesz
- Usunięte metadane edytora, komentarze generatora, DOCTYPE i nieużywane definicje
- Współrzędne zaokrąglone do rozsądnej precyzji zamiast dziewięciu miejsc po przecinku
- Plik, który nadal skaluje się w nieskończoność i otwiera się w Twoim edytorze
- Identyczne wyświetlanie w każdym rozmiarze, potwierdzone względem oryginału
- Wsadowe przesyłanie, pobieranie pojedynczo lub całego zestawu jako ZIP
- Bez konta, bez instalacji, a pliki usuwane z serwera po godzinie
Co dalej?
Pracujesz z logo, które masz też jako bitmapę? Kompresja PNG obsłuży wersję z przezroczystością, a Kompresja WebP – nowoczesną. Jeśli SVG okazał się zawierać zdjęcie, Kompresja JPG to miejsce dla tego obrazu.
Najczęściej zadawane pytania
Nie, i nie jest to możliwe. SVG nie ma pikseli ani rozdzielczości. To zestaw instrukcji rysowania, które przeglądarka wykonuje na nowo w dowolnym rozmiarze, więc jest tak samo ostry na telefonie, jak i na billboardzie. Czyszczenie pliku usuwa tekst, który nie rysuje niczego – komentarze i metadane. Kształty, krzywe i kolory pozostają nietknięte, więc efekt końcowy wygląda identycznie w każdym rozmiarze.
Papierologia dodana przez Twój edytor. Illustrator, Figma i Inkscape zapisują komentarz generatora, deklarację XML, DOCTYPE, blok metadanych w RDF, nazwy warstw i często blok stylów z klasami, których nikt nie używa. Do tego współrzędne są zapisywane z pełną precyzją, więc wartość 180 staje się 180.00000000. W typowym eksporcie logo wszystko to stanowi około dwie trzecie pliku. To, co rysuje obrazek, to najmniejsza część.
Tak. Wynik to zwykły plik SVG, więc otworzysz go w Illustrator, Figma, Inkscape lub dowolnym edytorze tekstu dokładnie jak oryginał. Jedyna różnica to brak części zapisków edytora, więc nazwy warstw mogą nie wrócić w takiej formie, jak je zostawiłeś. Sama grafika pozostaje nienaruszona i w pełni edytowalna.
Są dwa typowe powody. Albo plik był już zoptymalizowany – co się zdarza przy SVG eksportowanych z narzędzi czyszczących pliki lub po wcześniejszej optymalizacji – albo zawiera osadzone zdjęcie. To drugie często zaskakuje: umieszczenie zdjęcia na obszarze roboczym w Illustratorze i eksport jako SVG powoduje osadzenie obrazu jako bloku base64 w XML. Ten blok to dane obrazu, nie znacznik, więc czyszczenie znaczników go nie rusza. Jeśli SVG o wielkości dwóch megabajtów prawie się nie zmienia, otwórz go w edytorze tekstu i poszukaj bardzo długiego ciągu zaczynającego się od data:image.
Może, i warto o tym wiedzieć przed wdrożeniem. Porządkowanie skraca atrybuty id w pliku. Odwołania wewnątrz tego samego SVG są aktualizowane, więc gradienty, maski i ścieżki przycinania działają jak wcześniej, a obrazek wyświetla się identycznie. Kod poza plikiem to co innego: jeśli arkusz stylów wskazuje element po id, JavaScript animuje konkretny węzeł lub plik jest częścią sprite’a używanego przez inne strony, przetestuj to po podmianie pliku. Dla samodzielnego logo lub eksportowanej ikony, czyli większości SVG, nie ma się czym martwić.
Tak, te dwie metody się uzupełniają, a nie konkurują. To czyszczenie usuwa tekst, którego w pliku w ogóle nie powinno być. Gzip, stosowany przez Twój serwer podczas wysyłki pliku, kompresuje to, co zostaje. Stosowanie obu to standardowa praktyka, a efekt końcowy jest mniejszy niż przy każdej metodzie osobno. Warto też sprawdzić, czy serwer faktycznie włącza kompresję dla typu image/svg+xml, bo domyślne konfiguracje często obejmują tylko HTML, CSS i JavaScript.