Przeglądarka SVG

O GeekFormat

Wejście SVG

0 znaków

Lokalny podgląd, nie wklejaj treści skryptów z niezaufanych źródeł

Wejście SVG

0 znaków

Lokalny podgląd, nie wklejaj treści skryptów z niezaufanych źródeł

Podgląd

Wklej lub napisz SVG w 'Wejściu'Wklej lub wprowadź kod SVG po lewej stronie

Przeglądarka SVG online. Wklej kod SVG, aby natychmiast wyrenderować i podejrzeć obraz wektorowy w czasie rzeczywistym. Obsługuje kopiowanie i pobieranie plików .svg. Przetwarzanie lokalne — bezpiecznie.

Powiązane Rekomendacje

Konwersja obrazów

Kompresja obrazów

Zmiana rozmiaru obrazu

Przycinanie obrazów

edytor obrazow

Generator ICO

Co to jest SVG?

SVG (Scalable Vector Graphics, skalowalna grafika wektorowa) to format obrazów opisujący figury geometryczne za pomocą XML. W przeciwieństwie do JPG i PNG, które są rastrowe (macierz pikseli), SVG używa tagów <rect>, <circle>, <path> i innych do opisu matematycznych ścieżek figur, dzięki czemu obraz nie rozmywa się przy skalowaniu do dowolnego rozmiaru.

**Do jakich scenariuszy nadaje się SVG?** Logotypy, ikony UI, schematy blokowe, znaczniki map, wykresy, dekoracje animacyjne, ilustracje wielokrotnego użytku — w tych scenariuszach wymagania dotyczące ostrości, możliwości zmiany koloru, skalowalności i sterowania przez CSS są wysokie, więc SVG jest naturalnym wyborem.

**Różnica od Canvas:** Canvas to imperatywne API do rysowania, po narysowaniu wszystko staje się pikselami; SVG to deklaratywne węzły DOM, których atrybuty i style CSS można zmieniać w dowolnym momencie, a także powiązywać zdarzenia. Dlatego do ikon, UI i interaktywnych scenariuszy używaj SVG, a do gier, cząstek i pixel-artu — Canvas.

**Typowa struktura:** <svg> węzeł główny, <g> grupowanie, <path> ścieżka (najczęściej używana, zawiera atrybut d), gradienty (<linearGradient>/<radialGradient>), filtry (<filter>), animacja (SMIL/CSS/JS).

**Jak podejrzeć?** Za pomocą tego narzędzia wklej kod źródłowy SVG do edytora — po prawej wyrenderuje się w czasie rzeczywistym. Dzięki przeciąganemu separatorowi w kilka sekund można sprawdzić poprawność kodu SVG i zgodność wyświetlania z oczekiwaniami.

Przypadki użycia

Deweloperzy frontendowi potrzebują szybko podejrzeć wynik renderowania kodu ikon SVG
Sprawdzanie wyświetlania SVG po skopiowaniu z Figma, Sketch i innych narzędzi projektowych
Podgląd zmian w czasie rzeczywistym podczas debugowania ścieżek, kolorów lub atrybutu viewBox SVG
Sprawdzanie i walidacja kodu SVG przed integracją z kodem projektu

Jak Używać

Wklej kod źródłowy SVG do lewego edytora lub kliknij «Załaduj przykład» aby zobaczyć demonstrację
Po prawej natychmiast wyświetli się wynik renderowania obrazu wektorowego, podczas edycji kodu podgląd aktualizuje się w czasie rzeczywistym
Po sprawdzeniu kliknij przycisk kopiowania, aby skopiować kod, lub pobierz jako plik .svg z własną nazwą

Funkcje

Podgląd w czasie rzeczywistym: wklejaj lub edytuj kod SVG — obraz wektorowy renderuje się natychmiast, WYSIWYG
Podzielony interfejs: na komputerze przeciąganie reguluje szerokość paneli, na urządzeniach mobilnych przełączanie między wprowadzaniem a podglądem przez zakładki
Eksport jednym kliknięciem: kopiowanie kodu źródłowego SVG do schowka lub pobieranie jako standardowy plik .svg z własną nazwą
Przetwarzanie lokalne: całe parsowanie i renderowanie SVG odbywa się w przeglądarce, kod nie jest wysyłany na serwer — bezpieczniej
Przezroczyste tło: tło w szachownicę pozwala wyraźnie widzieć przezroczyste obszary i detale krawędzi SVG
Licznik znaków: w czasie rzeczywistym wyświetla liczbę znaków w kodzie, wbudowane przykłady do szybkiego startu

Często Zadawane Pytania

Jak podejrzeć efekt kodu SVG online?

Wklej kod źródłowy SVG do lewego edytora, a po prawej natychmiast wyrenderuje się obraz wektorowy. Można edytować kod bezpośrednio w edytorze, obszar podglądu aktualizuje się w czasie rzeczywistym — wygodne do debugowania ikon i sprawdzania efektów.

Jak pobrać i zapisać podejrzany SVG?

Kliknij przycisk pobierania w prawym górnym rogu obszaru podglądu, podaj nazwę pliku i zapisz jako standardowy plik .svg. Możesz też kliknąć przycisk kopiowania, aby skopiować kod źródłowy SVG do schowka i wkleić go do kodu projektu.

Czy kod SVG jest wysyłany na serwer? Czy to bezpieczne?

Nie. Całe parsowanie i renderowanie SVG odbywa się lokalnie w przeglądarce, kod nie jest wysyłany na żadne serwery. Po przetworzeniu dane są natychmiast usuwane z pamięci, co eliminuje ryzyko wycieku nieopublikowanych ikon i projektów.

Czy obsługiwany jest kod SVG skopiowany z programów projektowych?

Tak. Kod SVG skopiowany z Figma, Sketch, Adobe Illustrator i innych programów projektowych można wklejać bezpośrednio do podglądu. Zaleca się najpierw sprawdzić wynik renderowania, a dopiero potem zintegrować z projektem.

Dlaczego podgląd SVG się nie wyświetla? Typowe przyczyny?

Typowe przyczyny: ① brak deklaracji przestrzeni nazw xmlns="http://www.w3.org/2000/svg"; ② niezamknięte tagi w kodzie; ③ niepoprawne eskejpowanie znaków specjalnych; ④ błędy składniowe w samym SVG. Sprawdź te punkty.

Czy można nadać własną nazwę pobieranego pliku SVG?

Tak. Po kliknięciu przycisku pobierania pojawi się pole do wprowadzenia nazwy pliku. Podaj żądaną nazwę (domyślnie image.svg), naciśnij Enter lub potwierdź — plik się pobierze. Narzędzie automatycznie doda rozszerzenie .svg.

Słownik

viewBox: Wewnętrzny układ współrzędnych SVG, określany w formacie «x y width height». Popularne «0 0 24 24» oznacza szerokość i wysokość 24 jednostek. Rzeczywisty wyświetlany rozmiar SVG jest kontrolowany przez atrybuty width/height lub zewnętrzny CSS.
Przestrzeń nazw XML (namespace): Aby przeglądarka poprawnie rozpoznała SVG jako dokument SVG, należy zadeklarować xmlns="http://www.w3.org/2000/svg". Brak namespace to najczęstsza przyczyna, dla której SVG nie wyświetla się w HTML.MDN — Przestrzeń nazw SVG
Atrybut d ścieżki path: Zestaw poleceń ścieżki składających się z liter M/L/C/Q/H/V/Z i współrzędnych. M=przesuń, L=narysuj linię, C=krzywa Beziera trzeciego stopnia, Q=krzywa Beziera drugiego stopnia, Z=zamknij ścieżkę. Złożone ikony często są wyrażone tylko jednym elementem path z atrybutem d.
currentColor: Słowo kluczowe CSS odnoszące się do właściwości color bieżącego elementu. Jeśli w SVG ustawisz fill lub stroke jako currentColor, zmiana color w zewnętrznym CSS zmieni kolor ikony — to powszechna praktyka w systemach projektowych.

Szybki podręcznik częstych elementów SVG

Element	Typ	Przeznaczenie
`<svg>`	Węzeł główny	Kontener dla wszystkich SVG, wymagany
`<rect>`	Kształt podstawowy	Prostokąt, prostokąt z zaokrąglonymi rogami
`<circle> / <ellipse>`	Kształt podstawowy	Okrąg / Elipsa
`<line> / <polyline>`	Kształt podstawowy	Linia prosta / Łamana
`<polygon> / <path>`	Ścieżka	Wielokąt / Dowolna krzywa (atrybut d)
`<text> / <tspan>`	Tekst	Tekst osadzony w SVG
`<g>`	Grupowanie	Grupowanie węzłów do stosowania wspólnych przekształceń
`<defs> / <symbol>`	Definicje	Kształty i gradienty wielokrotnego użytku
`<linearGradient> / <radialGradient>`	Gradient	Wypełnienie gradientem liniowym / promienistym
`<use>`	Ponowne użycie	Odwołanie do elementu z defs
`<filter>`	Filtr	Rozmycie, cienie i inne zaawansowane efekty

Porównanie SVG i formatów rastrowych

Parametr	SVG (wektor)	PNG (raster)	JPG (raster)
Sposób reprezentacji	XML opisuje ścieżki geometryczne	Macierz pikseli	Macierz pikseli (kompresja DCT)
Efekt przy powiększeniu	Nie rozmywa się przy dowolnej skali	Rozmywa się przy powiększeniu	Rozmywa się, widoczne artefakty kompresji
Rozmiar pliku	Zależy od złożoności ścieżek, logotypy zazwyczaj < 10KB	Średni (bezstratny)	Mały (stratny)
Przezroczyste tło	✅	✅	❌
Obsługa animacji	✅ SMIL / CSS / JS	❌ (wymaga APNG)	❌
Zmiana koloru przez CSS	✅ currentColor / zmienne fill	❌	❌
Odpowiednie zastosowania	Ikony, logotypy, wektory UI	Materiały z przezroczystym tłem, zrzuty ekranu	Zdjęcia, duże gradienty

Authoritative References

ReferenceMDN — Samouczek SVG
ReferenceMDN — Element <svg>
ReferenceWikipedia — Scalable Vector Graphics
ReferenceW3C — Specyfikacja SVG