Dimensione rasterizzazione SVG
Un viewBox di 24×24 esportato a 2× diventa un PNG di 48×48. Inserisca il viewBox e un fattore di scala o una larghezza di destinazione per avere le misure in pixel interi, il rapporto d'aspetto e i megapixel. Calcola solo la dimensione, non disegna l'immagine. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Larghezza del viewBox
- 24
- Altezza del viewBox
- 24
- Scala
- 2
- Modalità di calcolo
- scale
- Larghezza (px)
- 48
- Altezza (px)
- 48
- Proporzioni
- 1:1
Prima di esportare un logo, un’icona o un’illustrazione SVG in PNG, Lei deve sapere quanti pixel occuperà la raster a una data scala o larghezza di esportazione. I designer spesso incollano un viewBox di ventiquattro per ventiquattro unità utente e chiedono un bitmap retina a doppia risoluzione; gli script di build servono gli stessi numeri senza aprire un browser o uno strumento di design. Questo calcolatore della dimensione di rasterizzazione SVG accetta larghezza e altezza del viewBox — oppure una stringa completa dell’attributo viewBox — e un fattore di scala uniforme oppure una larghezza obiettivo in pixel. Restituisce larghezza e altezza PNG intere che preservano il rapporto d’aspetto, la scala effettiva, un rapporto d’aspetto semplificato e megapixel approssimativi.
Come la dimensione del viewBox diventa pixel PNG
Larghezza e altezza sono la dimensione logica dell’opera in unità utente, non pixel CSS di per sé. Quando un renderer rasterizza il grafico in bitmap, proietta quel rettangolo logico su una griglia di pixel del dispositivo. Con scala uno, un’icona ventiquattro per ventiquattro diventa un PNG ventiquattro per ventiquattro; con scala due ottiene quarantotto per quarantotto, l’esportazione retina comune a doppia risoluzione.
L’arrotondamento usa la conversione intera usuale e non restituisce mai meno di un pixel su ciascun asse quando il viewBox è positivo, evitando bitmap a dimensione zero da frazioni minuscole. Questa capacità esegue solo quell’aritmetica di dimensione. Non analizza il markup SVG completo, non disegna tracciati e non restituisce byte di immagine: usi un rasterizzatore SVG-to-PNG dedicato quando le servono i pixel stessi.
Qui ottiene il contratto della dimensione di export così che CI, design token e documentazione fissino dimensioni esatte prima di un passo di rendering costoso.
Quando conviene conoscere prima la dimensione
I sistemi di icone e le pipeline di design token dichiarano spesso un viewBox logico una sola volta ed esportano molte densità PNG: uno per uno, due per uno e tre per uno per gli asset mobili. Calcolare quelle dimensioni in pixel in una piccola funzione pura mantiene coerenti manifest di export, tabelle README e nomi di percorso CDN senza avviare un browser headless per ogni riga.
I siti di marketing che si posizionano su dimensione di rasterizzazione SVG o viewBox in pixel PNG possono incorporare lo strumento gratuito del browser così i visitatori verificano le dimensioni di export prima di un convertitore a pagamento. I revisori di accessibilità e layout usano i campi megapixel e aspect per segnalare bitmap enormi che gonfierebbero e-mail o pacchetti mobili.
Casi d'uso
Esportazioni di icone retina e multi-densità
Da un viewBox 24×24, calcoli dimensioni PNG a 1×, 2× e 3× per icone app e tabelle di design token senza aprire uno strumento di design.
Controlli CI sulle intestazioni PNG generate
Verifichi che larghezza e altezza PNG di una pipeline corrispondano alle dimensioni previste per lo stesso viewBox e la stessa scala prima di pubblicare gli asset.
Pianificazione della larghezza di export per arte di marketing
Data una larghezza obiettivo in pixel, ricavi l’altezza corrispondente dal rapporto d’aspetto del viewBox SVG prima di un rendering SVG-to-PNG completo.
Domande frequenti
Restituisce un file PNG?
No. Calcola solo dimensioni in pixel. Usi un rasterizzatore SVG-to-PNG separato quando le servono byte di immagine; usi questo strumento per pianificare o verificare le dimensioni prima.
Che dimensione ha in PNG un'icona di 24×24 a 2× per schermi retina?
Diventa di 48 per 48 pixel. Entrambi i lati del viewBox vengono moltiplicati per lo stesso fattore e arrotondati a pixel interi, quindi a 1× il PNG resta di 24 per 24.
Come si calcola l'altezza se imposto solo la larghezza?
La larghezza di destinazione viene divisa per la larghezza del viewBox per ottenere il fattore effettivo; poi l'altezza del viewBox viene moltiplicata per quel fattore e arrotondata. L'immagine mantiene le proporzioni.
Posso indicare un fattore di scala e una larghezza di destinazione insieme?
No, ne scelga uno. I due modi di dimensionare potrebbero contraddirsi, perciò il calcolatore rifiuta la combinazione. Se non ne indica nessuno, usa un fattore 1 e restituisce la dimensione del viewBox così com'è.
Quali numeri del viewBox decidono la dimensione del PNG?
Solo gli ultimi due. Un viewBox ha quattro numeri: il punto di partenza a sinistra e in alto, poi la larghezza e l'altezza del disegno. Può incollare il viewBox completo, che ha la precedenza sui valori separati.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"viewbox_width": 24,
"viewbox_height": 24
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.svg_to_png_size",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Dimensioni del viewBox mancanti falliscono con un errore invalid_input chiaro, così l’automazione non inventa mai una misura.
Come la dimensione del viewBox diventa pixel PNG
Un viewBox SVG dichiara un sistema di coordinate rettangolare con quattro numeri: minX, minY, width e height. La mappatura più semplice moltiplica entrambi gli assi per lo stesso fattore di scala: width_px è l’arrotondamento di viewbox_width per scale, e height_px è l’arrotondamento di viewbox_height per scale. In alternativa Lei può fissare solo la larghezza di uscita in pixel e lasciare che l’altezza segua il rapporto d’aspetto: la scala effettiva è target_width diviso viewbox_width, quindi height_px è il prodotto arrotondato di viewbox_height per quella scala.
Contratto di ingresso, modalità e comportamento degli errori
Assi del viewBox non positivi, scala non positiva e larghezza obiettivo non positiva falliscono pure, e un viewBox del tutto assente — né stringa né entrambe le dimensioni numeriche — fallisce con un messaggio che nomina il viewBox mancante. Stringhe numeriche sono accettate per tutti i campi scalari così che form post e wrapper CLI non richiedano un tipo numerico separato. Invii un oggetto JSON con viewbox_width e viewbox_height come numeri finiti positivi, oppure incolli una stringa di attributo viewBox come zero zero ventiquattro ventiquattro nel campo viewbox; la forma stringa prevale su larghezza e altezza separate quando entrambe sono presenti. Imposti opzionalmente scale come fattore uniforme, oppure target_width come larghezza PNG desiderata in pixel. Se non sono forniti né scale né target_width, la scala predefinita è uno, così una dimensione di raster uno a uno resta calcolabile. Fornire scale e target_width insieme è respinto con invalid_input perché le due modalità non concorderebbero sulla dimensione voluta. Le risposte di successo riecheggiano viewbox_width e viewbox_height ripuliti, la scala effettiva (inclusa quella derivata se ha scelto target_width), una stringa mode di scale o target_width, width_px e height_px interi, un aspect_ratio ridotto come uno a uno o sedici a nove, aspect_decimal come larghezza su altezza, megapixel approssimativi e una breve formula che riafferma il calcolo. La validazione fallita non viene addebitata; solo i calcoli di dimensione riusciti addebitano il prezzo base pubblicato $0.002 sul percorso API.
Dove un’API di dimensione raster SVG conviene
L’integrazione continua può affermare che l’intestazione di un PNG generato corrisponde alle dimensioni previste da questo endpoint per lo stesso viewBox e la stessa scala, intercettando regressioni quando un designer modifica solo il viewBox. Mantenga le richieste piccole, fissi width_px e height_px nei test e otterrà dimensioni di raster riproducibili per design system, script di build e documentazione senza erigere una propria catena di strumenti immagine.
Domande tecniche
Come si calcola la dimensione PNG da un viewBox SVG?
Invii viewbox_width e viewbox_height positivi (o una stringa viewBox), più scale opzionale (predefinito 1) o target_width. L’API restituisce width_px e height_px interi che preservano il rapporto d’aspetto.
Cosa succede se manca il viewBox?
L’attività fallisce con invalid_input. Deve fornire viewbox_width e viewbox_height, oppure una stringa di attributo viewBox a quattro numeri. Un viewBox mancante non viene mai indovinato.
Posso impostare scale e target_width insieme?
No. Scelga un fattore di scala uniforme oppure una larghezza PNG obiettivo. Inviarli entrambi restituisce invalid_input affinché la dimensione voluta sia non ambigua.
Quanto costa il calcolatore della dimensione di rasterizzazione SVG?
Lo strumento nel browser è gratuito. Le richieste API usano saldo KIT prepagato a $0.002 per chiamata riuscita; l’input non valido non viene addebitato.