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 naar CSS
Ik heb SVG-code omgezet naar een kant-en-klaar data-URI als een CSS-eigenschap: achtergrondafbeelding, masker-afbeelding of CSS-variabele. Ondersteunt URL- en Base64-codering.
Format
CSS-eigenschap
Opties
SVG-code
Regels:0Karakters:0

Hoe het werkt

Het zet de code van een SVG om in een Data-URI die klaar is voor gebruik in CSS, zodat je het pictogram rechtstreeks in de stylesheet kunt insluiten zonder apart bestand of extra HTTP-verzoek.

Het biedt twee coderingen: URL-encoded (percent-encoding), korter en leesbaarder, aanbevolen voor SVG; en Base64, iets langer maar universeel compatibel.

Het resultaat kan worden gegenereerd als background-image, als mask-image (om het pictogram met CSS te kleuren) of als herbruikbare CSS-variabele. Het SVG vooraf minificeren verkleint de grootte nog meer.

Voorbeelden

<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");URL-codering houdt het SVG bijna leesbaar en is meestal korter dan Base64.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");Als mask-image wordt de kleur van het pictogram bepaald met de eigenschap background-color van het element.

Gebruiksscenario's

  • SVG-pictogrammen als background-image insluiten zonder HTTP-verzoeken aan de pagina toe te voegen.
  • Een SVG als masker (mask-image) gebruiken om het vanuit CSS opnieuw te kleuren op basis van het thema of de status.
  • Een pictogram in een CSS-variabele opslaan en het over meerdere selectors hergebruiken.
  • Het gewicht van inline pictogrammen verminderen door het SVG te minificeren voordat je het insluit.

Veelgestelde vragen

Is URL-encoded of Base64 beter?

Voor SVG is URL-encoded meestal de beste optie: het levert een kortere en leesbaardere Data-URI op omdat SVG tekst is. Base64 geeft maximale compatibiliteit, maar voegt ongeveer 33% aan grootte toe.

Waarom mask-image gebruiken in plaats van background-image?

Met background-image behoudt het pictogram zijn originele kleuren. Met mask-image definieert het SVG alleen de vorm en levert CSS de kleur, ideaal voor monochrome pictogrammen die met het thema veranderen.

Wat doet de minificatie-optie?

Het verwijdert commentaar en comprimeert de witruimte van het SVG voordat het wordt gecodeerd, zodat de uiteindelijke Data-URI kleiner is zonder de tekening te wijzigen.

Wordt mijn SVG naar een server geüpload?

Nee. De conversie gebeurt volledig in je browser; het SVG verlaat nooit je computer.

Zie ook