SVG rasterization size calculator
A 24×24 viewBox exported at 2× becomes a 48×48 PNG. Enter the viewBox and either a scale or a target width to get whole-pixel dimensions, the aspect ratio and the megapixels. It only works out the size, it does not draw the image. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Viewbox width
- 24
- Viewbox height
- 24
- Scale
- 2
- Calculation mode
- scale
- Width px
- 48
- Height px
- 48
- Aspect ratio
- 1:1
Before you export an SVG logo, icon, or illustration to a PNG, you need to know how many pixels the raster will occupy at a chosen scale or export width. Designers often paste a viewBox of twenty-four by twenty-four user units and ask for a two-times retina bitmap; build scripts need the same numbers without opening a browser or a design tool. This SVG rasterization size calculator accepts the viewBox width and height—or a full viewBox attribute string—and either a uniform scale factor or a target pixel width. It returns integer PNG width and height that preserve aspect ratio, the effective scale used, a simplified aspect ratio, and approximate megapixels.
How viewBox size becomes PNG pixels
An SVG viewBox declares a rectangular coordinate system as four numbers: minX, minY, width, and height. The width and height are the logical size of the artwork in user units, not CSS pixels by themselves. When a renderer rasterizes the graphic to a bitmap, it maps that logical rectangle onto a grid of device pixels.
At scale one, a twenty-four by twenty-four icon becomes a twenty-four by twenty-four PNG; at scale two you get forty-eight by forty-eight, the common “retina” double-resolution export. Rounding uses ordinary half-up integer conversion and never returns less than one pixel on either axis when the viewBox is positive, which avoids zero-size bitmaps from tiny fractions. This capability performs only that size arithmetic.
It does not parse full SVG markup, does not draw paths, and does not return image bytes—use a dedicated SVG-to-PNG rasterizer when you need the pixels themselves. What you get here is the contract of the export size so CI, design tokens, and documentation can pin exact dimensions before any expensive render step runs.
When knowing the export size in advance helps
Icon systems and design-token pipelines often declare a logical viewBox once and export many PNG densities: one-x, two-x, three-x for mobile assets. Computing those pixel sizes in a tiny pure function keeps export manifests, README tables, and CDN path names consistent without launching a headless browser for every row. Marketing sites that rank for SVG rasterization size or viewBox to PNG pixels can embed the free browser tool so visitors check export sizes before they hit a paid converter.
Accessibility and layout reviewers use the megapixels and aspect fields to flag enormous bitmaps that would bloat email or mobile bundles.
What you can do with it
Retina and multi-density icon exports
From a 24×24 viewBox, compute 1×, 2×, and 3× PNG pixel sizes for app icons and design-token tables without opening a design tool.
CI checks against generated PNG headers
Assert that a pipeline’s PNG width and height match the dimensions predicted for the same viewBox and scale before shipping assets.
Export width planning for marketing art
Given a target width in pixels, derive the matching height from the SVG viewBox aspect ratio before a full SVG-to-PNG render.
FAQ
Does this return a PNG file?
No. It only computes pixel dimensions. Use a separate SVG-to-PNG rasterizer when you need image bytes; use this tool to plan or verify sizes first.
What PNG size does a 24×24 icon have at 2× for retina screens?
It becomes 48 by 48 pixels. Both sides of the viewBox are multiplied by the same scale and rounded to whole pixels, so at 1× the PNG stays 24 by 24.
How is the height worked out when I only set the width?
Your target width is divided by the viewBox width to get the effective scale, and the viewBox height is multiplied by that scale and rounded. The picture keeps its proportions.
Can I set a scale and a target width at the same time?
No, pick one. The two ways of sizing could disagree, so the calculator refuses the pair. If you give neither, it uses a scale of 1 and returns the viewBox size unchanged.
Which numbers of the viewBox decide the PNG size?
Only the last two. A viewBox has four numbers: the left and top starting point, then the width and height of the artwork. You can paste the whole viewBox text and it takes precedence over separate values.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your 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)Example request
{
"viewbox_width": 24,
"viewbox_height": 24
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.svg_to_png_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_mb | 15 |
max_megapixels | 12 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Missing viewBox dimensions fail with a clear invalid_input error so automation never invents a size.
How viewBox size becomes PNG pixels
The simplest mapping multiplies both axes by the same scale factor: width_px equals round of viewbox_width times scale, and height_px equals round of viewbox_height times scale. Alternatively you may fix only the output width in pixels and let height follow the aspect ratio: effective scale equals target_width divided by viewbox_width, then height_px is the rounded product of viewbox_height and that scale.
Input contract, modes, and error behaviour
Non-positive viewBox axes, non-positive scale, and non-positive target width also fail, and a completely missing viewBox—neither a string nor both numeric dimensions—fails with a message that names the missing viewBox. Numeric strings are accepted for all scalar fields so form posts and CLI wrappers do not need a separate number type. Send a JSON object with viewbox_width and viewbox_height as finite positive numbers, or paste a viewBox attribute string such as zero zero twenty-four twenty-four under the viewbox field; the string form overrides separate width and height when both are present. Optionally set scale for a uniform factor, or target_width for a desired PNG width in pixels. If neither scale nor target_width is provided, scale defaults to one so a one-to-one raster size is still computable. Providing both scale and target_width is rejected with invalid_input because the two modes would disagree on the intended size. Successful responses echo cleaned viewbox_width and viewbox_height, the effective scale (including the derived scale when you chose target_width), a mode string of scale or target_width, integer width_px and height_px, a reduced aspect_ratio such as one-to-one or sixteen-to-nine, aspect_decimal as width over height, approximate megapixels, and a short formula string restating the math. Failed validation is not billed; only successful size computations charge the published $0.002 base price on the API path.
Where an SVG raster size API earns its keep
Continuous integration can assert that a generated PNG header matches the dimensions this endpoint predicts for the same viewBox and scale, catching regressions when a designer changes only the viewBox. Keep requests small, pin width_px and height_px in tests, and you get reproducible raster dimensions for design systems, build scripts, and documentation without standing up image tooling of your own.
Technical questions
How do I compute PNG size from an SVG viewBox?
Send positive viewbox_width and viewbox_height (or a viewBox string), plus optional scale (default 1) or target_width. The API returns integer width_px and height_px that preserve aspect ratio.
What if the viewBox is missing?
The task fails with invalid_input. You must provide viewbox_width and viewbox_height, or a four-number viewBox attribute string. Missing viewBox is never guessed.
Can I set both scale and target_width?
No. Choose either a uniform scale factor or a target PNG width. Sending both returns invalid_input so the intended size is unambiguous.
What does the SVG rasterization size calculator cost?
The browser tool is free. API requests use prepaid KIT balance at $0.002 per successful call; invalid input is not billed.