SVG zu CSS Background-Image Handbuch & Best Practices
Optimieren, encodieren und konvertieren Sie SVG-Code in saubere CSS background-image, mask-image und Data-URI-Eigenschaften direkt im Browser.
Raw SVG Vector Code
Live-Vorschau277B → 376B
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236366f1'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20%3Cpolygon%20points='12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202'/%3E%20%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;UTF-8 Percent Encoding
Produces ~30% smaller CSS payloads than Base64 by only escaping critical characters (# to %23, etc.) while maximizing Gzip compression.
Dynamic Mask Coloring
Generate CSS mask-image syntax to colorize monochrome vector icons dynamically with background-color or hover states.
Zero Server Ingestion
Transform proprietary SVG vectors, brand assets, and custom illustrations directly in your browser without cloud uploads.