Qué hace
Esta herramienta convierte código SVG o un archivo .svg en una imagen PNG, JPG o WebP. Pega el marcado, suelta un archivo, elige una escala o un ancho exacto y descarga el mapa de bits. El renderizado ocurre en tu navegador, así que iconos, logos y diagramas nunca salen de tu equipo.
Es útil siempre que un sitio no acepte SVG: iconos de apps, imágenes para redes sociales, presentaciones, documentos, firmas de correo o software antiguo. Tienes una vista previa en vivo sobre un fondo de cuadros para ver exactamente qué partes son transparentes.
Cómo se usa
- Pega tu código
<svg>en el editor, haz clic en Subir para abrir un archivo o arrastra uno a la página. Ejemplo carga un pequeño logo. - Elige un Tamaño: 1× usa las dimensiones propias del SVG y 2×–4× las multiplican. O escribe un Ancho personalizado en píxeles; la altura sigue la proporción.
- Elige el Formato: PNG para una salida sin pérdida con transparencia, JPG para fotos y compatibilidad, WebP para archivos pequeños.
- Elige el Fondo: transparente, blanco o cualquier color.
- Haz clic en Descargar. La línea bajo la vista previa muestra el tamaño final en píxeles, el formato y el tamaño del archivo.
Cómo se calcula el tamaño
La herramienta examina el elemento raíz <svg>. Los valores de width y height en px, pt, mm, cm, in o em se convierten a píxeles. Si faltan o están en porcentaje, se usan en su lugar el ancho y el alto del viewBox. Después se aplica la escala o el ancho personalizado elegidos, y el SVG se reescribe con tamaños explícitos en píxeles para que todos los navegadores lo dibujen igual.
Ejemplo
Un icono con viewBox="0 0 24 24" sin width ni height se convierte en un PNG de 24 × 24 a 1×. A 4× pasa a 96 × 96, y con un ancho personalizado de 512 se convierte en un PNG de 512 × 512 apto como icono de tienda de apps, perfectamente nítido porque se renderiza a partir de vectores en lugar de ampliarse.
Consejos
- El XML no válido se indica con un número de línea, para que puedas ir directamente al problema.
- Las imágenes rasterizadas incrustadas (
<image href="data:...">) funcionan; los enlaces externos no. - El texto usa las fuentes instaladas en tu ordenador. Para obtener resultados idénticos píxel a píxel en cualquier sitio, convierte antes el texto en contornos en tu herramienta de diseño.
- La salida más grande está limitada por el tamaño de canvas del navegador, unos 16 000 píxeles por lado.
Preguntas frecuentes
› ¿Se sube el SVG a algún sitio?
No. Tu navegador dibuja el SVG en un canvas y guarda el resultado. El código y la imagen se quedan en tu dispositivo.
› ¿Cómo consigo un PNG más nítido?
Elige la escala 2×, 3× o 4×, o escribe un ancho exacto. SVG es un formato vectorial, así que renderizarlo a mayor tamaño da bordes nítidos en pantallas de alta densidad. 2× es un buen valor predeterminado para pantallas retina.
› ¿Por qué faltan algunas imágenes o fuentes en la salida?
Por seguridad, los navegadores no cargan archivos externos (imágenes enlazadas, fuentes web, CSS) cuando dibujan un SVG como imagen. Incrusta las imágenes como data URLs y convierte el texto en trazados, o usa fuentes del sistema.
› ¿Puedo mantener el fondo transparente?
Sí. Elige Transparente con salida PNG o WebP. JPG no admite transparencia, así que las zonas transparentes se rellenan de blanco o del color que elijas.
› Mi SVG no tiene width ni height. ¿Qué tamaño se usa?
La herramienta lee el viewBox y usa su ancho y su alto. Si no hay tamaño ni viewBox, recurre al valor predeterminado del navegador, 300 × 150, y lo indica.