SVG in PNG mit exakten Pixelmaßen konvertieren
Rasterisieren Sie Icons und Illustrationen für Folien, Legacy-CMS und Mailclients ohne SVG — lokal verarbeitet bei vertraulichen Pfaddaten.
Weitere Utilities, die gut zu dieser Anleitung passen:
Warum das wichtig ist
Mailclients blockieren Inline-SVG aus Sicherheitsgründen. Alte Enterprise-Portale akzeptieren nur PNG-Thumbnails für Partnerlogos. Folien werden schwerfällig, wenn Riesen-SVGs eingefügt werden — Rasterisierung auf 2×-Assetgrößen hält Animationen flüssig und garantiert Kompatibilität. Lokale Konvertierung hilft, wenn Brand-Kits NDAs für noch nicht veröffentlichte Icon-Sets haben.
Drei echte Szenarien
512- und 1024-px-Quadrate mit transparentem Hintergrund für uneinheitliche Implementierungen exportieren.
Vorhersagbare Farben
WebP/AVIF primär, PNG-Fallback aus demselben SVG-Master dimensioniert.
Progressive Enhancement
Aus Figma exportierte Charts rasterisieren, damit Kolleginnen ohne Vektor-Tools Layouts bearbeiten können.
Office-taugliche Assets
Schritt für Schritt
Öffnen Sie SVG zu PNG.
`.svg`-Datei hochladen oder Markup einfügen
Inline-SVG aus der Zwischenablage, wenn das Tempfile vermeiden will — auf große eingebettete
<image>-Payloads achten.Ausgabe-Breite/-Höhe setzen
CSS-Pixel mit
devicePixelRatiomultiplizieren für scharfe Retina-PNGs.Hintergrundbehandlung wählen
Transparent hält Icons lesbar; Vollfarbe hilft, wenn Zielviewer weiße Leinwand unterstellen.
Raster-Vorschau prüfen
Kantenglättung an diagonalen Strichen — Auflösung erhöhen bei Moiré an dünnen Linien.
PNG laden
Dateinamen versionieren (
logo@2x.png), damit Build-Pipelines gezielt Cache busten.
Profi-Tipps
- Wo CSP es erlaubt, SVG im modernen Web bevorzugen — PNG bleibt die Kompatibilitäts-Fallschirm.
- Filter beachten: exotische SVG-Filter rasterisieren engineabhängig — in Zielbrowsern verifizieren.
- ICO-Pipeline: Ausgaben mit SVG zu ICO für Favicons bündeln.
Typische Stolpersteine
Stolperstein
Eingebettete Schriften fehlen
Text im Design-Tool in Pfade umwandeln, wenn Remote-Fonts beim Rasterisieren fehlen.
Stolperstein
Riesige SVG-Performance
Komplexe Pfade können Tabs einfrieren — Geometrie vereinfachen oder Layer splitten vor Konvertierung großer Illustrationen.
Stolperstein
Farbraum-Verschiebung
CMYK-Exporte gehören in Print-Pipelines — Browser-Rasterisierung zielt standardmäßig auf RGB-Displays.
Wann dieses Tool nicht passt
- Headless-CI-Exports:
resvg/sharpskripten für deterministische Builds in Linux-Containern. - Multi-Density-Sprite-Sheets: Texture-Packer organisieren Padding und Bin Packing besser.
- Animiertes SVG (SMIL/CSS): Bildfolgen mit spezialisiertem Video-Tool erfassen.
FAQ
Wird bei der Konvertierung hochgeladen?
Verarbeitung bleibt lokal — wichtig, wenn SVG proprietäre Pfaddaten enthält.
Kann ich schnell `@1x` und `@2x` exportieren?
Zwei Läufe mit verdoppelten Maßen — Dateinamen sofort notieren, um Cache-Kollisionen zu vermeiden.
Warum ist PNG größer als SVG?
Fotografische Verläufe explodieren als Raster — geometrische Grafik möglichst als Vektor behalten.
Nächste Schritte
- PNG-Ausgaben mit dem Bildkompressor komprimieren.
- Leerraum per Bild zuschneiden entfernen.
- Nach Layout-Anpassungen mit Bild zu PDF stapelweise PDFs erzeugen.