Podgląd i inspektor SVG

Wklej lub upuść SVG, aby zobaczyć go od razu wyrenderowanego wraz z panelem statystyk obejmującym wymiary, viewBox, zestawienie elementów, unikalne kolory i flagi bezpieczeństwa. Podgląd uruchamia się w izolowanej ramce iframe z wyłączonymi skryptami i dostępem same-origin, więc wrogie SVG nie mogą wykonać kodu. Wyeksportuj obraz jako SVG lub PNG, przełączaj się między białym, czarnym lub przezroczystym tłem w szachownicę, albo przełącz na widok źródła, aby zbadać znaczniki.

Specyfikacje

• SVG 2 Specification
• MDN: SVG

Typowe zastosowania

• Szybki podgląd ikony lub ilustracji SVG przed jej osadzeniem
• Sprawdź, czy niezaufany SVG zawiera skrypty lub obsługę zdarzeń
• Zweryfikuj viewBox i wymiary własne SVG
• Policz unikalne kolory w SVG (przydatne do ekstrakcji palety lub optymalizacji)
• Przekonwertuj SVG do PNG na kolorowym lub przezroczystym tle
• Zbadaj zestawienie elementów, aby wykryć nieoczekiwane użycie <script> lub <foreignObject>

Funkcje

• Izolowany podgląd — SVG jest renderowany w ramce iframe z sandbox="", więc skrypty i obsługa zdarzeń nie mogą się uruchomić
• Przełącznik tła: białe, czarne lub przezroczysty wzór szachownicy
• Panel statystyk: wymiary, viewBox, proporcje, rozmiar w bajtach, liczba elementów, najczęstsze elementy, unikalne kolory
• Flagi bezpieczeństwa wyróżniają SVG zawierające <script>, obsługę zdarzeń, odwołania zewnętrzne lub animacje
• Eksport jako SVG lub PNG w wysokiej rozdzielczości (2×) — wybrane tło jest wbudowane w eksport PNG
• Pełnoekranowy podgląd do analizy szczegółów
• Widok źródła z podświetlaniem składni
• Kopiuj znormalizowany SVG do schowka

Przyklady

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Wskazowki

• Używaj viewBox zamiast stałych width/height, aby obraz skalował się poprawnie
• Jeśli zaświecą się plakietki Skrypty lub Obsługa zdarzeń, SVG wykona kod po osadzeniu — usuń je zanim mu zaufasz
• Tło w szachownicę pomaga wykryć niezamierzoną przezroczystość; przełącz na białe lub czarne, aby sprawdzić wygląd na różnych stronach
• Eksport PNG jest renderowany w rozdzielczości 2×; użyj eksportu SVG, aby zachować jakość wektorową
• Zewnętrzne odwołania (href http://) nie załadują się w podglądzie w sandbox — to celowe