SVG-Dateien bearbeiten: Tools, Code und Best Practices
Lernen Sie, wie Sie SVG-Dateien mit Design-Tools oder XML-Code bearbeiten, Farb- und viewBox-Probleme beheben und einen sauberen Workflow für die Produktion aufbauen.
SVG-Blog lesenSVG-Dateien kostenlos online skalieren. Ändern Sie Breite und Höhe, behalten Sie das Seitenverhältnis bei und laden Sie das skalierte SVG sofort herunter.
Willkommen beim SVG-Editor
SVG-Datei ziehen, auf "Hochladen"/"Icons" klicken oder Strg/Cmd+V zum Einfügen von SVG-Code verwenden
Mit einem Beispiel-Icon starten
Wählen Sie ein Beispiel unten oder laden Sie Ihr eigenes SVG hoch und bearbeiten Sie es.
Skalieren Sie SVG online, indem Sie exakte Breite und Höhe in Pixeln eingeben oder in Prozent skalieren. So treffen Sie Design-Vorgaben, Grid-Tokens oder die Größe eines exportierten PNG.
Mit gesperrtem Seitenverhältnis bleiben die Proportionen erhalten, sodass Icons, Logos und Illustrationen nie gestreckt wirken. Entsperren Sie es, wenn eine feste Boxgröße wichtiger ist als das Motiv darin.
Der viewBox bleibt erhalten und wird bei Bedarf aktualisiert, damit das skalierte SVG in CSS und HTML korrekt skaliert. Das verhindert Beschnitt, zusätzliche Abstände und Layoutsprünge.
Jede Änderung wirkt sofort, mit Zoom und Hintergrundoptionen, sodass Sie Abstände und Ausrichtung vor dem Export prüfen können. Ein kontrastierender Hintergrund macht lose Striche sichtbar.
Laden Sie das skalierte SVG herunter oder exportieren Sie ein PNG in einem Schritt. Behalten Sie beide Formate zusammen, wenn Sie eine Rasterversion für Dokumente, Folien oder Chat-Tools brauchen.
Der Resizer läuft vollständig in Ihrem Browser, SVG-Dateien verlassen Ihr Gerät also nie. Das schützt Kundenmaterial und vermeidet Upload-Wartezeiten bei großen Dateien.
Datei per Drag & Drop hinzufügen oder SVG-Markup einfügen. Der Resizer liest die Quelle lokal ein und behält den ursprünglichen viewBox. Fehlt der viewBox, ergänzen Sie ihn vor dem Skalieren.
Geben Sie Zielbreite und -höhe ein oder lassen Sie die Sperre aktiv und skalieren proportional. Die Live-Vorschau zeigt genau, wie das skalierte SVG aussehen wird.
Laden Sie das skalierte SVG herunter oder exportieren Sie sofort PNG. Bleiben Sie bei der Benennung, etwa icon-name-24.svg, damit Größenvarianten leicht zuzuordnen sind.
Verwenden Sie SVG-Resize mit diesen Tools, um zu rotieren, zu optimieren und konsistente Assets zu exportieren.
Passen Sie die Orientierung vor SVG-Resize an, damit die endgültigen Dimensionen Ihrem Layout entsprechen. Dies hält Breite und Höhe vorhersagbar nach der Rotation.
Tool öffnenKomprimieren Sie die Datei nach SVG-Resize, um die Ausgabe leicht zu halten. Kleinere Dateien laden schneller in Apps und Design-Tools.
Tool öffnenVorschau des Assets vor und nach SVG-Resize, um Ausrichtung zu verifizieren. Verwenden Sie Grid-Hintergründe, um Padding zu überprüfen.
Tool öffnenExportieren Sie PNGs neben SVG-Resize-Ergebnissen, wenn Sie Raster-Fallbacks benötigen. Dies ist praktisch für Präsentationen und Docs.
Tool öffnenLesen Sie praktische Beiträge zu SVG-Workflows, Fehlerbehebung und Produktion.
Lernen Sie, wie Sie SVG-Dateien mit Design-Tools oder XML-Code bearbeiten, Farb- und viewBox-Probleme beheben und einen sauberen Workflow für die Produktion aufbauen.
SVG-Blog lesenErfahren Sie, was SVG-Dateien sind, wann sie sinnvoll sind und wie Sie SVG sicher öffnen, erstellen, bearbeiten, optimieren und konvertieren.
SVG-Blog lesenEin wiederholbarer SVG-Workflow für Design-Systeme, damit Icons von Figma bis zur Produktion konsistent bleiben.
SVG-Blog lesen