Przeglądarka i edytor SVG online: kod, podgląd, ścieżki | We.Inc
Wklej lub otwórz SVG i zobacz go obok kodu. Edytuj na żywo, sprawdź na jasnym, ciemnym i szachownicowym tle, przeanalizuj polecenia ścieżek, wyczyść kod i eksportuj PNG lub komponent React.
Przeglądarka i edytor SVG
Wklej kod SVG lub otwórz plik .svg, a obraz pojawi się obok kodu. Edytuj kod, a podgląd odświeża się w trakcie pisania. Zmień tło, aby sprawdzić przezroczyste obszary, przybliż, wyświetl listę wszystkich poleceń ścieżek, usuń zbędne dane z edytora, a następnie pobierz wynik jako SVG, PNG lub komponent React.
Co możesz wyeksportować
Format
Zastosowanie
SVG (oczyszczony)
Strony internetowe, ikony, logo; najmniejszy plik
PNG od 1x do 4x
Miejsca, które nie akceptują SVG, na przykład niektóre klienty poczty i posty w mediach społecznościowych
Komponent React (JSX)
Użycie grafiki inline w projekcie React lub Next.js
Widok kodu i podgląd na żywo obok siebie. Nic nie jest wysyłane: plik odczytuje i rysuje Twoja własna przeglądarka, a podgląd jest wyświetlany jako obraz, więc żaden skrypt wewnątrz SVG nie może się uruchomić.
Wklej znaczniki SVG do pola kodu, upuść na nie plik lub użyj przycisku Otwórz plik. Wczytany jest przykład, więc możesz od razu wypróbować narzędzia.
Edytuj kod. Podgląd aktualizuje się w trakcie pisania i informuje Cię, gdy znaczniki są uszkodzone.
Zmień tło podglądu na białe, ciemne lub szachownicę i przybliżaj od 25% do 800%, aby sprawdzić drobne szczegóły.
Otwórz inspektor ścieżek, aby zobaczyć polecenia każdej ścieżki opisane zwykłymi słowami, takimi jak Przesuń do, Linia do i Krzywa sześcienna, wraz z ich liczbami.
Kliknij Wyczyść, aby usunąć komentarze, metadane i atrybuty edytora oraz zaokrąglić długie ułamki, a następnie pobierz plik jako SVG lub PNG albo skopiuj go jako JSX.
Zachowaj atrybut viewBox i usuń stałe width i height, jeśli chcesz, aby SVG skalował się w CSS razem ze swoim kontenerem.
Ustaw fill lub stroke na currentColor w ikonach, aby przejmowały kolor tekstu elementu, w którym się znajdują.
Dwa miejsca po przecinku wystarczą dla niemal każdej ikony rysowanej na siatce 24 lub 100 jednostek. Większa precyzja głównie dodaje bajtów.
Nigdy nie wklejaj SVG z niezaufanego źródła bezpośrednio do HTML strony. Inline SVG może zawierać skrypty; wczytaj go tagiem img albo najpierw go wyczyść.
Najczęściej zadawane pytania
Jak otworzyć plik SVG?
Każda nowoczesna przeglądarka otwiera pliki SVG bezpośrednio, ale pokazuje tylko obraz. Aby zobaczyć kod i obraz jednocześnie, otwórz plik w tej przeglądarce SVG przyciskiem Otwórz plik lub przeciągnij go na pole kodu.
Czy mój SVG jest gdzieś wysyłany?
Nie. Plik odczytuje Twoja przeglądarka i rysuje go lokalnie. Nic, co tu otworzysz lub wpiszesz, nie trafia na serwer.
Dlaczego mój SVG nic nie pokazuje w podglądzie?
Najczęstsze przyczyny to brak atrybutu xmlns="http://www.w3.org/2000/svg" w elemencie svg, viewBox wskazujący poza rysunek lub białe kształty na białym tle. Wypróbuj tło w szachownicę i sprawdź komunikat o błędzie pod podglądem.
Co usuwa krok czyszczenia?
Komentarze, deklarację XML, doctype, bloki metadanych, atrybuty specyficzne dla edytorów takich jak Inkscape, Sketch i Serif oraz puste grupy. Zaokrągla też ułamki do wybranej precyzji. Nie łączy ścieżek ani nie zmienia kształtów, więc rysunek powinien wyglądać tak samo.
Jak użyć SVG w React?
Skopiuj wynik JSX. Zamienia on atrybuty na nazwy React, na przykład stroke-width na strokeWidth i class na className, przekształca ciągi style w obiekty i przekazuje wszystkie propsy podane komponentowi do elementu svg.
Jak czytać kod SVG
Plik SVG to tekst opisujący kształty. Element svg ustala układ współrzędnych za pomocą viewBox: viewBox="0 0 24 24" oznacza, że rysunek używa siatki 24 na 24 jednostki, niezależnie od rozmiaru, w jakim jest wyświetlany. Wewnątrz elementy takie jak rect, circle i path rysują na tej siatce wypełnieniami i obrysami.
Większość ikon składa się niemal wyłącznie z elementów path. Atrybut d ścieżki to lista poleceń rysowania: M przesuwa pióro, L rysuje prostą linię, C rysuje krzywą sześcienną, A rysuje łuk, a Z zamyka kształt. Wielkie litery używają współrzędnych bezwzględnych; małe są względne wobec ostatniego punktu. Inspektor na tej stronie rozpisuje każde z nich.
Dlaczego eksportowane pliki SVG są większe, niż muszą
Narzędzia projektowe zapisują informacje, które pomagają im ponownie otworzyć plik: nazwy warstw, ustawienia edytora, pozycje prowadnic i współrzędne z sześcioma lub więcej miejscami po przecinku. Przeglądarki to wszystko ignorują. Usunięcie tych danych i zaokrąglenie liczb często wyraźnie zmniejsza rozmiar pliku, co ma znaczenie, gdy ta sama ikona pojawia się na każdej stronie.
Ta strona wykonuje ostrożne czyszczenie, które nigdy nie powinno zmienić wyglądu obrazu. Przy głębszych zmianach, takich jak łączenie ścieżek, dalej idzie narzędzie do optymalizacji SVG.
Przesuń do
Linia do
Linia pozioma
Linia pionowa
Krzywa sześcienna
Gładka sześcienna
Krzywa kwadratowa
Gładka kwadratowa
Łuk
Zamknij ścieżkę
element <script>
atrybut zdarzenia on…
link javascript:
element <foreignObject> z HTML w środku
Białe
Ciemne
Szachownica
Znaczniki nie są poprawnym XML.
Element główny nie jest <svg>.
Wklej znaczniki, które zaczynają się od <svg i kończą na </svg>.
Ten plik ma ponad 5 MB. Otwórz mniejszy SVG.
Otwarto {name}.
Podgląd się nie wczytał, więc nie ma jeszcze czego eksportować.
Zapisano PNG {w} × {h}.
Kod
Otwórz plik
Przykład
Kod SVG
{bytes} bajtów · {n} ścieżka
{bytes} bajtów · ścieżki: {n}
Ten SVG zawiera {parts}. Podgląd tutaj jest bezpieczny, ale nie wklejaj go do strony jako inline HTML bez usunięcia tego elementu.
Podgląd
Powiększenie
Podgląd Twojego SVG
Wyrenderowane przez Twoją przeglądarkę. Skrypty wewnątrz SVG nie są tu uruchamiane.
Inspektor ścieżek
Ten SVG nie zawiera elementów path.
Ścieżka {n}
Polecenia w ścieżce {n}
Polecenie
Liczby
(względne)
Wybierz ścieżkę, aby podświetlić ją w podglądzie i wyświetlić jej polecenia.