Código SVG
<svg>X</svg>
CSS
url(data:image/svg...)
Herramientas de diseño
SVG a fondo CSS — Data URL / Base64
Incrustra SVG en una cadena CSS background-image: url(...) mediante codificación URI o Base64. Útil para iconos pequeños que quieres conservar en el CSS en lugar de en archivos de recursos separados.
DiseñoCSSSVGInterfaz web
Cambio rápido:Calculadora de Relación de Aspecto
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
SVG a fondo CSS
1. Raw SVG Code
3. Live Render Background Preview
-
等待输入 SVG。
Casos de uso
- Incrustar un icono pequeño de Figma en el CSS del componente sin un archivo de recurso aparte
Cómo usar
- Pega el marcado SVG completo a la izquierda; revisa la salida de una línea escapada y la vista previa en vivo a la derecha
Entrada y salida de ejemplo
FAQ
¿Es mejor la codificación Base64 o URI?
La codificación URI (sin Base64) suele ser más pequeña tras el escapado y sigue siendo más legible en DevTools.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Calculadora de Relación de Aspecto
Calculadora de Relación de Aspecto y Tamaño Proporcional
Calcula y bloquea una relación de aspecto en tu navegador. Deriva una relación a partir del ancho y alto, o cambia un lado mientras el otro permanece proporcional. Incluye preajustes comunes y una previsualización para recortes, fotogramas de vídeo y diseños responsivos.
Relación Tamaño Diseño