Convertidor SVG a PNG - Convertir SVG a PNG/JPEG en Linea
Convierte archivos o codigo SVG a imagenes PNG/JPEG de alta calidad con dimensiones, escala y fondo personalizables. 100% del lado del cliente, sin carga necesaria.
Preguntas Frecuentes
Que es un convertidor de SVG a PNG y por que lo necesitaria?
Un convertidor de SVG a PNG transforma archivos SVG (Scalable Vector Graphics), que son imagenes vectoriales basadas en XML, en imagenes raster PNG (Portable Network Graphics) compuestas por pixeles. Mientras que SVG es ideal para uso web por su escalabilidad y pequeno tamano de archivo, muchas plataformas y aplicaciones requieren imagenes raster: clientes de correo electronico que no renderizan SVG, plataformas de redes sociales que solo aceptan cargas PNG/JPEG, software de presentaciones, generadores de PDF y aplicaciones heredadas sin soporte SVG.
Como uso este convertidor de SVG a PNG?
Hay dos formas de proporcionar entrada SVG: (1) Arrastra y suelta un archivo SVG en el area de carga, o haz clic para explorar tus archivos. (2) Pega codigo SVG directamente en el area de texto. Una vez cargado tu SVG, la herramienta detecta automaticamente sus dimensiones y muestra una vista previa. Configura la salida usando el panel de configuracion: elige un factor de escala (1x, 2x, 3x, 4x), selecciona un color de fondo y elige el formato de salida (PNG o JPEG). Haz clic en Descargar para guardar el archivo de imagen.
Estan seguros mis datos SVG? Se suben archivos a un servidor?
Tus datos SVG estan 100% seguros y nunca salen de tu navegador. Toda la conversion se realiza del lado del cliente usando la API nativa de Canvas HTML5 integrada en tu navegador. Ningun dato SVG se transmite a ningun servidor, no se almacenan archivos en ninguna parte y no se realiza ningun seguimiento.
Cual es la diferencia entre salida PNG y JPEG?
PNG soporta transparencia completa (canal alfa), compresion sin perdidas y es ideal para iconos, logotipos y elementos de interfaz. JPEG usa compresion con perdida para lograr tamanos de archivo mas pequenos pero no soporta transparencia. Usa PNG cuando necesites transparencia o calidad perfecta por pixel. Usa JPEG cuando necesites tamanos de archivo mas pequenos y la transparencia no sea necesaria.
Que significan los factores de escala (1x, 2x, 3x, 4x)?
Los factores de escala multiplican las dimensiones intrinsecas del SVG para producir las dimensiones de salida en pixeles. Por ejemplo, si tu SVG tiene un viewBox de '0 0 24 24': 1x produce un PNG de 24x24, 2x produce uno de 48x48, 3x produce uno de 72x72 y 4x produce uno de 96x96. Esta es una practica estandar en desarrollo movil y web para diferentes densidades de pantalla.
Puedo convertir SVGs con fondos transparentes?
Si. El formato PNG soporta completamente la transparencia. Cuando seleccionas Transparente como color de fondo (que es el predeterminado), todas las areas transparentes en el SVG se preservan en la salida PNG. La vista previa usa un patron de tablero de ajedrez para visualizar areas transparentes. Ten en cuenta que el formato JPEG no soporta transparencia.
Por que mi PNG convertido se ve borroso o pixelado?
Si la salida se ve borrosa, las dimensiones de salida probablemente son demasiado pequenas para el nivel de detalle del SVG. Intenta aumentar el factor de escala a 2x o 3x, o ingresa manualmente dimensiones personalizadas mas grandes. Los SVG son graficos vectoriales independientes de la resolucion, por lo que pueden exportarse a cualquier tamano sin perdida de calidad.
Cuales son las dimensiones maximas y los limites de tamano de archivo?
El tamano maximo de archivo SVG de entrada es 10MB. Las dimensiones maximas de salida son 8192x8192 pixeles, que es el limite practico impuesto por la implementacion de Canvas de la mayoria de los navegadores.
Ejemplos de Codigo
// SVG to PNG conversion using Canvas API (Browser)
function svgToPng(svgString, options = {}) {
const {
width = null,
height = null,
scale = 1,
backgroundColor = null,
format = 'png',
quality = 0.92,
} = options;
return new Promise((resolve, reject) => {
const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');
const svg = doc.documentElement;
let svgWidth = parseFloat(svg.getAttribute('width')) || 0;
let svgHeight = parseFloat(svg.getAttribute('height')) || 0;
if (!svgWidth || !svgHeight) {
const viewBox = svg.getAttribute('viewBox');
if (viewBox) {
const [, , vbW, vbH] = viewBox.split(/[\s,]+/).map(Number);
svgWidth = vbW;
svgHeight = vbH;
}
}
const outWidth = width || svgWidth * scale;
const outHeight = height || svgHeight * scale;
const canvas = document.createElement('canvas');
canvas.width = outWidth;
canvas.height = outHeight;
const ctx = canvas.getContext('2d');
if (backgroundColor) {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, outWidth, outHeight);
}
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, outWidth, outHeight);
URL.revokeObjectURL(url);
canvas.toBlob(
(resultBlob) => {
resolve({
blob: resultBlob,
dataUrl: canvas.toDataURL(
format === 'jpeg' ? 'image/jpeg' : 'image/png', quality
),
width: outWidth,
height: outHeight,
size: resultBlob.size,
});
},
format === 'jpeg' ? 'image/jpeg' : 'image/png',
quality
);
};
img.onerror = () => reject(new Error('Failed to load SVG'));
img.src = url;
});
}
// Usage
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3b82f6"/></svg>';
svgToPng(svg, { scale: 2 }).then(r => console.log(`${r.width}x${r.height}, ${r.size} bytes`));