LocalToolsColección de herramientas offline para el navegador

Categoría: Desarrollo

SVG a fondo CSS

Idea propia¿Falta una herramienta?

Convierte marcado SVG en línea en un data URI para background-image

Pega marcado SVG y obtén un data URI para background-image de CSS, además de las líneas de background-repeat, background-size y background-position, con una vista previa en vivo para revisarlo antes de copiarlo.

Salida
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

El SVG nunca sale del navegador; se codifica directamente en el valor CSS.

Todo lo de esta página se procesa en tu navegador. No se sube nada.

Para qué sirve

Un icono o patrón SVG pequeño suele pesar menos como data URI en línea en el CSS que como una petición de imagen aparte, pero codificar el marcado a mano para que sobreviva dentro de un valor url(...) es propenso a errores: las comillas, los ángulos y los saltos de línea necesitan un escapado cuidadoso. Esta herramienta hace esa codificación por ti, manteniendo el resultado corto y legible en lugar de recurrir a base64, y muestra una vista previa en vivo del fondo con la repetición y el tamaño que elijas.

Cómo se usa

  1. Pega el marcado SVG que quieras usar como fondo.
  2. Elige cómo debe repetirse y escalar.
  3. Copia la declaración CSS y pégala en tu hoja de estilos.

Privacidad

Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.

Preguntas frecuentes

¿Es lo mismo que codificar el SVG en base64?
No. Solo escapa el puñado de caracteres que de otro modo romperían un valor CSS, lo que mantiene el data URI notablemente más corto y aún legible, a diferencia de un bloque en base64.
¿Se sube el SVG a algún sitio?
No. La codificación ocurre mediante sustitución de texto simple en la pestaña de tu navegador; el marcado que pegas nunca sale de la página.
¿Puedo usar currentColor o variables CSS dentro del SVG?
currentColor funciona porque el navegador lo resuelve en el momento de pintar, pero las propiedades personalizadas CSS referenciadas dentro de los propios atributos del SVG no, ya que un data URI para background-image es marcado estático, no una hoja de estilos viva.

Volver a todas las herramientas