SVG a data URI para CSS
SVG to CSS Data URI
Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.
Convierte un SVG en un data URI que puedes pegar en una hoja de estilos, codificado como URL y no en Base64 porque es a la vez más pequeño y sigue siendo legible. Muestra los tres tamaños lado a lado, dibuja el URI codificado para que veas que funciona, y avisa del puñado de cosas que hacen que un SVG se dibuje como nada en absoluto cuando se convierte en data URI.
Suelta un SVG
O edita el marcado de abajo.
SVG
Vista previa
Se dibuja desde el propio URI codificado, así que si aparece aquí aparecerá en tu hoja de estilos.
Tamaño
SVG en crudo
165 B
Codificado en URL
198 B
Base64
246 B
Aquí la codificación en URL es un 19,5 % más pequeña que Base64.
Base64 cuesta un 33⅓% fijo con cualquier entrada. Un SVG es texto, y dentro de un url() de CSS solo hay que escapar un puñado de sus caracteres, así que la codificación en URL se queda normalmente en torno a un 10 % por encima del archivo crudo. Además se puede leer, buscar con grep y comparar en un diff dentro de la hoja de estilos, cosa que con Base64 no pasa.
Resultado
Solo se escapan %, <, >, # y unos pocos caracteres de corchete, y las comillas dobles del SVG pasan a simples para que la cadena CSS pueda usar comillas dobles sin problema. El que más importa es #: sin escapar dentro de fill="#fff" abre un identificador de fragmento y trunca la URL, lo que se dibuja como nada en absoluto y sin ningún error por ninguna parte.
¿Necesitas un ráster? El conversor de SVG a PNG renderiza a PNG a cualquier escala. ¿Quieres el SVG más pequeño antes de codificarlo? El optimizador de SVG reescribe los datos de las rutas.
Cómo se usa
Pega o suelta el SVG
La caja de código es editable, así que puedes arreglar el marcado aquí en lugar de volver al archivo. El ejemplo es un icono con trazo, que es el caso común.
Lee los avisos antes que nada
Un `xmlns` ausente es el que atrapa a todo el mundo: en línea en HTML no importa, pero un data URI se analiza como un documento XML independiente y sin él el navegador no dibuja nada y no informa de nada. Los demás avisos cubren imágenes externas, scripts y tamaños en porcentaje sin viewBox.
Comprueba la vista previa
Se dibuja desde el propio URI codificado, no desde el código, así que si el icono aparece en esa caja aparecerá en tu hoja de estilos. Una caja vacía significa que el URI está roto, y los avisos de arriba suelen decir por qué.
Elige la propiedad y copia
La declaración cambia con la propiedad: `background-image`, `mask-image`, `content` o un `src` a secas. Base64 está disponible para el raro consumidor que no acepta un URI con codificación de porcentaje, y siempre es más grande.
Preguntas frecuentes
¿Por qué no Base64? Todo el mundo usa Base64.
Base64 cuesta un 33⅓% fijo sobre cualquier entrada, porque convierte tres bytes en cuatro. Un SVG es texto, y solo `%`, `<`, `>`, `#` y un par de corchetes necesitan escaparse de verdad dentro de un `url()` de CSS, así que la codificación de URL suele quedar en torno a un 10 % por encima del archivo en bruto. Además sigue siendo buscable y comparable en la hoja de estilos. El panel imprime los dos números para tu archivo.
Mi icono desapareció y no hay ningún error en ninguna parte.
Casi siempre es un `#` sin escapar. En `fill="#fff"` la almohadilla empieza un identificador de fragmento, así que la URL se trunca en ese punto y el navegador descarga algo que no es un SVG, en silencio. Este codificador lo escapa. Si escribiste el URI a mano, eso es lo primero que hay que comprobar.
¿Puedo animar o ejecutar scripts en el SVG del data URI?
Como fondo CSS, no. Un SVG cargado así corre en un modo restringido y estático: sin scripts, sin `foreignObject`, sin recursos externos, y el CSS de la página exterior no puede llegar a su interior. La animación declarativa SMIL a veces corre y a veces no, según el motor. Si necesitas algo de eso, pon el SVG en línea en el documento.
¿Cuándo es un data URI la elección equivocada?
Cuando el SVG es grande o se usa en más de un par de sitios. Un data URI no se puede cachear por separado, así que cada página que envía la hoja de estilos envía el icono otra vez, y una ilustración de 30KB incrustada en CSS son 30KB en la ruta crítica. Los iconos pequeños y los patrones son para lo que sirve esto; cualquier cosa mayor va mejor como archivo, o como sprite.
Puede recibir de
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Imagen a Base64 o data URI
Image to Base64 / Data URI
Codifica una imagen como cadena Base64 o como data URI listo para pegar en CSS, HTML o JSON.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Editor y explicador de SVG
SVG Editor and Explainer
Edita un SVG junto a su render en vivo y explica el archivo: viewBox y escalado, transformaciones, cada comando de trazado, el color heredado, los bytes desperdiciados y qué se rompe dentro de un <img>, de un data URI o en línea.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Imagen a Base64 o data URI
Image to Base64 / Data URI
Codifica una imagen como cadena Base64 o como data URI listo para pegar en CSS, HTML o JSON.
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.