Naar hoofdinhoud springen

SVG naar data-URI

Converteer SVG naar een gegevens-URI voor CSS of HTML

Maak een URL-gecodeerde of Base64 SVG-data-URI en kant-en-klare code voor CSS background-image, CSS mask-image en HTML img. Optimaliseer de opmaak, controleer het voorbeeld en kopieer de gewenste indeling zonder de SVG te uploaden.

Sleep bestanden hierheen

Standaardwaarden voor nieuwe bestanden bewerken

Codering

URL-codering escapet alleen de tekens die een URL niet kan bevatten, dus voor bestanden op pictogramformaat valt het meestal 20-30% kleiner uit dan Base64 en blijft de markup leesbaar. Kies Base64 wanneer een buildstap of CMS procenttekens herschrijft.

Codeert ook spaties, apostroffen en haakjes, zodat de URI veilig is binnen een url(...) zonder aanhalingstekens en binnen Sass- of Less-strings. Kost een paar bytes. Base64 heeft er niets van nodig.

Optimalisatie

Past de veilige optimalisatievoorinstelling toe voordat de uitvoer wordt gegenereerd.

Vormgeving

Vervangt vullingen en lijnen zodat het pictogram de omliggende tekstkleur overneemt. Alleen zinvol voor werk in een enkele kleur: een SVG met meerdere kleuren wordt platgeslagen tot een kleur.

Geen voorbeeld. Voeg bestanden toe en selecteer ze om resultaten te zien.

Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.

Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.

Wat is SVG?

SVG (Scalable Vector Graphics) is een op XML gebaseerd vectorafbeeldingsformaat. In plaats van pixels beschrijft een SVG vormen, paden, vullingen en lijnen wiskundig, zodat het op elke grootte zonder kwaliteitsverlies kan worden weergegeven.

SVG is het standaard vectorformaat voor het web. Elke moderne browser ondersteunt het rechtstreeks; u kunt het vormgeven met CSS of animeren met JavaScript of SMIL. Voor logo’s, pictogrammen en illustraties is het vaak compact, maar complexe SVG-bestanden kunnen groot worden.

Wanneer een SVG inline zetten als data-URI

Een gegevens-URI plaatst de hele SVG in de stylesheet of de markup, zodat de browser geen tweede verzoek nodig heeft om deze te tekenen. Dat loont de moeite voor kleine, decoratieve kunstwerken: kogels, pijlen, punthaken, selectievakjes of een markering in een voettekst. URL-codering is meestal compacter voor SVG-tekst, terwijl Base64 handig kan zijn wanneer een ander hulpmiddel dit verwacht. Een CSS-masker behandelt de SVG als een stencil voor de eigen achtergrondkleur van het element, zodat één monochroom pictogram opnieuw kan worden gekleurd per staat, per thema of per component met een enkele CSS-declaratie.

Een SVG online omzetten naar een data-URI

  1. 1

    Sleep je SVG-bestanden erin, of klik op BESTANDEN SELECTEREN, om ze aan de wachtrij toe te voegen. Tot 40 tegelijk.

  2. 2

    Kies URL-gecodeerd of Base64 en beslis of je de markup eerst wilt optimaliseren. Alle vijf de resultaten, met hun grootte in bytes, werken zich bij zodra je de opties wijzigt.

  3. 3

    Kopieer het fragment dat je nodig hebt, of klik op ALLES OPSLAAN om per SVG een .css-bestand te downloaden met daarin de background- en mask-regels.

Privacy: je bestanden verlaten je browser niet

De conversie wordt lokaal in uw browser uitgevoerd met behulp van JavaScript en WebAssembly. Er vindt geen bestandsupload of serverconversie plaats, dus de bestanden die u toevoegt, blijven op uw apparaat staan.

Lokale verwerking helpt vertrouwelijke logo's, interne documenten en niet-vrijgegeven illustraties van klanten te beschermen. Pagina's en conversiecode worden in de cache opgeslagen terwijl u ze gebruikt, zodat tools die u al hebt geopend, kunnen blijven werken zonder een netwerkverbinding.

Veelgestelde vragen

Is een URL-gecodeerde data-URI kleiner dan Base64?

Meestal. Base64 voegt coderingsoverhead toe aan de onbewerkte bytes, terwijl URL-codering alleen de tekens uitbreidt die moeten worden geëscaped. Het exacte verschil hangt af van de SVG-opmaak, dus de tool toont beide formaten en laat je ze vergelijken voor het bestand dat voor je ligt.

Hoe herkleurt de CSS-mask-regel een pictogram?

mask-image gebruikt de SVG als sjabloon: het element tekent zijn eigen background-color, en het masker bepaalt welke pixels overblijven. Omdat de kleur uit CSS komt, kan een enkele data-URI elke kleur aannemen, en is een variant voor hover of donkere modus niet meer dan een andere background-color. Het werkt alleen voor werk in een enkele kleur, want een masker houdt het alfakanaal aan en gooit de eigen kleuren van de SVG weg. Safari heeft nog steeds de prefix -webkit-mask-image nodig, en die zit in de gegenereerde regel.

Wanneer kan ik een SVG beter niet inline zetten als data-URI?

Wanneer het bestand groot is of gedeeld is. Een gegevens-URI wordt gekopieerd naar elke stylesheet of pagina die deze gebruikt, zodat deze niet op zichzelf in de cache kan worden opgeslagen en opnieuw wordt gedownload wanneer dat bestand verandert. Voor grotere illustraties of middelen die op veel pagina's worden hergebruikt, is een afzonderlijk .svg-bestand met eigen cacheheaders vaak de betere keuze. Een gegevens-URI kan ook niet van buitenaf worden opgemaakt. Daarom is de gegenereerde maskerregel handig voor monochrome pictogrammen.