jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

Afbeelding-, SVG- en assettools

Gratis SVG naar CSS Data URI Converter

Converteer SVG-markup naar CSS-data-URI. URL-gecodeerde en Base64-opties met live voorvertoning.

Tool laden...

Wat is SVG naar CSS Data URI Converter?

Transformeert ruwe SVG-markup naar data-URI-s voor CSS en HTML. Ondersteunt URL-codering en Base64-codering.

Snel antwoord

Krijg CSS-compatibele data-URI-s vanuit SVG. URL-gecodeerd of Base64. background-image, mask, img src.

Last updated: 2026-06-09

Beperkingen

  • Data-URI-s boven 4KB afgeraden.
  • Geen SVG-syntaxvalidatie.
  • Browserafhankelijk gedrag voor mask-image.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Plak uw SVG-markup.
  2. Kies codering: URL (aanbevolen) of Base64.
  3. Selecteer het uitvoerformaat.
  4. Kopieer de code naar uw CSS of HTML.

Waarvoor je het kunt gebruiken

  • SVG-iconen direct in CSS background-image insluiten.
  • SVG-data-URI-s gebruiken in CSS mask-image.
  • Kleine SVG-s insluiten in e-mails.

Gebruik

Praktische voorbeelden

Voorbeeld

CSS-sprite-vrije iconen

10 SVG-iconen geconverteerd naar data-URI-s en ingesloten in de stylesheet.

Voorbeeld

Zelfstandige e-mailhandtekening

Logo-SVG geconverteerd naar Base64 data-URI voor e-mailhandtekening.

Veelgemaakte fouten

  • Base64 onnodig gebruiken. URL-codering is compacter.
  • Vergeten witruimte te verwijderen voor coderen.
  • Data-URI-s voor grote SVG-s (meer dan 2-4KB).

Verificatie

  1. Converteer een SVG-cirkel met URL-codering en controleer de weergave.
  2. Vergelijk met de Base64-weergave.

FAQ

Vragen over SVG naar CSS Data URI Converter

Welke codering is beter?

URL-codering, ongeveer 10-20% kleiner dan Base64.

Werkt het in alle browsers?

Ja, in alle moderne browsers (Chrome, Firefox, Safari, Edge).

In inline style-attributen?

Ja, let op aanhalingstekens.

Maximale grootte?

Houd het onder 2KB voor prestaties.

Gerelateerde tools

Meer afbeelding-, svg- en assettools

Probeer ook

Probeer ook

CSS- en ontwerptools

CSS-carrouselgenerator

Genereer native CSS-carrouselmarkup met scroll-snap, scrollknoppen, scrollmarkeringen en een toegankelijke lijststructuur. Geen JavaScript nodig.

Open tool

CSS- en ontwerptools

CSS Scroll-State-querygenerator

Genereer CSS scroll-state()-containerqueries om gesnapte, vastgezette of scrollbare elementen te stylen. Inclusief JavaScript-fallback voor ondersteuning in andere browsers.

Open tool