Podgląd / edytor SVG

Jak działa podgląd / edytor SVG

Co robi narzędzie

Podgląd / edytor SVG renderuje znacznik SVG na żywo podczas edycji i wyciąga metadane (width, height, viewBox, liczba elementów) do szybkiej inspekcji. Przełącznik dodaje szachownicowe tło, aby wyraźnie widzieć obszary przezroczyste. Narzędzie generuje też zakodowany w URL data URI, odpowiedni do bezpośredniego użycia w CSS background-image lub w atrybutach HTML src.

Typowe zastosowania dla programistów

Projektanci ikon testują obliczenia viewBox i grubości obrysu w różnych rozmiarach. Frontendowcy sprawdzają, czy ręcznie edytowana ikona SVG nadal renderuje się poprawnie po optymalizacji (ręcznej lub przez SVGO). Deweloperzy e-maili generują kompaktowe wersje data URI znaków firmowych do osadzania w HTML. Edukatorzy pokazują, jak atrybuty takie jak preserveAspectRatio i overflow wpływają na renderowanie.

Formaty danych, typy lub warianty

Wejściem jest surowy znacznik SVG w XML. Wynikiem jest to samo SVG wyrenderowane w odizolowanym iframe oraz zakodowany w URL data URI (data:image/svg+xml;charset=utf-8,…). Metryka liczby elementów zlicza każdy tag otwierający (w tym defs, g, gradienty i podobne elementy zagnieżdżone), dając przybliżone pojęcie o złożoności. Wyciągnięte wartości atrybutów są pokazywane w postaci surowej.

Typowe pułapki i przypadki brzegowe

Zasoby zewnętrzne wskazywane przez elementy `use` lub `image` z href nie załadują się wewnątrz odizolowanego iframe. Wbudowany JavaScript w elementach script jest blokowany przez sandbox — animacje powinny opierać się na SMIL lub klatkach kluczowych CSS. SVG zależne od konkretnej czcionki, która nie jest zainstalowana w systemie, przełączy się na domyślną; osadzaj fonty lub używaj czcionek systemowych do podglądu.

Kiedy używać tego narzędzia zamiast kodu

Użyj narzędzia w przeglądarce do jednorazowego projektowania ikon, debugowania lub generowania data URI. Dla zasobów produkcyjnych przepuszczaj SVG przez SVGO z dopasowaną konfiguracją, aby usunąć metadane i zminimalizować znacznik, oraz używaj systemu sprite’ów lub właściwej integracji z bundlerem do ładowania ikon w aplikacji zamiast wszędzie osadzać data URI.