SVG → </>
Podgląd SVG online z edytorem kodu
Otwórz plik SVG albo wklej jego kod, aby zobaczyć, jak się wyświetla, sprawdzić wymiary i edytować go z podglądem na żywo. Wszystko zostaje w przeglądarce.
Działa w przeglądarce · pliki zostają na twoim urządzeniu
Jak obejrzeć plik SVG w podglądzie
- Otwórz plik lub wklej kod. Użyj przycisku Otwórz plik, upuść SVG na podgląd albo wklej kod do edytora.
- Sprawdź podgląd. Przełączaj tło między przezroczystym, jasnym i ciemnym, aby zobaczyć krawędzie i białe kształty.
- Edytuj kod. Podgląd aktualizuje się w trakcie pisania. Przycisk Formatuj kod porządkuje wcięcia.
- Skopiuj lub pobierz. Zapisz zmieniony plik SVG albo skopiuj kod.
Podgląd pliku SVG na dowolnym tle
Wiele ikon SVG jest białych albo ma przezroczyste obszary i znika na białej stronie. Przełącznik tła pokazuje obraz na szachownicy, na bieli i na ciemnej powierzchni. Tak wyłapiesz białe logo, brakujące wypełnienie albo krawędź, która wychodzi poza kształt.
Pod podglądem widać zadeklarowane width i height, viewBox, liczbę elementów i rozmiar pliku. Te wartości wyjaśniają większość problemów z wymiarami: SVG bez width i height przyjmuje rozmiar kontenera, a błędny viewBox przycina lub pomniejsza rysunek.
SVG viewer online z edytorem kodu
Edytor podświetla składnię XML, zwija długie grupy i pokazuje numery wierszy. Gdy w kodzie jest błąd, na przykład niezamknięty znacznik, podgląd pokazuje komunikat parsera zamiast pustego obrazu, więc wiesz, który wiersz poprawić.
Podgląd jest renderowany jako obraz. Skrypty zapisane w SVG się nie uruchamiają, dzięki czemu można bezpiecznie otwierać pliki otrzymane od innych osób.
Edycja SVG online: szybkie poprawki w kodzie
Typowe zmiany zajmują kilka sekund: zmiana koloru fill, usunięcie stałych width i height, żeby ikona była responsywna, skasowanie ukrytej warstwy albo dodanie elementu <title> dla dostępności. Do głębszego porządkowania przepuść plik przez optymalizator SVG.