Tamaño de rasterización SVG
Un viewBox de 24×24 exportado a 2× da un PNG de 48×48. Indique el viewBox y una escala o un ancho de destino, y obtenga las medidas en píxeles enteros, la proporción y los megapíxeles. Solo calcula el tamaño, no dibuja la imagen. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Ancho del viewBox
- 24
- Alto del viewBox
- 24
- Escala
- 2
- Modo de cálculo
- scale
- Ancho (px)
- 48
- Alto (px)
- 48
- Relación de aspecto
- 1:1
Antes de exportar un logotipo, icono o ilustración SVG a PNG, necesita saber cuántos píxeles ocupará el mapa de bits a la escala o al ancho de exportación elegidos. Los diseñadores suelen pegar un viewBox de veinticuatro por veinticuatro unidades de usuario y pedir un mapa de bits retina al doble; los scripts de compilación necesitan las mismas cifras sin abrir un navegador ni una herramienta de diseño. Esta calculadora de tamaño de rasterización SVG acepta el ancho y el alto del viewBox —o una cadena completa del atributo viewBox— y un factor de escala uniforme o un ancho de destino en píxeles. Devuelve el ancho y el alto PNG enteros que conservan la relación de aspecto, la escala efectiva, una relación de aspecto simplificada y megapíxeles aproximados.
Cómo el tamaño del viewBox se convierte en píxeles PNG
El ancho y el alto son el tamaño lógico de la obra en unidades de usuario, no píxeles CSS por sí solos. Cuando un motor rasteriza el gráfico a mapa de bits, proyecta ese rectángulo lógico sobre una cuadrícula de píxeles de dispositivo. Con escala uno, un icono de veinticuatro por veinticuatro se convierte en un PNG de veinticuatro por veinticuatro; con escala dos obtiene cuarenta y ocho por cuarenta y ocho, la exportación retina habitual a doble resolución.
El redondeo usa conversión entera habitual hacia el par más cercano y nunca devuelve menos de un píxel en cada eje cuando el viewBox es positivo, lo que evita mapas de bits de tamaño cero por fracciones minúsculas. Esta capacidad realiza únicamente esa aritmética de tamaño. No analiza el marcado SVG completo, no dibuja trazados y no devuelve bytes de imagen: use un rasterizador SVG a PNG dedicado cuando necesite los píxeles en sí.
Aquí obtiene el contrato del tamaño de exportación para que la integración continua, los tokens de diseño y la documentación fijen dimensiones exactas antes de un paso de renderizado costoso.
Cuándo conviene conocer antes el tamaño
Los sistemas de iconos y las canalizaciones de tokens de diseño suelen declarar un viewBox lógico una vez y exportar muchas densidades PNG: uno por uno, dos por uno y tres por uno para activos móviles. Calcular esos tamaños de píxel en una función pura diminuta mantiene coherentes los manifiestos de exportación, las tablas del README y los nombres de ruta del CDN sin lanzar un navegador sin interfaz por cada fila.
Los sitios de marketing que compiten por tamaño de rasterización SVG o viewBox a píxeles PNG pueden incrustar la herramienta gratuita del navegador para que los visitantes comprueben el tamaño de exportación antes de un convertidor de pago. La integración continua puede afirmar que la cabecera de un PNG generado coincide con las dimensiones que predice este extremo para el mismo viewBox y la misma escala, detectando regresiones cuando un diseñador cambia solo el viewBox.
Los revisores de accesibilidad y maquetación usan los campos de megapíxeles y de aspecto para señalar mapas de bits enormes que hincharían el correo o los paquetes móviles.
Qué puede hacer con ella
Exportaciones de iconos retina y multi-densidad
A partir de un viewBox 24×24, calcule tamaños PNG a 1×, 2× y 3× para iconos de aplicación y tablas de tokens de diseño sin abrir una herramienta de diseño.
Comprobaciones CI sobre cabeceras PNG generadas
Compruebe que el ancho y el alto PNG de una canalización coinciden con las dimensiones predichas para el mismo viewBox y escala antes de publicar activos.
Planificación del ancho de exportación para arte de marketing
Dado un ancho objetivo en píxeles, derive el alto correspondiente a partir de la relación de aspecto del viewBox SVG antes de un renderizado SVG a PNG completo.
Preguntas frecuentes
¿Devuelve un archivo PNG?
No. Solo calcula dimensiones en píxeles. Use un rasterizador SVG a PNG aparte cuando necesite bytes de imagen; use esta herramienta para planificar o verificar tamaños primero.
¿Qué tamaño tiene en PNG un icono de 24×24 a 2× para pantallas retina?
Queda en 48 por 48 píxeles. Los dos lados del viewBox se multiplican por la misma escala y se redondean a píxeles enteros, así que a 1× el PNG sigue siendo de 24 por 24.
¿Cómo se calcula el alto si solo fijo el ancho?
Su ancho de destino se divide entre el ancho del viewBox para obtener la escala efectiva; luego el alto del viewBox se multiplica por esa escala y se redondea. La imagen conserva su proporción.
¿Puedo indicar una escala y un ancho de destino a la vez?
No, elija uno de los dos. Las dos formas de dimensionar podrían contradecirse, por eso la calculadora rechaza la combinación. Si no indica ninguna, usa una escala de 1 y devuelve el tamaño del viewBox tal cual.
¿Qué números del viewBox deciden el tamaño del PNG?
Solo los dos últimos. Un viewBox tiene cuatro números: el punto de partida a la izquierda y arriba, y luego el ancho y el alto del dibujo. Puede pegar el texto completo del viewBox y tendrá prioridad sobre los valores sueltos.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/svg-to-png-size \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"viewbox_width":24,"viewbox_height":24}'const res = await fetch("https://api.kit.forhosting.com/image/svg-to-png-size", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"viewbox_width": 24,
"viewbox_height": 24
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/svg-to-png-size",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"viewbox_width": 24,
"viewbox_height": 24
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/svg-to-png-size", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"viewbox_width":24,"viewbox_height":24}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"viewbox_width":24,"viewbox_height":24}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/svg-to-png-size", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"viewbox_width": 24,
"viewbox_height": 24
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.svg_to_png_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Si faltan las dimensiones del viewBox, la tarea falla con un error invalid_input claro para que la automatización nunca invente un tamaño.
Cómo el tamaño del viewBox se convierte en píxeles PNG
Un viewBox SVG declara un sistema de coordenadas rectangular con cuatro números: minX, minY, width y height. La asignación más simple multiplica ambos ejes por el mismo factor de escala: width_px es el redondeo de viewbox_width por scale, y height_px es el redondeo de viewbox_height por scale. Como alternativa, puede fijar solo el ancho de salida en píxeles y dejar que el alto siga la relación de aspecto: la escala efectiva es target_width dividido por viewbox_width, y height_px es el producto redondeado de viewbox_height por esa escala.
Contrato de entrada, modos y comportamiento ante errores
Los ejes del viewBox no positivos, la escala no positiva y el ancho objetivo no positivo también fallan, y un viewBox completamente ausente —ni cadena ni ambas dimensiones numéricas— falla con un mensaje que nombra el viewBox faltante. Se aceptan cadenas numéricas en todos los campos escalares para que los formularios y envoltorios CLI no necesiten un tipo numérico aparte. Envíe un objeto JSON con viewbox_width y viewbox_height como números finitos positivos, o pegue una cadena de atributo viewBox como cero cero veinticuatro veinticuatro en el campo viewbox; la forma en cadena prevalece sobre el ancho y el alto separados cuando ambos están presentes. Opcionalmente indique scale como factor uniforme, o target_width como ancho PNG deseado en píxeles. Si no se proporciona ni scale ni target_width, la escala por defecto es uno, de modo que el tamaño de raster uno a uno sigue siendo calculable. Enviar scale y target_width a la vez se rechaza con invalid_input porque los dos modos no coincidirían en el tamaño pretendido. Las respuestas correctas devuelven viewbox_width y viewbox_height limpios, la escala efectiva (incluida la derivada si eligió target_width), una cadena mode de scale o target_width, width_px y height_px enteros, un aspect_ratio reducido como uno a uno o dieciséis a nueve, aspect_decimal como ancho entre alto, megapíxeles aproximados y una fórmula breve que reescribe el cálculo. La validación fallida no se cobra; solo los cálculos de tamaño correctos cargan el precio base publicado $0.002 en la ruta API.
Dónde una API de tamaño de raster SVG resulta útil
Mantenga las peticiones pequeñas, fije width_px y height_px en las pruebas y obtendrá dimensiones de raster reproducibles para sistemas de diseño, scripts de compilación y documentación sin montar su propia pila de imágenes.
Preguntas técnicas
¿Cómo se calcula el tamaño PNG a partir de un viewBox SVG?
Envíe viewbox_width y viewbox_height positivos (o una cadena viewBox), más scale opcional (valor por defecto 1) o target_width. La API devuelve width_px y height_px enteros que conservan la relación de aspecto.
¿Qué ocurre si falta el viewBox?
La tarea falla con invalid_input. Debe proporcionar viewbox_width y viewbox_height, o una cadena de atributo viewBox de cuatro números. Un viewBox ausente nunca se inventa.
¿Puedo indicar scale y target_width a la vez?
No. Elija un factor de escala uniforme o un ancho PNG objetivo. Enviar ambos devuelve invalid_input para que el tamaño pretendido sea inequívoco.
¿Cuánto cuesta la calculadora de tamaño de rasterización SVG?
La herramienta del navegador es gratuita. Las peticiones API usan saldo KIT prepago a $0.002 por llamada correcta; la entrada no válida no se cobra.