Un diseñador te pasa un icono en SVG y quieres meterlo en el CSS sin crear otro archivo. Para eso hace falta una Data URI SVG: el código del dibujo escrito como una sola URL. Pega el código aquí y copia el resultado, o descarga un PNG si el destino no acepta SVG.
Del código pegado al PNG o a la URI
- Pega el código SVG en el campo. Al principio hay un ejemplo: un círculo azul con una estrella blanca.
- Mira la vista previa a la derecha. Tiene un fondo oscuro de cuadros para que se vean las formas claras.
- Pulsa Copiar Data URI o Copiar Base64. Los dos botones copian la URI completa, con el prefijo
data:. - Para un PNG, escribe un tamaño en píxeles y pulsa Descargar como PNG. El nombre del archivo incluye el tamaño, por ejemplo
vector-512x512.png.
De SVG a Data URI: codificación porcentual o Base64
El primer botón usa codificación porcentual y además escapa las comillas simples y dobles. En SVG suele salir más corta que Base64. El segundo botón alarga el texto en un tercio, pero admite cualquier carácter, también los que no son ASCII. La herramienta no minimiza el SVG: la URI contiene tu código tal cual, solo codificado. Una flecha de 400 bytes para un menú desplegable propio ahorra una petición.
El PNG siempre sale cuadrado
El dibujo se pinta en un canvas de lado por lado. Un SVG apaisado se estira. El fondo queda transparente. Un tamaño vacío o no válido se convierte en 512.
Cuando la descarga no hace nada
Probablemente falta xmlns="http://www.w3.org/2000/svg". Sin ese atributo el navegador suele no poder cargar el SVG como imagen, y no aparece ningún mensaje de error. La vista previa, sin embargo, sí muestra el dibujo. Las imágenes, fuentes y hojas de estilo externas del SVG no se cargan en el PNG. Los tamaños muy grandes pueden fallar según el límite del canvas.
Qué pasa con tu código
La codificación y el PNG se hacen en tu navegador, sin ninguna petición de red. La vista previa es un elemento de imagen con una Data URI y añade xmlns solo para mostrar el dibujo. La exportación a PNG y la Data URI copiada no lo añaden. Los scripts y manejadores de eventos del código pegado no se ejecutan en la vista previa.