Loading…

O nas Online Upiększacz i Minifikator SVG

Pracujesz z nieuporządkowanymi lub zbyt dużymi plikami SVG? Wklej swój kod lub prześlij plik `.svg`, wybierz **Formatuj**, aby upiększyć, lub **Minifikuj**, aby zmniejszyć jego rozmiar, i natychmiast otrzymaj czysty, zoptymalizowany kod SVG. Idealne dla projektantów, front-end developerów i każdego, kto potrzebuje szybkiej, bezpiecznej optymalizacji wektorów. 🚀

Kluczowe Funkcje Naszego Formatownika SVG

  • **Tryb upiększania** z inteligentnymi wcięciami, zawijaniem linii i wyrównaniem atrybutów
  • **Tryb minifikacji**, który usuwa białe znaki, komentarze i zbędne metadane
  • Formatowanie w stylu Prettier i optymalizacja w stylu SVGO pod maską
  • Konfigurowalny styl wcięć (spacje lub tabulatory) i rozmiar wcięcia
  • Opcjonalna kolumna zawijania, aby utrzymać długie ścieżki i atrybuty w porządku
  • Spójny styl końca linii (LF / CRLF) dla czystych różnic między systemami operacyjnymi
  • Przeciągnij i upuść pliki `.svg` do 5 MB lub wklej kod SVG inline
  • 100% przetwarzania po stronie klienta — twoja grafika nigdy nie opuszcza przeglądarki
  • Jednoklikowe kopiowanie lub pobieranie sformatowanego (`.formatted.svg`) lub zminimalizowanego (`.min.svg`) wyniku
  • Responsywny interfejs działający płynnie na laptopach, komputerach stacjonarnych i tabletach

🔧 Jak sformatować lub zminimalizować SVG: Szybki przewodnik for svg-formatter

1

1. Wklej lub prześlij SVG

📥 Przeciągnij i upuść plik `.svg` lub wklej surowy kod SVG do edytora. Narzędzie automatycznie wykrywa standardową zawartość `image/svg+xml`.

2

2. Wybierz formatowanie lub minimalizację

✨ Wybierz **Formatuj** dla czytelnego kodu (idealne do przeglądów i kontroli wersji) lub **Minimalizuj** dla najmniejszego możliwego rozmiaru pliku.

3

3. Dostosuj opcje formatowania

⚙️ Dostosuj **Styl wcięcia** (spacje lub tabulatory), **Rozmiar wcięcia** i opcjonalne **Zawijanie / Długość linii**. Te ustawienia bezpośrednio odpowiadają ustawieniom formatowania.

4

4. Podgląd i eksport

👀 Sprawdź zoptymalizowany kod SVG, przetestuj go szybko w swoim projekcie, a następnie skopiuj do schowka lub pobierz wynik jako nowy plik `.svg`.

Szczegóły techniczne

Silnik upiększania (Tryb formatowania)

Tryb formatowania wykorzystuje silnik w stylu Prettier dostosowany do znaczników XML SVG. Skupia się na czytelności i stabilnych, przewidywalnych różnicach.

AspektZachowanieUwagi
Styl wcięciaSpacje lub TabulatoryKonfigurowalne przez **Styl wcięcia** (odpowiada `indentStyle`).
Rozmiar wcięcia1–8 spacjiKontroluje szerokość zagnieżdżenia przy użyciu spacji (odpowiada `indentSize`).
Zawijanie / Długość linii0–120 kolumn`0` wyłącza zawijanie; w przeciwnym razie długie linie są zawijane wokół wybranej kolumny (odpowiada `wrapLineLength`).
Koniec liniiLF (`\n`) lub CRLF (`\r\n`)Utrzymuje spójne końce linii między systemami operacyjnymi (odpowiada `endOfLine`).
Język wyjściowySVG w stylu XMLZachowuje strukturę XML zgodną z SVG do bezpiecznego osadzania.

Potok minifikacji (Tryb minifikacji)

Tryb minifikacji wykorzystuje potok inspirowany SVGO, skupiający się na redukcji rozmiaru przy zachowaniu wyjścia wizualnego.

KrokOpisWpływ
Usuń komentarzeUsuwa węzły komentarzy `<!-- ... -->`, które nie wpływają na renderowanie.Mniejsze pliki, czystsze różnice.
Usuń zbędne białe znakiUsuwa niepotrzebne spacje, tabulatory i znaki nowej linii.Duże korzyści dla rozwlekłych SVG eksportowanych z edytorów.
Przytnij metadaneOpcjonalnie usuwa węzły metadanych nie wpływające na renderowanie, gdy jest to bezpieczne.Dobre dla publicznych zasobów produkcyjnych.
Normalizuj atrybutyUpraszcza i porządkuje atrybuty w stabilny sposób.Bardziej zwarte wyjście, lepsza możliwość buforowania.

Kodowanie i kompatybilność

Wyjście to UTF-8 SVG zgodne z nowoczesnymi przeglądarkami i narzędziami, zgodne ze specyfikacją SVG 2.

Wydajność i ograniczenia (Typowa przeglądarka desktopowa)

Typ plikuRozmiar wejściowyCzas upiększaniaCzas minifikacjiTypowa redukcja rozmiaru
Ikona5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Ilustracja100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Grafika Bohatera500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
Rzeczywista wydajność zależy od Twojego procesora, przeglądarki i złożoności SVG.

Alternatywy CLI dla Zaawansowanych Użytkowników

Wolisz przepływy pracy w terminalu lub integrację z CI? Połącz Prettier i SVGO, aby uzyskać zachowanie podobne do tego narzędzia:

Linux / 🍎 macOS

Upiększ SVG za pomocą Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Stosuje spójne wcięcia i zawijanie linii do znaczników SVG.

Minimalizuj SVG za pomocą SVGO

npx svgo input.svg -o input.min.svg

Usuwa komentarze, metadane i zbędne białe znaki dla mniejszych plików.

Windows (PowerShell lub CMD)

Sformatuj SVG za pomocą xmlstarlet (przez WSL lub natywnie)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Formatuje SVG/XML z wcięciem 2 spacji.

Minimalizuj SVG za pomocą SVGO (bez globalnej instalacji)

npx svgo input.svg -o min.svg

Uruchamia SVGO bezpośrednio przez `npx` do jednorazowych optymalizacji.

Dodaj Prettier + SVGO do swojego procesu budowania lub haków przed zatwierdzeniem, aby projektanci mogli eksportować surowe SVG, a Twoja pipeline utrzymywała je zoptymalizowane.

Praktyczne Zastosowania

Wydajność Sieci i Pakiety Frontendowe

  • Zmniejsz rozmiar SVG w systemach projektowych, zestawach ikon i arkuszach sprite'ów.
  • Osadzaj zminimalizowane SVG w HTML/CSS, aby zaoszczędzić dodatkowe żądania HTTP.
  • Popraw Core Web Vitals, zmniejszając ilustracje bohaterów na stronach docelowych.
<img src="/assets/hero.min.svg" alt="Zoptymalizowana grafika bohatera" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Przekazanie Projektu i Kontrola Wersji

  • Upiększ wyeksportowane SVG przed przeglądem kodu, aby różnice były czytelne.
  • Zachowaj ładny `.formatted.svg` do współpracy i `.min.svg` do produkcji.
  • Wymuszaj spójne wcięcia i kolejność atrybutów w systemie projektowym.

Aplikacje Mobilne, E-maile i Hybrydowe

  • Minimalizuj osadzone SVG w e-mailach HTML dla lżejszych kampanii.
  • Zmniejsz rozmiar pakietu aplikacji w React Native / Capacitor / Ionic przy dostarczaniu wielu ikon.
  • Oszczędzaj przepustowość dla użytkowników z wolnymi lub limitowanymi połączeniami.

❓ Frequently Asked Questions

❓Czym jest formatowanie SVG?

Formatowanie (lub upiększanie) restrukturyzuje znaczniki SVG z zachowaniem spójnych wcięć, podziałów linii i kolejności atrybutów. Nie zmienia to sposobu renderowania obrazu, a jedynie wygląd kodu i jego zachowanie przy porównywaniu różnic.

📏Czy minifikacja zmieni wygląd mojego SVG?

W normalnych przypadkach nie. Minifikacja usuwa komentarze, zbędne białe znaki i metadane nie wpływające na renderowanie. Jest zaprojektowana tak, aby zachować efekt wizualny przy zmniejszaniu rozmiaru. Jeśli polegasz na specjalnych metadanych dla narzędzi edycyjnych, zachowaj kopię zapasową oryginalnego pliku.

🔒Czy moje SVG jest przesyłane na serwer?

Nigdy. Wszystkie operacje formatowania i minifikacji odbywają się całkowicie w Twojej przeglądarce przy użyciu JavaScript/WebAssembly. Twoje pliki SVG nie są wysyłane na żaden serwer ani przechowywane zdalnie.

🚀Ile miejsca można zaoszczędzić dzięki minifikacji?

Rzeczywiste oszczędności wynoszą zazwyczaj między **30% a 70%**, w zależności od tego, jak SVG zostało wyeksportowane i ile metadanych lub białych znaków zawiera.

⚠️Czy usunięcie `<metadata>` lub komentarzy może zakłócić mój przepływ pracy?

Dla publicznych grafik internetowych usuwanie metadanych i komentarzy jest zazwyczaj bezpieczne. Jednak jeśli Twoje narzędzia projektowe przechowują dane edycyjne lub informacje o licencji w tych sekcjach, zachowaj oryginalną, niezmodyfikowaną kopię w systemie kontroli wersji na potrzeby przyszłych edycji.

Pro Tips

Best Practice

Przechowuj niezmodyfikowany `icon.formatted.svg` w swoim repozytorium dla czystych różnic, a następnie generuj `icon.min.svg` jako część procesu budowania.

Best Practice

Zawsze dodawaj znaczące elementy `<title>` i `<desc>` przed minifikacją, aby zachować dostępność SVG dla czytników ekranu.

Best Practice

Połącz minifikację SVG z kompresją HTTP (Gzip/Brotli), aby wycisnąć jeszcze więcej bajtów z ciężkich ilustracji i wykresów.

Best Practice

Dla zestawów ikon rozważ strategię sprite: zminifikuj raz, a następnie odwołuj się do ikon przez `<use>` zamiast duplikować kod SVG wszędzie.

Additional Resources

Specyfikacja W3C SVG 2
Technical specification
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Prettier XML / Formatowanie SVG
Documentation

Other Tools