SVG in Penpot: Bearbeitbare Formen ins Design holen

Um ein SVG in Penpot zu importieren, öffne eine Designdatei und ziehe die .svg auf ihre Zeichenfläche oder wähle das Bildwerkzeug der Werkzeugleiste zur Dateiauswahl. Der Dashboard-Befehl Import files ist für Penpot-Projektdateien vorgesehen. Wenn du ein Icon platzieren möchtest, beginne innerhalb des Designs. Penpots Hinweise zum Einfügen von Ebenen und Dokumentation zum Projektimport beschreiben diese getrennten Wege.

Prüfe nach dem Erscheinen der Grafik, ob du eine Farbregion ändern und eine Kontur bearbeiten kannst. Ein Icon kann korrekt aussehen und trotzdem umständlich zu ändern sein. Wenn die Quelle bereits eine Vektorgrafik ist, repariere oder exportiere sie bei Bedarf erneut. Zeichne ein PNG oder JPG nur nach, wenn du Formen aus Pixeln wiederherstellen musst.

Prüfe den Import vor der Wiederverwendung

Behalte das Original-SVG, importiere ein repräsentatives Icon und arbeite an einem Duplikat. Teste Aussehen, eine Füllung, eine Kurve und jeden bearbeitbaren Text. Exportiere ein separates SVG und vergleiche es mit dem Original, bevor du den Workflow für ein ganzes Kit wiederholst.

Beginne auf der Zeichenfläche und prüfe dann die Ebenen

Öffne die Penpot-Datei, in die die Grafik gehört. Füge das gespeicherte SVG in einen leeren Bereich ein, damit du es getrennt vom übrigen Design untersuchen kannst. Scheitert das Ziehen, nutze die Dateiauswahl des Bildwerkzeugs, um Drag-and-drop-Verhalten aus der Diagnose auszuschließen.

Wähle die importierte Grafik aus und klappe ihren Eintrag im Layers-Bereich auf. Eine Gruppe ist nützliche Organisation, kein Beleg dafür, dass das SVG zur Bitmap wurde. Du kannst ein Kindobjekt im Bereich auswählen oder in eine Gruppe doppelklicken; Penpot unterstützt auch tiefe Auswahl mit Strg-Klick oder Command-Klick. Diese Steuerungen behandelt der Leitfaden zur Ebenenauswahl.

Unterschiedliche SVG-Inhalte können zu unterschiedlichen Objekttypen werden. In Penpots veröffentlichtem Importer haben übliche Formen wie Pfade, Rechtecke und Ellipsen Handler für native Formen; andere Elemente können als rohes SVG erhalten bleiben. Der Importer behandelt Bildelemente ebenfalls separat. Deshalb belegt der Dateiname allein nicht, wie sich jeder Teil bearbeiten lässt. Siehe den SVG-Formimporter.

Vermeide es, zu Beginn alle Gruppierungen aufzuheben oder alles zusammenzufassen. Bestimme zuerst den Teil, den du ändern möchtest. Behalte die Gruppe, wenn ihre Kindobjekte bereits die benötigte Kontrolle geben.

Teste eine Füllung und eine Kurve

Verwende ein kleines Icon mit sichtbar getrennten Teilen. Eine Pflanze im Topf ist ein nützliches Beispiel: Der Topf sollte eine andere Farbe annehmen können, ohne die Blätter zu ändern, und ein Blatt sollte bearbeitbar sein, ohne die ganze Pflanze zu verzerren.

Auf einem Duplikat des importierten Icons:

1. Wähle die Topfebene und ändere ihre Füllung zu einer kontrastierenden Farbe. Prüfe, dass sich nur die gewünschte Region ändert.
2. Wähle einen Blattpfad. Drücke Enter zum Bearbeiten seiner Knoten, verschiebe einen Punkt leicht und mache die Änderung rückgängig. Penpot dokumentiert das in seinen Anweisungen zur Knotenbearbeitung.
3. Vergleiche das Duplikat mit dem unveränderten Import. Bestätige, dass ursprüngliche Silhouette, kleine Zwischenräume und Konturstärke nach dem Rückgängigmachen des Tests erhalten bleiben.

Ändern sich Topf und Blätter gemeinsam, prüfe Auswahl und Quellstruktur. Du hast möglicherweise die äußere Gruppe ausgewählt, oder die Quelle kombiniert mehrere Regionen in einem Pfad. Eine erfolgreiche Farbänderung beweist nicht, dass jede Kontur ein separater nativer Pfad ist.

Rohes SVG ist eine weitere Möglichkeit. Penpot hat dafür einen separaten Optionsbereich mit Darstellungssteuerungen für unterstützte Elemente. Füllungs- oder Kontursteuerungen garantieren daher keine gewöhnliche Knotenbearbeitung. Wenn sich der Teil nicht wie benötigt bearbeiten lässt, vereinfache oder zeichne ihn im Quelleditor neu und importiere eine neue Kopie. Der Unterschied ist in Penpots Implementierung der Optionen für rohes SVG sichtbar.

Diagnostiziere das Symptom vor Dateiänderungen

Nutze das unveränderte SVG als Referenz. Öffne es in einem Browser und vergleiche diese Darstellung mit dem Penpot-Import. Sieht es bereits im Browser falsch aus, kehre zum Quellexport zurück, bevor du die Penpot-Kopie reparierst.

Fehlende Konturen und unsichtbare Grafik

Prüfe Füllungs- und Kontureinstellungen der ausgewählten Ebene, bevor du sie löschst. Penpot bietet Konturfarbe, Deckkraft, Breite, Stil und Sichtbarkeit sowie Endkappensteuerungen für offene Pfade. Ein kurzer Konturstrich kann mit einer anderen Endkappe deutlich anders aussehen. Vergleiche daher die Form, statt anzunehmen, dass die Linie fehlt. Die verfügbaren Steuerungen beschreibt Farbe und Konturen.

Prüfe bei einem unsichtbaren Objekt auch ausgeblendete Ebenen und Beschneidung. Rendert der Browser die Quelle korrekt, Penpot aber nicht, isoliere das fehlerhafte Element in einer Quellkopie. Exportiere das einfachere Muster erneut und vergleiche wieder. Damit erhältst du eine konkrete Datei und ein konkretes Symptom zur Untersuchung, statt mehrere Einstellungen gleichzeitig zu ändern.

Entferne nicht jedes style, jede Maske oder Definition, nur weil ein älterer Workaround das empfiehlt. Diese Elemente können Darstellungsinformationen tragen. Ist die Konturkonstruktion der Quelle das Problem, folge der ausführlicheren Diagnose fehlender SVG-Konturen und behalte ein bearbeitbares Original, bevor du Konturen in Flächen umwandelst.

Text, der richtig aussieht, aber nicht bearbeitbar ist

Versuche bei einer Buttonbeschriftung, ein Wort zu ändern. Entscheide bei einem Logo, ob der Erhalt der Buchstabenformen reicht. Das sind unterschiedliche Anforderungen.

Importierte Schrift kann bereits aus Pfaden bestehen oder als SVG-Inhalt statt als native Textebene erhalten bleiben. Gehe nicht davon aus, dass jedes importierte SVG-Textelement bearbeitbarer Penpot-Text wird. Muss sich der Wortlaut regelmäßig ändern, erstelle ihn mit Penpots Textwerkzeug neu, wähle die gewünschte Schrift und vergleiche Abstände und Zeilenumbrüche. Penpots Textleitfaden erklärt das Erstellen von Textebenen und Bearbeiten ihres Inhalts.

Wenn Buchstaben ihre Form ändern oder anders umbrechen, nutze den Leitfaden zur SVG-Schriftdiagnose. Behalte eine Kopie mit bearbeitbarem Text, auch wenn eine Ausgabeversion Schrift in Pfaden benötigt.

Wann PerfectVector zum Workflow gehört

PerfectVector ist nützlich, wenn du ein Raster-Icon oder eine Rasterillustration hast und bearbeitbare Konturen in Penpot benötigst. Konvertiere das PNG oder JPG in SVG-Pfade, prüfe Silhouette und Farbregionen, importiere das Ergebnis und führe den Test mit einer Füllung und einer Kurve durch. Die Nachzeichnung muss weiterhin an der gewünschten Grafik gemessen werden.

Ein Rasterbild in einem SVG bekommt keine bearbeitbaren Blatt- oder Topfkonturen, nur weil sein Container geändert wurde. Penpots Importer hat einen separaten Bildhandler; er wandelt dieses Bild nicht in die nativen Pfadobjekte um, die an anderer Stelle im Importercode verarbeitet werden.

Verwende den ursprünglichen Vektorexport, wenn du ihn hast. Bei einem einfachen Oberflächensymbol kann das Zeichnen mit Penpots nativen Formen gezielter gestaltete Geometrie liefern als Nachzeichnen. Behalte Fotos und stark texturierte Grafiken als Bilder, wenn ihre Pixel Teil des Designs sind. Die Erklärung zur Bildvektorisierung behandelt, was Nachzeichnen wiederherstellen kann und was es verändert.

Exportiere ein Muster vor dem Kitaufbau

Behalte das Arbeitsdesign in Penpot und exportiere ein separates Ausgabe-SVG. Wähle das Icon oder sein Board, füge mit dem Plusbutton im Export-Abschnitt des Design-Bereichs eine Exportvorgabe hinzu und wähle SVG. Penpot dokumentiert das unter Ebenen exportieren.

Öffne die exportierte Datei im Browser. Vergleiche Farben, Konturen, Textaussehen, Zuschnitt und Leerraum mit der Referenz. Muss die Datei zurück in einen Designeditor, importiere diesen Export in einen separaten Bereich und wiederhole den Bearbeitungstest. Korrektes Aussehen und nützliche Bearbeitungsstruktur brauchen jeweils eine Prüfung.

Bestätige vor dem Hinzufügen zum größeren Kit:

• Die Regionen, die separate Farben benötigen, lassen sich unabhängig auswählen.
• Die Konturen, die du umformen möchtest, bieten brauchbare Bearbeitungssteuerungen.
• Bearbeitbare Beschriftungen bleiben im Arbeitsdesign Text.
• Das exportierte Icon hat die gewünschten Grenzen und Abstände.
• Das Icon bleibt in seiner tatsächlichen Oberflächengröße klar erkennbar.

Wende dann dieselben Prüfungen auf den ganzen Satz an. Der Workflow von PNG-Icons zu einem SVG-UI-Kit ergänzt gemeinsame Raster, optische Größenabstimmung und Benennungsregeln, sobald die einzelnen Importe stimmen.

FAQ

Warum lehnt Penpots Dialog Import files mein SVG ab? Dieser Dialog importiert Penpot-Projektdateien. Öffne zum Platzieren einer SVG-Grafik eine Designdatei und verwende das Bildwerkzeug oder ziehe das SVG auf die Zeichenfläche.

Macht SVG-Import jeden Teil bearbeitbar? Übliche Vektorformen können native Penpot-Objekte werden, aber andere Inhalte können rohes SVG oder Bilder bleiben. Teste die konkrete Füllungs-, Kurven- oder Textänderung, die du benötigst, bevor du die Grafik wiederverwendest.

Muss ich die Gruppierung eines importierten SVGs aufheben? Nur wenn die Änderung der Gruppenstruktur deiner Aufgabe hilft. Versuche zuerst, im Layers-Bereich ein Kindobjekt auszuwählen. Eine nützliche Gruppe zu behalten verhindert nicht die Bearbeitung ihrer auswählbaren Kindobjekte.

Sollte ich ein SVG vektorisieren, das falsch importiert wird? Beginne mit Reparatur oder erneutem Export der bestehenden Vektorgrafik. Vektorisierung ist nützlich, wenn die verfügbare Grafik rasterbasiert ist und du Pfade brauchst; sie ist kein allgemeiner Reparaturschritt für ein bestehendes SVG.

Quellen

1. Penpot: Ebenen — Grafik einfügen, Kindobjekte auswählen und Pfadknoten bearbeiten.
2. Penpot: Penpot-Dateien exportieren und importieren — Nativer Projektimport, getrennt vom Einfügen von Grafik auf der Zeichenfläche.
3. Penpot: SVG-Formimporter — Separate Behandlung nativer Formen, Bilder und roher SVG-Inhalte in einer veröffentlichten Version.
4. Penpot: Optionen für rohes SVG — Darstellungssteuerungen allein belegen keine native Pfadbearbeitbarkeit.
5. Penpot: Farbe und Konturen — Füllungs-, Kontur- und Endkappensteuerungen für die Diagnoseprüfungen.
6. Penpot: Text und Typografie — Native Textebenen erstellen und ihre Inhalte bearbeiten.
7. Penpot: Ebenen exportieren — Eine SVG-Exportvorgabe für Ebene oder Board hinzufügen.

---

Wenn deine Quelle ein PNG oder JPG ist und du bearbeitbare Formen brauchst, bereite mit PerfectVector ein SVG vor. Importiere es in Penpot, ändere eine Füllung und teste eine Kurve, bevor du die Grafik in dein Designkit übernimmst.