ForHosting KIT · Images

Taille de rastérisation SVG

Une viewBox de 24×24 exportée à 2× donne un PNG de 48×48. Indiquez la viewBox et une échelle ou une largeur cible pour obtenir les dimensions en pixels entiers, le rapport d'aspect et les mégapixels. L'outil calcule la taille, il ne dessine pas l'image. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

Largeur du viewBox: 24
Hauteur du viewBox: 24
Échelle: 2

Vous obtenez

Mode de calcul: scale
Largeur (px): 48
Hauteur (px): 48
Rapport d'aspect: 1:1

Avant d’exporter un logo, une icône ou une illustration SVG en PNG, vous devez savoir combien de pixels le bitmap occupera à l’échelle ou à la largeur d’export choisie. Les designers collent souvent un viewBox de vingt-quatre par vingt-quatre unités utilisateur et demandent un bitmap rétina en double résolution ; les scripts de build ont besoin des mêmes chiffres sans ouvrir un navigateur ni un outil de conception. Ce calculateur de taille de rastérisation SVG accepte la largeur et la hauteur du viewBox — ou une chaîne complète d’attribut viewBox — ainsi qu’un facteur d’échelle uniforme ou une largeur cible en pixels. Il renvoie la largeur et la hauteur PNG entières qui préservent le ratio d’aspect, l’échelle effective, un ratio simplifié et des mégapixels approximatifs.

Comment la taille du viewBox devient des pixels PNG

La largeur et la hauteur sont la taille logique de l’œuvre en unités utilisateur, pas des pixels CSS à elles seules. Lorsqu’un moteur rastérise le graphique en bitmap, il projette ce rectangle logique sur une grille de pixels d’appareil. À l’échelle un, une icône vingt-quatre par vingt-quatre devient un PNG vingt-quatre par vingt-quatre ; à l’échelle deux vous obtenez quarante-huit par quarante-huit, l’export rétina classique en double résolution.

L’arrondi utilise une conversion entière classique et ne renvoie jamais moins d’un pixel sur chaque axe lorsque le viewBox est positif, ce qui évite les bitmaps de taille nulle dus à de minuscules fractions. Cette capacité n’effectue que cette arithmétique de taille. Elle n’analyse pas le markup SVG complet, ne dessine pas de chemins et ne renvoie pas d’octets d’image — utilisez un rastériseur SVG vers PNG dédié lorsque vous avez besoin des pixels eux-mêmes.

Vous obtenez ici le contrat de la taille d’export afin que l’intégration continue, les design tokens et la documentation fixent des dimensions exactes avant toute étape de rendu coûteuse.

Quand connaître la taille d'export à l'avance

Les systèmes d’icônes et les pipelines de design tokens déclarent souvent un viewBox logique une fois et exportent plusieurs densités PNG : un pour un, deux pour un et trois pour un pour les assets mobiles. Calculer ces tailles en pixels dans une petite fonction pure maintient la cohérence des manifests d’export, des tableaux README et des noms de chemin CDN sans lancer un navigateur headless pour chaque ligne.

Les sites marketing qui se positionnent sur la taille de rastérisation SVG ou viewBox vers pixels PNG peuvent intégrer l’outil gratuit du navigateur pour que les visiteurs vérifient les tailles d’export avant un convertisseur payant. L’intégration continue peut affirmer que l’en-tête d’un PNG généré correspond aux dimensions prédites par ce point de terminaison pour le même viewBox et la même échelle, détectant les régressions lorsqu’un designer ne change que le viewBox.

Les relecteurs d’accessibilité et de mise en page utilisent les champs mégapixels et aspect pour signaler d’énormes bitmaps qui alourdiraient les e-mails ou les paquets mobiles.

Cas d’usage

Exports d’icônes rétina et multi-densité

À partir d’un viewBox 24×24, calculez les tailles PNG en 1×, 2× et 3× pour les icônes d’application et les tables de design tokens sans ouvrir un outil de conception.

Contrôles CI sur les en-têtes PNG générés

Vérifiez que la largeur et la hauteur PNG d’un pipeline correspondent aux dimensions prédites pour le même viewBox et la même échelle avant de publier les assets.

Planification de la largeur d’export pour l’art marketing

Étant donné une largeur cible en pixels, déduisez la hauteur correspondante à partir du ratio d’aspect du viewBox SVG avant un rendu SVG vers PNG complet.

Questions fréquentes

Cela renvoie-t-il un fichier PNG ?

Non. Cela calcule uniquement des dimensions en pixels. Utilisez un rastériseur SVG vers PNG séparé lorsque vous avez besoin d’octets d’image ; utilisez cet outil pour planifier ou vérifier les tailles d’abord.

Quelle taille fait en PNG une icône de 24×24 à 2× pour un écran Retina ?

Elle passe à 48 sur 48 pixels. Les deux côtés de la viewBox sont multipliés par la même échelle puis arrondis au pixel entier : à 1×, le PNG reste donc à 24 sur 24.

Comment la hauteur est-elle calculée si je fixe seulement la largeur ?

Votre largeur cible est divisée par la largeur de la viewBox pour obtenir l'échelle effective, puis la hauteur de la viewBox est multipliée par cette échelle et arrondie. L'image garde ses proportions.

Puis-je donner une échelle et une largeur cible en même temps ?

Non, choisissez l'une ou l'autre. Les deux façons de dimensionner pourraient se contredire, le calculateur refuse donc la combinaison. Sans aucune des deux, il applique une échelle de 1 et renvoie la taille de la viewBox telle quelle.

Quels nombres de la viewBox déterminent la taille du PNG ?

Seulement les deux derniers. Une viewBox compte quatre nombres : le point de départ à gauche et en haut, puis la largeur et la hauteur du dessin. Vous pouvez coller la viewBox complète, elle l'emporte sur les valeurs séparées.

Outils associés

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/image/svg-to-png-size

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre 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)

Exemple de requête

{
  "viewbox_width": 24,
  "viewbox_height": 24
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.svg_to_png_size",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

`max_mb`	15
`max_megapixels`	12

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Notes techniques

Des dimensions de viewBox manquantes échouent avec une erreur invalid_input claire afin que l’automatisation n’invente jamais une taille.

Comment la taille du viewBox devient des pixels PNG

Un viewBox SVG déclare un système de coordonnées rectangulaire en quatre nombres : minX, minY, width et height. Le mapping le plus simple multiplie les deux axes par le même facteur d’échelle : width_px est l’arrondi de viewbox_width multiplié par scale, et height_px est l’arrondi de viewbox_height multiplié par scale. Vous pouvez aussi fixer uniquement la largeur de sortie en pixels et laisser la hauteur suivre le ratio d’aspect : l’échelle effective vaut target_width divisé par viewbox_width, puis height_px est le produit arrondi de viewbox_height par cette échelle.

Contrat d’entrée, modes et comportement d’erreur

Des axes de viewBox non positifs, une échelle non positive et une largeur cible non positive échouent aussi, et un viewBox totalement absent — ni chaîne ni les deux dimensions numériques — échoue avec un message qui nomme le viewBox manquant. Les chaînes numériques sont acceptées pour tous les champs scalaires afin que les formulaires et les wrappers CLI n’aient pas besoin d’un type numérique distinct. Envoyez un objet JSON avec viewbox_width et viewbox_height comme nombres finis positifs, ou collez une chaîne d’attribut viewBox du type zéro zéro vingt-quatre vingt-quatre dans le champ viewbox ; la forme chaîne prévaut sur la largeur et la hauteur séparées lorsque les deux sont présentes. Définissez éventuellement scale comme facteur uniforme, ou target_width comme largeur PNG souhaitée en pixels. Si ni scale ni target_width ne sont fournis, l’échelle vaut un par défaut, de sorte qu’une taille de rastérisation un pour un reste calculable. Fournir scale et target_width ensemble est rejeté avec invalid_input car les deux modes ne s’accorderaient pas sur la taille voulue. Les réponses réussies renvoient viewbox_width et viewbox_height nettoyés, l’échelle effective (y compris celle dérivée si vous avez choisi target_width), une chaîne mode de scale ou target_width, width_px et height_px entiers, un aspect_ratio réduit comme un pour un ou seize pour neuf, aspect_decimal comme largeur sur hauteur, des mégapixels approximatifs et une courte formule qui reformule le calcul. L’échec de validation n’est pas facturé ; seuls les calculs de taille réussis facturent le prix de base publié $0.002 sur le chemin API.

Où une API de taille de raster SVG se justifie

Gardez les requêtes petites, épinglez width_px et height_px dans les tests, et vous obtenez des dimensions de raster reproductibles pour les design systems, les scripts de build et la documentation sans monter votre propre outillage d’image.

Questions techniques

Comment calculer la taille PNG à partir d’un viewBox SVG ?

Envoyez viewbox_width et viewbox_height positifs (ou une chaîne viewBox), plus scale optionnel (valeur par défaut 1) ou target_width. L’API renvoie width_px et height_px entiers qui préservent le ratio d’aspect.

Que se passe-t-il si le viewBox est manquant ?

La tâche échoue avec invalid_input. Vous devez fournir viewbox_width et viewbox_height, ou une chaîne d’attribut viewBox à quatre nombres. Un viewBox manquant n’est jamais deviné.

Puis-je définir scale et target_width ensemble ?

Non. Choisissez un facteur d’échelle uniforme ou une largeur PNG cible. Envoyer les deux renvoie invalid_input afin que la taille voulue soit non ambiguë.

Combien coûte le calculateur de taille de rastérisation SVG ?

L’outil navigateur est gratuit. Les requêtes API utilisent le solde KIT prépayé à $0.002 par appel réussi ; une entrée invalide n’est pas facturée.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Comment la taille du viewBox devient des pixels PNG

Quand connaître la taille d'export à l'avance

Cas d’usage

Exports d’icônes rétina et multi-densité

Contrôles CI sur les en-têtes PNG générés

Planification de la largeur d’export pour l’art marketing

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Limites

Erreurs

Notes techniques

Comment la taille du viewBox devient des pixels PNG

Contrat d’entrée, modes et comportement d’erreur

Où une API de taille de raster SVG se justifie

Questions techniques

merci