0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG do CSS
Przekonwertowałem kod SVG na gotowy URI danych jako właściwość CSS: obraz tła, mask-obraz lub zmienną CSS. Obsługuje kodowanie URL i Base64.
Format
Własność CSS
Opcje
Kod SVG
Linie:0Postacie:0

Jak to działa

Konwertuje kod SVG na Data URI gotowy do użycia w CSS, dzięki czemu możesz osadzić ikonę bezpośrednio w arkuszu stylów bez osobnego pliku ani dodatkowego żądania HTTP.

Oferuje dwa kodowania: URL-encoded (percent-encoding), krótsze i bardziej czytelne, zalecane dla SVG; oraz Base64, nieco dłuższe, ale uniwersalnie zgodne.

Wynik można wygenerować jako background-image, jako mask-image (aby pokolorować ikonę za pomocą CSS) lub jako wielokrotnego użytku zmienną CSS. Wcześniejsza minifikacja SVG jeszcze bardziej zmniejsza rozmiar.

Przykłady

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");Kodowanie URL utrzymuje SVG niemal czytelnym i zwykle jest krótsze niż Base64.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");Jako mask-image kolor ikony jest kontrolowany właściwością background-color elementu.

Przypadki użycia

  • Osadzić ikony SVG jako background-image bez dodawania żądań HTTP do strony.
  • Użyć SVG jako maski (mask-image), aby zmienić jego kolor z CSS zależnie od motywu lub stanu.
  • Zapisać ikonę w zmiennej CSS i użyć jej ponownie w kilku selektorach.
  • Zmniejszyć wagę ikon inline, minifikując SVG przed jego osadzeniem.

Najczęstsze pytania

Lepsze jest URL-encoded czy Base64?

Dla SVG URL-encoded jest zwykle najlepszą opcją: daje krótszy i bardziej czytelny Data URI, ponieważ SVG to tekst. Base64 zapewnia maksymalną zgodność, ale dodaje około 33% rozmiaru.

Dlaczego używać mask-image zamiast background-image?

Z background-image ikona zachowuje oryginalne kolory. Z mask-image SVG definiuje tylko kształt, a kolor pochodzi z CSS, idealne dla ikon monochromatycznych zmieniających się z motywem.

Co robi opcja minifikacji?

Usuwa komentarze i zwija białe znaki SVG przed jego zakodowaniem, dzięki czemu końcowy Data URI jest mniejszy bez zmiany rysunku.

Czy mój SVG jest wysyłany na serwer?

Nie. Konwersja odbywa się w całości w przeglądarce; SVG nigdy nie opuszcza Twojego komputera.

Zobacz też