SVGView

Tło SVG do CSS

Zamień pliki SVG w tła gotowe do obsługi CSS dla przycisków, odznak i wzorów interfejsu użytkownika. Kopiuj i wklejaj natychmiast. Otwieraj pliki SVG online i natychmiast je konwertuj.

Przeciągnij i upuść plik SVG

lub kliknij, aby przeglądać, lub wklej kod SVG

Akceptuje tylko pliki .svg
Wklej kod SVG za pomocą Ctrl+V / Cmd+V

Dlaczego warto korzystać z naszego narzędzia tła SVG do CSS?

Fragmenty obrazu tła

SVG do CSS w tle natychmiast generuje adresy URL obrazów tła z plików SVG. Oszczędza to czas, gdy potrzebujesz CSS wielokrotnego użytku do ikon, wzorów lub dekoracji interfejsu użytkownika. Utrzymuje także zasoby blisko stylów, które je kontrolują.

Wyjście w stylu wbudowanym

Tło SVG do CSS zapewnia wbudowane fragmenty stylu dla szybkich prototypów i bloków CMS. Wklej dane wyjściowe bezpośrednio do kodu HTML lub JSX i zachowaj lekkość układów. Jest to przydatne, gdy nie można dodać nowych plików ani skonfigurować kroku kompilacji.

Kolory przyjazne tematowi

Tło SVG do CSS współpracuje z bieżącym kolorem, więc pliki SVG dziedziczą kolor CSS. Dzięki temu wyjście tła SVG do CSS jest kompatybilne z jasnymi i ciemnymi motywami. Użyj zmiennych CSS, aby przypisać kolory do tokenów projektu.

Kopiuj gotowy

Tło SVG do CSS obsługuje kodowanie, dzięki czemu można skopiować adres URL bez ręcznej zmiany znaczenia. Zapobiega to błędom związanym ze znakami takimi jak #,% lub cudzysłowami w CSS. Pozwala także uniknąć błędów, gdy pliki SVG zawierają gradienty lub identyfikatory.

Szybkie przetwarzanie lokalne

SVG do CSS w tle działa lokalnie i zapewnia natychmiastowe wyniki. Zapewnia to prywatność zasobów i pozwala uniknąć opóźnień w przesyłaniu w trakcie programowania. Przetwarzanie lokalne jest szybsze w przypadku iteracji wielu wariantów projektu.

Najpierw prywatność

Narzędzie przechowuje pliki w przeglądarce, więc nic nie jest przesyłane. Dzięki temu jest bezpieczny dla pracy klienta i wewnętrznych systemów projektowych. Działa również dobrze w zablokowanych sieciach.

Jak przekonwertować SVG na tło CSS

1

Prześlij swój plik SVG

Aby rozpocząć, przeciągnij i upuść plik lub wklej znaczniki. Tło SVG do CSS ładuje źródło lokalnie i przygotowuje je do kodowania. Możesz wkleić surowy eksport bezpośrednio z narzędzi projektowych. Otwieraj pliki SVG online i konwertuj je od razu.

2

Wygeneruj fragment kodu CSS

Uruchom SVG w tle CSS, aby utworzyć URI danych gotowy do CSS. Wybierz kodowanie Base64 lub URL w oparciu o rozmiar pliku i czytelność. Kodowanie adresu URL jest często krótsze w przypadku ikon z prostymi ścieżkami.

3

Wklej do CSS

Wklej fragment do obrazu tła: url (...). Dane wyjściowe tła SVG do CSS działają również w stylach wbudowanych i zmiennych CSS. Możesz przypisać go do niestandardowej właściwości CSS w celu ponownego wykorzystania w komponentach.

Często zadawane pytania dotyczące tła SVG do CSS

Jak używać SVG jako tła CSS online?
Użyj tła SVG do CSS, aby przekonwertować plik na adres URL data:image/svg+xml, a następnie wklej go do obrazu tła: url(...). Dzięki temu zasoby pozostają w jednym miejscu i unika się dodatkowych żądań sieciowych. Jest to przydatne w przypadku małych ikon lub wzorców, które korzystają z pakietu z CSS.
SVG do CSS: dane wyjściowe zakodowane w formacie Base64 lub URL?
Tło SVG do CSS obsługuje oba. Base64 jest szeroko kompatybilny, natomiast kodowanie URL jest krótsze w przypadku prostych plików SVG i łatwiejsze do odczytania w kontroli źródła. Jeśli będziesz musiał później ręcznie edytować plik SVG, łatwiej będzie sprawdzić kodowanie adresu URL.
Czy muszę uciekać od znaków specjalnych w przypadku SVG CSS?
Nie. Tło SVG do CSS obsługuje kodowanie znaków takich jak #,% i cudzysłowów. Zapobiega to nieprawidłowemu CSS i oszczędza czas podczas kopiowania i wklejania. Pozwala także uniknąć uszkodzonych adresów URL, gdy pliki SVG zawierają identyfikatory lub ścieżki klipów.
Czy mogę używać currentColor w CSS?
Tak. SVG do tła CSS współpracuje z currentColor, więc SVG dziedziczy kolor CSS z elementu nadrzędnego. Jest to przydatne w przypadku tokenów tematycznych i projektowych. Można go także połączyć ze zmiennymi CSS, aby uzyskać elastyczne palety.
Czy mój plik SVG został przesłany na serwer?
Nie. SVG do CSS w tle działa lokalnie w Twojej przeglądarce, więc pliki nigdy nie opuszczają Twojego urządzenia. Jest to bezpieczne dla majątku prywatnego i pracy klientów. Przetwarzanie lokalne pozwala również uniknąć ograniczeń rozmiaru plików narzuconych przez narzędzia do przesyłania.
Czy istnieje limit rozmiaru pliku?
Możesz przetwarzać pliki SVG o rozmiarze do 10MB. Duże pliki SVG tworzą długie ciągi CSS, więc rozważ najpierw optymalizację, aby arkusze stylów były czytelne. W przypadku skomplikowanych ilustracji rozważ użycie zwykłego pliku zamiast identyfikatora URI danych.
Czy powinienem dokonać optymalizacji przed konwersją?
Tak. Tło SVG do CSS najlepiej sprawdza się w przypadku zoptymalizowanych plików, ponieważ mniejsze pliki SVG tworzą krótszy CSS. Najpierw przeprowadź czyszczenie lub optymalizację, a następnie przekonwertuj. Dzięki temu Twój CSS będzie zwarty i poprawi zachowanie pamięci podręcznej.
Czy mogę użyć danych wyjściowych w zmiennych CSS?
Tak. Dane wyjściowe tła SVG do CSS można przechowywać w zmiennych CSS i ponownie wykorzystywać w różnych motywach. Ułatwia to wymianę tła bez edytowania wielu reguł. Używaj opisowych nazw zmiennych, aby zapewnić łatwość konserwacji arkuszy stylów.
Czy korzystanie z formatu SVG do CSS jest bezpłatne i nie wymaga pobierania?
Tak. SVG do CSS można używać bezpłatnie w przeglądarce. Nie są wymagane żadne pliki do pobrania ani instalacja.
Czy potrzebuję konta, aby używać SVG do CSS?
Nie. SVG do CSS działa natychmiast w przeglądarce bez rejestracji, a pliki pozostają lokalne.

Powiązane narzędzia SVG

Użyj tych narzędzi w tle SVG do CSS, aby zoptymalizować, zmienić kolor lub zminimalizować zasoby przed osadzeniem. Czyste źródło daje krótsze i bardziej niezawodne ciągi CSS.

SVG do URI danych

Generuj identyfikatory URI danych SVG zakodowanych w formacie Base64 lub URL wraz z danymi wyjściowymi SVG do CSS w tle. Jest to przydatne, gdy chcesz porównać długości kodowania.

Otwórz narzędzie

Optymalizator SVG

Kompresuj pliki SVG przed SVG do tła CSS, aby zmniejszyć długość ciągu CSS. Mniejsze ciągi są łatwiejsze do utrzymania w kontroli źródła.

Otwórz narzędzie

Zamiennik koloru SVG

Użyj bieżących tokenów kolorów i motywów przed konwersją tła SVG na CSS. Dzięki temu zasoby tła są zgodne z Twoim systemem projektowym.

Otwórz narzędzie

Minimalizator SVG

Zredukuj białe znaki, aby dane wyjściowe w formacie SVG do CSS pozostały zwarte w arkuszach stylów. Ciągi kompaktowe są łatwiejsze do wstawiania i kopiowania.

Otwórz narzędzie

Powiązany blog SVG

Czytaj dalej praktyczne materiały o przepływach SVG, rozwiązywaniu problemów i produkcji.