Codificador de URL SVG
Convierta el marcado SVG en un URI de datos listo para CSS y decodifique los URI de datos nuevamente a SVG.
Codificador de URL SVG
Pegue un SVG y obtenga un URI de datos que puede colocar directamente en CSS, listo para una imagen de fondo o una máscara. En lugar de base64, el codificador utiliza el enfoque compacto de codificación de URL: intercambia comillas dobles por comillas simples, colapsa los espacios en blanco y codifica porcentualmente solo los caracteres que realmente lo necesitan, por lo que el resultado sigue siendo breve y legible por humanos. Eso mantiene su hoja de estilo más pequeña que un blob base64 y aún le permite reconocer las formas dentro del URI.
Tres formatos de salida cubren los casos comunes. La regla CSS envuelve el URI de datos en la imagen de fondo: url("…"); para que puedas pegar una declaración completa. El URI de datos desnudos le brinda solo el valor de una propiedad personalizada, un <img> src o una máscara SVG. El formulario base64 produce un URI data:image/svg+xml;base64 seguro para UTF-8 para herramientas o pasos de compilación que esperan esa codificación, incluidos SVG con emoji o nodos de texto acentuados. La opción de tipo MIME abre el mismo codificador a cualquier contenido: elige text/plain, text/html, text/css, application/json u otro tipo y lo que pegues se convierte en un data URI de ese tipo. Solo image/svg+xml compacta los espacios y cambia las comillas dobles por simples, porque esos dos trucos acortan el marcado pero estropean el texto plano y el JSON.
Cambie la dirección a decodificación y la herramienta invierte cualquiera de las tres formas nuevamente al marcado SVG sin formato. Pegue una regla CSS, un URI de datos simple o uno base64, y extraerá el SVG para que pueda editar un ícono que solo existe dentro de una hoja de estilo. El recuento muestra el tamaño de entrada, el tamaño de salida y el cambio porcentual, para que pueda ver de un vistazo si la codificación redujo o aumentó el icono. El URI también puede salir en una etiqueta <img> o <link>, con charset explícito en la cabecera.
Todo se ejecuta en su navegador. Su marcado SVG nunca se carga, por lo que puede codificar íconos, logotipos y recursos internos privados sin que salgan de su dispositivo.