Comment utiliser : SVG to CSS Converter
- Paste your SVG code, open an
.svgfile or load the sample. - Keep Clean up SVG on to strip comments, metadata and editor attributes, and choose URL-encoded or Base64.
- Check both previews — the normal background image and the single-color mask version.
- Copy the data URI or the complete CSS rule and paste it into your stylesheet.
What is an SVG data URI?
A data URI embeds a file directly in your CSS instead of linking to it: background-image: url("data:image/svg+xml,…"). For small icons, dividers, patterns and custom checkboxes this saves an HTTP request, avoids a flash of missing images and keeps the asset next to the styles that use it.
URL-encoding vs Base64
SVG is text, so it doesn’t need Base64. Base64 inflates any file by about 33% and turns it into an unreadable blob that compresses poorly with gzip or Brotli. A URL-encoded SVG stays close to its original size and readable. Only a few characters must be escaped:
| Character | Encoded | Why |
|---|---|---|
# | %23 | Otherwise starts a URL fragment — colors like #fff break the image. |
% | %25 | The escape character itself. |
< > | %3C %3E | Recommended for compatibility with strict parsers. |
" | ' or %22 | Attribute quotes are switched to single quotes so the CSS can wrap the URI in double quotes. |
Use Base64 only when a tool or framework rejects anything else. The size cards under the preview show both results so you can compare.
Recolorable icons with mask-image
An SVG used as a background image is rendered in isolation: CSS on the page can’t change its fills, and currentColor inside it won’t follow your text color. The mask-image snippet solves this by using the SVG only as a stencil and painting it with background-color: currentColor, so one icon works in any color, hover state or dark mode. The -webkit-mask line is still needed for some browsers.
Cleanup and limits
Cleanup removes the XML declaration, comments, <metadata>, <title> (meaningless in a background), Inkscape/Sodipodi/Sketch attributes and extra whitespace, and adds the required xmlns if it’s missing — without it the browser won’t render the image. Embed only small SVGs (a few KB): large data URIs bloat every CSS download and can’t be cached separately. For complex graphics, link the file instead. Need a React component rather than CSS? Use SVG to JSX; for raster images, see Image to Base64.
Using it in Webflow
Webflow’s Backgrounds panel expects an uploaded image, so paste the generated rule into a <style> tag in an Embed element or in the page/site custom code, and give your element the matching class (e.g. icon).
Aussi recherché comme : svg to css, svg data uri, svg to data url, url encode svg, svg background image, svg to base64, mask-image, inline svg css.
Outils complémentaires : SVG to CSS Converter
- URL Encode / Decode — Percent-encode text for safe use in URLs, decode encoded strings back to readable text, and break any URL down into its parts and query parameters.
- Encodage / Décodage Base64 — Convertissez du texte au format Base64 et inversement, avec une prise en charge complète de l'UTF-8 (accents, emojis) ; passez au format Base64 compatible URL, ou glissez-déposez un fichier pour obtenir sa chaîne Base64 ou son URI de données.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Questions fréquentes
Why isn’t my SVG data URI showing up?
# (in colors like #fff), a missing xmlns="http://www.w3.org/2000/svg" attribute, or unbalanced quotes between the CSS url("…") and the SVG attributes. This tool fixes all three.Is URL-encoding or Base64 better for SVG in CSS?
Can I change the color of an SVG background image with CSS?
mask-image snippet and set background-color, which you can change on hover or in dark mode.Do I need to include charset=utf-8 in the data URI?
data:image/svg+xml, is enough.