Conversor de SVG a data URI

Es la imagen completa escrita como URL. La cadena empieza por data:image/svg+xml y el resto es el propio código, escapado para que sobreviva dentro de una URL. Como la ilustración viaja en la referencia, un navegador que ya tiene la hoja de estilos ya tiene la imagen: sin una segunda petición y sin esperar a una conexión por un icono de 600 bytes.

Codificación URL, en casi todos los casos. SVG es texto, así que Base64 no aporta nada: convierte tres bytes en cuatro, con un recargo fijo de un tercio sea cual sea el contenido. La codificación porcentual solo añade dos bytes por cada uno de los pocos caracteres que hay que escapar, y suele quedar entre un 10 y un 25% por encima del original. Además, sigue siendo legible en un diff y se comprime mejor, porque gzip y brotli todavía ven los nombres de etiqueta repetidos que Base64 desordena. Reserva Base64 para los flujos que reescriben o escapan dos veces los signos de porcentaje.

Casi siempre, el espacio de nombres. Cuando escribes un elemento svg directamente en una página HTML, el analizador ya sabe lo que es. Una data URI se carga como documento independiente, así que el propio archivo tiene que declararlo con xmlns="http://www.w3.org/2000/svg" en el elemento raíz. Sin él, el navegador no analiza nada y no dibuja nada, sin avisar. La otra causa frecuente es un # sin escapar en un color de relleno: convierte el resto de la URI en un identificador de fragmento.

Porque el documento codificado decide su propia geometría. Sin viewBox y sin width ni height, el navegador recurre a una caja de 300 por 150. Con width y height pero sin viewBox, la forma queda fijada a ese tamaño y no se escala. Con solo un viewBox se escala libremente, que es lo que normalmente quieres para un fondo; combínalo con background-size, o con width y height explícitos en la etiqueta img.

No. El SVG codificado es un documento aparte y nada de la página anfitriona llega a su interior: currentColor se resuelve con la propiedad color de ese mismo documento (negro, salvo que el código la defina), y las propiedades personalizadas no se heredan a través de ese límite. Hay tres alternativas: editar el relleno en el código antes de codificarlo y mantener una URI por color, controlar la forma con mask-image para que el color visible venga de background-color, o insertar el elemento svg directamente en el HTML, donde el CSS de la página puede darle estilo.

No, y esa limitación es intencionada, no un error. Un SVG cargado mediante url() o una etiqueta img funciona en modo restringido: no se ejecuta ningún script y no se descarga ningún recurso externo, ya sea una fuente web, un mapa de bits enlazado o una hoja de estilos. Convierte el texto en trazados antes de codificar e incrusta cualquier imagen rasterizada como su propia data URI anidada dentro del código.

No uno práctico en los navegadores actuales: Chrome, Firefox y Safari aceptan data URI en hojas de estilos muy por encima de un megabyte. La conocida cifra de 32 KB es un límite de Internet Explorer 8 que dejó de importar hace años. Las verdaderas restricciones están en otra parte: los minificadores y los source maps se vuelven difíciles de manejar, algunos campos de CMS truncan los valores largos y cada kilobyte se vuelve a descargar con el archivo en el que vive. Considera 4 KB como cómodo y 32 KB como el punto en el que un archivo aparte es la mejor decisión técnica.

Cuatro cosas: los comentarios, la declaración XML, los huecos entre etiquetas que solo contienen espacios en blanco y los saltos de línea que los exportadores dejan entre atributos. Nunca elimina un atributo, redondea una coordenada, fusiona un trazado ni renombra un id, y deja intactos los datos de caracteres dentro de text, tspan, textPath, title, desc, style y script. Un documento que pide xml:space="preserve" también conserva todos los huecos entre sus etiquetas, aunque los comentarios y la declaración XML se eliminan igualmente. Eso hace que el paso sea seguro pero modesto. Si quieres reducciones reales, pasa antes el archivo por SVGO y pega aquí el resultado.