Tamanho de rasterização SVG
Um viewBox de 24×24 exportado em 2× vira um PNG de 48×48. Informe o viewBox e uma escala ou uma largura de destino para ver as medidas em pixels inteiros, a proporção e os megapixels. Só calcula o tamanho, não desenha a imagem. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Largura do viewBox
- 24
- Altura do viewBox
- 24
- Escala
- 2
- Modo de cálculo
- scale
- Largura (px)
- 48
- Altura (px)
- 48
- Proporção
- 1:1
Antes de exportar um logotipo, ícone ou ilustração SVG para PNG, você precisa saber quantos pixels o mapa de bits ocupará na escala ou na largura de exportação escolhida. Designers costumam colar um viewBox de vinte e quatro por vinte e quatro unidades de usuário e pedir um bitmap retina em dobro; scripts de build precisam dos mesmos números sem abrir um navegador ou uma ferramenta de design. Esta calculadora de tamanho de rasterização SVG aceita a largura e a altura do viewBox — ou uma string completa do atributo viewBox — e um fator de escala uniforme ou uma largura alvo em pixels. Ela devolve largura e altura PNG inteiras que preservam a proporção, a escala efetiva, uma proporção simplificada e megapixels aproximados.
Como o tamanho do viewBox vira pixels PNG
A largura e a altura são o tamanho lógico da arte em unidades de usuário, não pixels CSS por si só. Quando um renderizador rasteriza o gráfico para um mapa de bits, ele mapeia esse retângulo lógico em uma grade de pixels do dispositivo. Com escala um, um ícone de vinte e quatro por vinte e quatro vira um PNG de vinte e quatro por vinte e quatro; com escala dois você obtém quarenta e oito por quarenta e oito, a exportação retina comum em resolução dupla.
O arredondamento usa conversão inteira usual e nunca devolve menos de um pixel em cada eixo quando o viewBox é positivo, o que evita bitmaps de tamanho zero por frações minúsculas. Esta capacidade executa apenas essa aritmética de tamanho. Ela não analisa a marcação SVG completa, não desenha caminhos e não devolve bytes de imagem — use um rasterizador SVG para PNG dedicado quando precisar dos pixels em si.
O que você obtém aqui é o contrato do tamanho de exportação para que CI, tokens de design e documentação fixem dimensões exatas antes de qualquer passo de renderização caro.
Quando vale a pena saber o tamanho antes
Sistemas de ícones e pipelines de tokens de design costumam declarar um viewBox lógico uma vez e exportar várias densidades PNG: um por um, dois por um e três por um para ativos móveis. Calcular esses tamanhos de pixel em uma função pura minúscula mantém consistentes os manifests de exportação, as tabelas do README e os nomes de caminho do CDN sem lançar um navegador headless para cada linha.
Sites de marketing que ranqueiam por tamanho de rasterização SVG ou viewBox para pixels PNG podem incorporar a ferramenta gratuita do navegador para que visitantes verifiquem tamanhos de exportação antes de um conversor pago. Revisores de acessibilidade e layout usam os campos de megapixels e de aspecto para sinalizar bitmaps enormes que inchariam e-mail ou pacotes móveis.
Casos de uso
Exportações de ícones retina e multi-densidade
A partir de um viewBox 24×24, calcule tamanhos PNG em 1×, 2× e 3× para ícones de app e tabelas de tokens de design sem abrir uma ferramenta de design.
Checagens de CI em cabeçalhos PNG gerados
Afirme que a largura e a altura PNG de um pipeline coincidem com as dimensões previstas para o mesmo viewBox e escala antes de publicar ativos.
Planejamento da largura de exportação para arte de marketing
Dada uma largura alvo em pixels, derive a altura correspondente a partir da proporção do viewBox SVG antes de um render SVG para PNG completo.
Perguntas frequentes
Isto devolve um arquivo PNG?
Não. Apenas calcula dimensões em pixels. Use um rasterizador SVG para PNG separado quando precisar de bytes de imagem; use esta ferramenta para planejar ou verificar tamanhos primeiro.
Qual o tamanho em PNG de um ícone de 24×24 em 2× para telas retina?
Fica com 48 por 48 pixels. Os dois lados do viewBox são multiplicados pela mesma escala e arredondados para pixels inteiros, então em 1× o PNG continua com 24 por 24.
Como a altura é calculada quando defino só a largura?
A largura de destino é dividida pela largura do viewBox para chegar à escala efetiva; depois a altura do viewBox é multiplicada por essa escala e arredondada. A imagem mantém a proporção.
Posso informar uma escala e uma largura de destino ao mesmo tempo?
Não, escolha uma das duas. As duas formas de dimensionar poderiam discordar, por isso a calculadora recusa a combinação. Se você não informar nenhuma, ela usa escala 1 e devolve o tamanho do viewBox como está.
Quais números do viewBox definem o tamanho do PNG?
Só os dois últimos. Um viewBox tem quatro números: o ponto de partida à esquerda e no topo, depois a largura e a altura do desenho. Você pode colar o texto inteiro do viewBox, e ele tem prioridade sobre os valores avulsos.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
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)Exemplo de requisição
{
"viewbox_width": 24,
"viewbox_height": 24
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.svg_to_png_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
max_mb | 15 |
max_megapixels | 12 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Dimensões de viewBox ausentes falham com um erro invalid_input claro para que a automação nunca invente um tamanho.
Como o tamanho do viewBox vira pixels PNG
Um viewBox SVG declara um sistema de coordenadas retangular com quatro números: minX, minY, width e height. O mapeamento mais simples multiplica ambos os eixos pelo mesmo fator de escala: width_px é o arredondamento de viewbox_width vezes scale, e height_px é o arredondamento de viewbox_height vezes scale. Como alternativa, você pode fixar só a largura de saída em pixels e deixar a altura seguir a proporção: a escala efetiva é target_width dividido por viewbox_width, e height_px é o produto arredondado de viewbox_height por essa escala.
Contrato de entrada, modos e comportamento de erro
Eixos de viewBox não positivos, escala não positiva e largura alvo não positiva também falham, e um viewBox completamente ausente — nem string nem ambas as dimensões numéricas — falha com uma mensagem que nomeia o viewBox faltante. Strings numéricas são aceitas em todos os campos escalares para que posts de formulário e wrappers CLI não precisem de um tipo numérico separado. Envie um objeto JSON com viewbox_width e viewbox_height como números finitos positivos, ou cole uma string de atributo viewBox como zero zero vinte e quatro vinte e quatro no campo viewbox; a forma em string prevalece sobre largura e altura separadas quando ambas estão presentes. Opcionalmente defina scale como fator uniforme, ou target_width como largura PNG desejada em pixels. Se nem scale nem target_width forem fornecidos, a escala padrão é um, de modo que o tamanho de raster um para um ainda seja calculável. Fornecer scale e target_width juntos é rejeitado com invalid_input porque os dois modos discordariam do tamanho pretendido. Respostas bem-sucedidas ecoam viewbox_width e viewbox_height limpos, a escala efetiva (incluindo a derivada quando você escolheu target_width), uma string mode de scale ou target_width, width_px e height_px inteiros, um aspect_ratio reduzido como um para um ou dezesseis para nove, aspect_decimal como largura sobre altura, megapixels aproximados e uma fórmula curta que reafirma o cálculo. Validação falha não é cobrada; apenas cálculos de tamanho bem-sucedidos cobram o preço base publicado US$ 0,002 no caminho da API.
Onde uma API de tamanho de raster SVG se paga
Integração contínua pode afirmar que o cabeçalho de um PNG gerado corresponde às dimensões que este endpoint prevê para o mesmo viewBox e a mesma escala, capturando regressões quando um designer altera só o viewBox. Mantenha as requisições pequenas, fixe width_px e height_px nos testes e você obtém dimensões de raster reproduzíveis para sistemas de design, scripts de build e documentação sem montar sua própria ferramenta de imagem.
Perguntas técnicas
Como calcular o tamanho PNG a partir de um viewBox SVG?
Envie viewbox_width e viewbox_height positivos (ou uma string viewBox), mais scale opcional (padrão 1) ou target_width. A API devolve width_px e height_px inteiros que preservam a proporção.
E se o viewBox estiver ausente?
A tarefa falha com invalid_input. Você deve fornecer viewbox_width e viewbox_height, ou uma string de atributo viewBox com quatro números. ViewBox ausente nunca é adivinhado.
Posso definir scale e target_width juntos?
Não. Escolha um fator de escala uniforme ou uma largura PNG alvo. Enviar ambos retorna invalid_input para que o tamanho pretendido fique inequívoco.
Quanto custa a calculadora de tamanho de rasterização SVG?
A ferramenta do navegador é gratuita. Pedidos à API usam saldo KIT pré-pago a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.