Softonic

Konwerter SVG na CSS

Krok 1 / 2
Dalej

Wklej dowolny fragment <svg> i otrzymaj deklarację background-image, która osadza SVG jako identyfikator data URI. Dzięki temu unikasz dodatkowego żądania HTTP, zachowujesz kontrolę nad ikoną lub wzorem w swoim CSS i przetrwasz przepisania po stronie CDN. Kodowanie idzie ścieżką rawurlencode zamiast base64, co daje mniejszy rozmiar dla SVG bogatych w tekst i łatwiejszy odczyt, gdy później musisz debugować.

Jak zamienić SVG na tło CSS

  1. 1

    Wklej SVG

    Wprowadź pełny kod `<svg>...</svg>`, wraz z atrybutem xmlns, jeśli Twój SVG go zawiera.

  2. 2

    Kliknij konwertuj

    Narzędzie koduje SVG w formacie URL i opakowuje go w identyfikator `data:image/svg+xml,...`.

  3. 3

    Skopiuj CSS

    Otrzymujesz trzy wiersze CSS: `background-image`, `background-repeat` i `background-size`, gotowe do wklejenia.

  4. 4

    Dostosuj w razie potrzeby

    Zmień `background-size` na `cover`, `100px 100px` lub własną wartość, zależnie od tego, czy to ikona, czy wzór.

Dlaczego rawurlencode zamiast base64

Base64 powiększa SVG o mniej więcej 33 %. Ponieważ SVG to zwykły tekst, kodowanie URL pozostawia większość bajtów nietkniętych i escapuje tylko znaki, które mają znaczenie wewnątrz identyfikatora URI: <, >, #, spacje i kilka innych. Zwykle daje to ciąg o 20-40 % krótszy niż odpowiednik w base64, a mimo to poprawnie parsowany w każdej nowoczesnej przeglądarce.

Kiedy osadzić SVG, a kiedy podlinkować plik

Sytuacja Osadź jako data URI Zewnętrzny plik .svg
Mała ikona użyta raz na stronę Dobry wybór W porządku
Wzór poniżej 2 KB używany w całej witrynie Dobry wybór Też dobrze, w pamięci podręcznej
Zestaw ponad 30 ikon Unikaj Użyj sprite’a
SVG do animacji lub stylowania z JS Unikaj Osadź w HTML
HTML wiadomości e-mail Osadź lub pomiń Zewnętrzne bywa blokowane

Częste pułapki

  • # wewnątrz fill="#..." musi zostać zescapowane. Koder robi to za Ciebie.
  • Nie dołączaj prologu <?xml ...?>; usuń go przed wklejeniem.
  • Cudzysłowy wewnątrz SVG muszą pasować do zewnętrznych cudzysłowów ciągu CSS. Wygenerowana reguła używa na zewnątrz cudzysłowów podwójnych, więc pojedyncze cudzysłowy wewnątrz SVG są najbezpieczniejsze.
  • Jeśli SVG zawiera bloki <script>, przeglądarki odmówią ich wykonania wewnątrz background-image; to zachowanie oczekiwane i zamierzone.

Najczęściej zadawane pytania

W każdej przeglądarce obsługującej identyfikatory data: oraz SVG, czyli w każdej większej przeglądarce z ostatniej dekady. IE 11 też to obsługuje, choć tam data URL musi być w base64.

Ustaw background-size jawnie. Bez tego przeglądarka wraca do wewnętrznego viewBox SVG, który może nie pasować do Twojego elementu.

Nie w tej postaci: zmienne CSS są obliczane poza identyfikatorem data URI. Zakoduj kolor na stałe albo użyj techniki maskowania z mask-image i background-color.

Zgrubna zasada: poniżej 4 KB jest dobrze, 4-10 KB warto zmierzyć, powyżej 10 KB niemal zawsze lepiej wypada plik zewnętrzny, który da się buforować.

Wklejony kod jest wysyłany na nasz serwer, aby zakodować go w formacie URL i zwrócić jako regułę CSS. Jest przetwarzany wyłącznie w celu zbudowania tej reguły i nie jest przechowywany ani udostępniany.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Podgląd Markdown

Pisz w Markdown i obserwuj, jak wyrenderowany HTML aktualizuje się na żywo. Składnia w stylu GitHub z tabelami, listami zadań, ogrodzonymi blokami kodu i automatycznymi odnośnikami.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Formater JavaScript

Formatuj JavaScript, JSX, TypeScript i JSON z konfigurowalnym wcięciem, stylem cudzysłowów, średnikami i przecinkami końcowymi.

Narzędzie odstępów w kodzie Python

Ujednolić wcięcia oraz proste odstępy przy przecinkach i operatorach. To lekka obróbka tekstu, a nie Black, Ruff ani parser Pythona.

Narzędzie jest dostępne w innych językach