ForHosting KIT · Bilder bearbeiten & analysieren

SVG-Rastergröße berechnen

Eine viewBox von 24×24 ergibt bei 2× ein PNG mit 48×48 Pixeln. Geben Sie die viewBox und einen Faktor oder eine Zielbreite ein und erhalten Sie ganze Pixelmaße, Seitenverhältnis und Megapixel. Es wird nur die Größe berechnet, kein Bild erzeugt. Kostenlos in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Rechenbeispiel

Wenn Sie eingeben

viewBox-Breite: 24
viewBox-Höhe: 24
Skala: 2

Erhalten Sie

Berechnungsmodus: scale
Breite (px): 48
Höhe (px): 48
Seitenverhältnis: 1:1

Bevor Sie ein SVG-Logo, -Icon oder -Illustration als PNG exportieren, müssen Sie wissen, wie viele Pixel die Rastergrafik bei der gewählten Skalierung oder Exportbreite einnimmt. Designer fügen oft eine viewBox von vierundzwanzig mal vierundzwanzig Benutzereinheiten ein und verlangen ein Retina-Bitmap in doppelter Auflösung; Build-Skripte brauchen dieselben Zahlen, ohne Browser oder Designwerkzeug zu öffnen. Dieser SVG-Rasterisierungsgrößen-Rechner akzeptiert Breite und Höhe der viewBox — oder eine vollständige viewBox-Attributzeichenkette — sowie einen einheitlichen Skalierungsfaktor oder eine Zielbreite in Pixeln. Er liefert ganzzahlige PNG-Breite und -Höhe unter Beibehaltung des Seitenverhältnisses, die effektive Skalierung, ein vereinfachtes Seitenverhältnis und ungefähre Megapixel.

Wie aus viewBox-Größe PNG-Pixel werden

Breite und Höhe sind die logische Größe des Motivs in Benutzereinheiten, nicht von sich aus CSS-Pixel. Wenn ein Renderer die Grafik zu einem Bitmap rasterisiert, bildet er dieses logische Rechteck auf ein Gerätepixelgitter ab. Bei Skalierung eins wird ein Icon von vierundzwanzig mal vierundzwanzig zu einem PNG von vierundzwanzig mal vierundzwanzig; bei Skalierung zwei erhalten Sie achtundvierzig mal achtundvierzig, den üblichen Retina-Export mit doppelter Auflösung.

Die Rundung nutzt die übliche Ganzzahlkonvertierung und liefert nie weniger als ein Pixel pro Achse, wenn die viewBox positiv ist, was Nullgrößen-Bitmaps aus winzigen Brüchen verhindert. Diese Fähigkeit führt nur diese Größenarithmetik aus. Sie parst kein vollständiges SVG-Markup, zeichnet keine Pfade und liefert keine Bildbytes — verwenden Sie einen eigenen SVG-zu-PNG-Rasterisierer, wenn Sie die Pixel selbst brauchen.

Hier erhalten Sie den Vertrag der Exportgröße, damit CI, Design-Tokens und Dokumentation exakte Maße festnageln, bevor ein teurer Render-Schritt läuft.

Wann sich die Exportgröße vorab lohnt

Icon-Systeme und Design-Token-Pipelines deklarieren oft einmal eine logische viewBox und exportieren viele PNG-Dichten: eins zu eins, zwei zu eins und drei zu eins für mobile Assets. Diese Pixelgrößen in einer winzigen reinen Funktion zu berechnen hält Export-Manifeste, README-Tabellen und CDN-Pfadnamen konsistent, ohne für jede Zeile einen Headless-Browser zu starten. Marketing-Seiten, die auf SVG-Rasterisierungsgröße oder viewBox zu PNG-Pixeln ranken, können das kostenlose Browser-Werkzeug einbetten, damit Besucher Exportgrößen prüfen, bevor sie einen bezahlten Konverter nutzen.

Continuous Integration kann behaupten, dass der Header eines erzeugten PNG den Maßen entspricht, die dieser Endpunkt für dieselbe viewBox und Skalierung vorhersagt, und so Regressionen fangen, wenn ein Designer nur die viewBox ändert. Accessibility- und Layout-Prüfer nutzen die Megapixel- und Aspect-Felder, um riesige Bitmaps zu markieren, die E-Mails oder mobile Bündel aufblähen würden.

Anwendungsfälle

Retina- und Multi-Dichte-Icon-Exporte

Aus einer 24×24-viewBox berechnen Sie 1×-, 2×- und 3×-PNG-Pixelgrößen für App-Icons und Design-Token-Tabellen, ohne ein Designwerkzeug zu öffnen.

CI-Prüfungen gegen erzeugte PNG-Header

Stellen Sie sicher, dass PNG-Breite und -Höhe einer Pipeline den für dieselbe viewBox und Skalierung vorhergesagten Maßen entsprechen, bevor Assets ausgeliefert werden.

Exportbreiten-Planung für Marketing-Grafiken

Bei gegebener Zielbreite in Pixeln leiten Sie die passende Höhe aus dem Seitenverhältnis der SVG-viewBox ab, bevor ein vollständiges SVG-zu-PNG-Rendering läuft.

Häufige Fragen

Liefert dies eine PNG-Datei?

Nein. Es berechnet nur Pixelmaße. Verwenden Sie einen separaten SVG-zu-PNG-Rasterisierer, wenn Sie Bildbytes brauchen; nutzen Sie dieses Werkzeug zuerst zum Planen oder Prüfen von Größen.

Wie groß wird ein Icon mit 24×24 bei 2× für Retina-Bildschirme?

Es wird 48 mal 48 Pixel groß. Beide Seiten der viewBox werden mit demselben Faktor multipliziert und auf ganze Pixel gerundet, bei 1× bleibt das PNG also 24 mal 24 Pixel.

Wie wird die Höhe berechnet, wenn ich nur die Breite festlege?

Ihre Zielbreite wird durch die Breite der viewBox geteilt, das ergibt den tatsächlichen Faktor. Damit wird die Höhe der viewBox multipliziert und gerundet, sodass das Bild seine Proportionen behält.

Kann ich Faktor und Zielbreite gleichzeitig angeben?

Nein, wählen Sie eines von beiden. Die zwei Arten der Größenangabe könnten sich widersprechen, deshalb lehnt der Rechner die Kombination ab. Ohne Angabe gilt der Faktor 1 und Sie erhalten die Größe der viewBox.

Welche Zahlen der viewBox bestimmen die PNG-Größe?

Nur die letzten beiden. Eine viewBox hat vier Zahlen: den Startpunkt links und oben, dann Breite und Höhe der Grafik. Sie können die ganze viewBox einfügen, sie hat Vorrang vor einzelnen Werten.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

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

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem 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)

Beispiel-Anfrage

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

Beispiel-Antwort

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

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`max_mb`	15
`max_megapixels`	12

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Technische Hinweise

Fehlende viewBox-Maße scheitern mit einem klaren invalid_input-Fehler, damit Automatisierung nie eine Größe erfindet.

Wie aus viewBox-Größe PNG-Pixel werden

Eine SVG-viewBox deklariert ein rechteckiges Koordinatensystem mit vier Zahlen: minX, minY, width und height. Die einfachste Abbildung multipliziert beide Achsen mit demselben Skalierungsfaktor: width_px ist die Rundung von viewbox_width mal scale, und height_px ist die Rundung von viewbox_height mal scale. Alternativ können Sie nur die Ausgabe-Breite in Pixeln festlegen und die Höhe dem Seitenverhältnis folgen lassen: die effektive Skalierung ist target_width geteilt durch viewbox_width, dann ist height_px das gerundete Produkt aus viewbox_height und dieser Skalierung.

Eingabevertrag, Modi und Fehlerverhalten

Nicht positive viewBox-Achsen, nicht positive Skalierung und nicht positive Zielbreite scheitern ebenfalls, und eine völlig fehlende viewBox — weder Zeichenkette noch beide numerischen Maße — scheitert mit einer Meldung, die die fehlende viewBox nennt. Numerische Zeichenketten sind für alle Skalarfelder zulässig, sodass Formular-Posts und CLI-Wrapper keinen eigenen Zahlentyp brauchen. Senden Sie ein JSON-Objekt mit viewbox_width und viewbox_height als endliche positive Zahlen, oder fügen Sie eine viewBox-Attributzeichenkette wie null null vierundzwanzig vierundzwanzig im Feld viewbox ein; die Zeichenkettenform überschreibt getrennte Breite und Höhe, wenn beides vorhanden ist. Optional setzen Sie scale als einheitlichen Faktor oder target_width als gewünschte PNG-Breite in Pixeln. Fehlen sowohl scale als auch target_width, ist die Skalierung standardmäßig eins, sodass eine Eins-zu-eins-Rastergröße weiterhin berechenbar ist. Beides zugleich wird mit invalid_input abgelehnt, weil die beiden Modi über die beabsichtigte Größe uneinig wären. Erfolgreiche Antworten spiegeln bereinigte viewbox_width und viewbox_height, die effektive Skalierung (einschließlich der abgeleiteten, wenn Sie target_width gewählt haben), eine mode-Zeichenkette scale oder target_width, ganzzahlige width_px und height_px, ein reduziertes aspect_ratio wie eins zu eins oder sechzehn zu neun, aspect_decimal als Breite geteilt durch Höhe, ungefähre Megapixel und eine kurze Formel, die die Rechnung restatiert. Fehlgeschlagene Validierung wird nicht berechnet; nur erfolgreiche Größenberechnungen belasten den veröffentlichten Basispreis $0.002 auf dem API-Pfad.

Wo eine SVG-Rastergrößen-API sich lohnt

Halten Sie Anfragen klein, pinnen Sie width_px und height_px in Tests, und Sie erhalten reproduzierbare Rastermaße für Designsysteme, Build-Skripte und Dokumentation, ohne eine eigene Bildwerkzeugkette aufzubauen.

Technische Fragen

Wie berechne ich die PNG-Größe aus einer SVG-viewBox?

Senden Sie positive viewbox_width und viewbox_height (oder eine viewBox-Zeichenkette) sowie optional scale (Standard 1) oder target_width. Die API liefert ganzzahlige width_px und height_px unter Beibehaltung des Seitenverhältnisses.

Was passiert, wenn die viewBox fehlt?

Die Aufgabe scheitert mit invalid_input. Sie müssen viewbox_width und viewbox_height oder eine vierteilige viewBox-Attributzeichenkette angeben. Eine fehlende viewBox wird nie geraten.

Kann ich scale und target_width zugleich setzen?

Nein. Wählen Sie entweder einen einheitlichen Skalierungsfaktor oder eine Ziel-PNG-Breite. Beides zusammen liefert invalid_input, damit die beabsichtigte Größe eindeutig bleibt.

Was kostet der SVG-Rasterisierungsgrößen-Rechner?

Das Browser-Werkzeug ist kostenlos. API-Anfragen nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingabe wird nicht berechnet.

Vollständige KIT-Dokumentation lesen →

SVG-Rastergröße berechnen

Im Browser ausführen – kostenlos

Rechenbeispiel

Wie aus viewBox-Größe PNG-Pixel werden

Wann sich die Exportgröße vorab lohnt

Anwendungsfälle

Retina- und Multi-Dichte-Icon-Exporte

CI-Prüfungen gegen erzeugte PNG-Header

Exportbreiten-Planung für Marketing-Grafiken

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Limits

Fehler

Technische Hinweise

Wie aus viewBox-Größe PNG-Pixel werden

Eingabevertrag, Modi und Fehlerverhalten

Wo eine SVG-Rastergrößen-API sich lohnt

Technische Fragen

danke