AkousaSVG naar Data URI
Converteer SVG-opmaak naar een geoptimaliseerde data URI voor insluiting.
Over SVG naar gegevens-URI
SVG naar Data URI converteert SVG-opmaak naar een geoptimaliseerde data-URI-tekenreeks die rechtstreeks kan worden ingesloten in HTML img src-attributen, CSS-achtergrondafbeeldingseigenschappen of JavaScript-variabelen zonder dat een afzonderlijk HTTP-verzoek voor het SVG-bestand nodig is. Een gegevens-URI codeert de bron inline in het document met behulp van URL-codering of Base64, waardoor een netwerkrondleiding wordt geëlimineerd en de implementatie van SVG-pictogrammen, logo's en decoratieve afbeeldingen in webapplicaties wordt vereenvoudigd. URL-gecodeerde gegevens-URI's hebben over het algemeen de voorkeur boven Base64 voor SVG's, omdat ze compacter zijn en gedeeltelijk leesbaar blijven in browserontwikkelaarstools. De tool verkleint optioneel de SVG-opmaak vóór het coderen om de uiteindelijke gegevens-URI-grootte te verkleinen.
Hoe te gebruiken
Plak uw SVG-code in het invoergebied en de gegevens-URI wordt onmiddellijk in het uitvoerpaneel gegenereerd. Kies tussen URL-codering en Base64-codering met behulp van de indelingsschakelaar: URL-codering produceert kleinere uitvoer voor de meeste SVG's, terwijl Base64 veiliger is voor SVG-inhoud die ongebruikelijke tekens bevat die het parseren van HTML-kenmerken kunnen verstoren. Kopieer de volledige gegevens-URI-tekenreeks en plak deze in een CSS-achtergrondafbeelding url()-waarde, een HTML img src-kenmerk of een JavaScript-constante. Er wordt een live voorbeeld van de gerenderde SVG weergegeven, zodat u de visuele correctheid kunt verifiëren voordat u de uitvoer kopieert.
Veelvoorkomende gebruiksscenario's
- SVG-pictogrammen insluiten als URI's van CSS-achtergrondafbeeldingsgegevens in componentstylesheets om extra HTTP-verzoeken voor kleine vectorelementen te elimineren
- Bedrijfslogo's en marketingillustraties invoegen als gegevens-URI's in HTML-e-mailsjablonen waarbij het laden van externe afbeeldingen wordt geblokkeerd door e-mailclients
- SVG-favicons, app-pictogrammen en cursors converteren naar gegevens-URI's voor inline insluiting in HTML-documenten met één bestand en browserextensies
- Kritieke SVG-inhoud boven de vouw inline als gegevens-URI's om netwerkverzoeken voor het aanvankelijk laden van pagina's te elimineren
- SVG-maskerafbeeldingen, -patronen en -filters toewijzen als gegevens-URI's in CSS voor op zichzelf staande, draagbare componentstylesheets