Wie Sie Ihre SVG-Dateien in Figma, Canva oder WordPress importieren und bearbeiten

Sie haben die SVG. Und nun?

Die meisten Konverter hören beim Download-Button auf. Aber die Datei ist nutzlos, wenn sie im Download-Ordner verbleibt. Ein Designer öffnet sie in Figma, um die CI anzuwenden. Ein Community-Manager fügt sie in Canva für einen Beitrag ein. Ein Webentwickler fügt sie als Header-Logo in WordPress ein. Dieser nächste Schritt beweist, dass PixelToPath in einen echten Workflow passt, nicht nur in eine Demo.

Eine PixelToPath-SVG ist kein statisches Bild. Es ist eine Sammlung von Pfaden: Jede Form hat eine Füllung und eventuell eine Kontur. Das Blau des Logos in Bordeaux ändern, das Icon isolieren, für eine 1080x1920-Story vergrößern: All das geschieht in dem Tool, das Sie bereits nutzen, ohne den Umweg über Illustrator.

Warum Figma, Canva und WordPress dieses Format lieben

PNG und JPG sind nach dem Importieren Bitmaps. Ein PNG-Logo in Figma umzufärben, bedeutet, eine Ebene darüberzulegen, nicht die Pfadfarbe zu ändern. Canva bietet keine Farbkreise an. WordPress liefert eine schwere Datei, die auf Retina-Displays unscharf ist. Die SVG löst alle drei Probleme auf einmal.

Konkret bietet Ihnen eine SVG aus PixelToPath:

• Bearbeitbare Pfade: Eine Farbe pro Form, änderbar in Figma (Füllung) oder Canva (Farbkreise)
• Eine leichte Datei, weit unter der 3-MB-Grenze von Canva und schneller auf einer WordPress-Seite geladen als ein @2x-PNG
• Identische Schärfe als Favicon, LinkedIn-Banner oder Roll-up: nur eine Datei
• Ein Lieferobjekt, das Sie dem Kunden senden können: Er öffnet es in seinem Tool, nicht in der Creative Cloud

Figma: SVG importieren und Farben ändern

Figma importiert eine SVG als Gruppe von Vektoren, nicht als Foto. Das ist der ganze Sinn: Jede Form bleibt eine Ebene, die Sie umfärben, verschieben oder ausblenden können.

1. Laden Sie die .svg von PixelToPath herunter und öffnen Sie Ihre Figma-Datei.
2. Ziehen Sie die Datei aus dem Dateimanager direkt auf die Arbeitsfläche. Alternativ: Datei → Platzieren (Place image) oder Strg+Umschalt+K (Cmd+Umschalt+K auf Mac), um die SVG einzufügen.
3. Die Ebene erscheint als Gruppe. Doppelklicken Sie darauf, um sie zu bearbeiten, oder Rechtsklick → Gruppierung aufheben (Umschalt+Strg+G / Umschalt+Cmd+G), wenn Sie die Formen einzeln bearbeiten möchten.
4. Wählen Sie einen Pfad aus. Im rechten Bedienfeld klicken Sie im Bereich 'Füllung' (Fill) auf das Farbfeld: Hex, Farbfelder, Pipette. Die gesamte Form ändert sich, die Kanten bleiben scharf.
5. Für ein monochromes Logo wählen Sie alle Formen der Gruppe aus und wenden Sie eine einzige Farbe an. Exportieren Sie anschließend als SVG, PNG oder PDF aus dem Exportbereich, falls das Endprodukt kein Vektor mehr sein muss.

Wenn Figma ein flaches Bild anstelle von Vektorebenen anzeigt, enthielt die Datei ein Bitmap (ein eingebettetes PNG). Das passiert nicht bei PixelToPath-Exporten mit den Voreinstellungen Schwarzweiß oder Poster. Konvertieren Sie das Original erneut mit einem dieser beiden Modi, nicht mit Foto.

Canva: SVG einfügen und umfärben

Canva akzeptiert SVGs sowohl in der kostenlosen als auch in der Pro-Version. Das Umfärben funktioniert bei einfachen Dateien: flache Farben, wenige Knoten, keine Verläufe. Genau das erzeugt PixelToPath mit Poster oder Schwarzweiß.

1. Öffnen Sie in Canva ein Design. Linkes Bedienfeld → Uploads → Dateien hochladen. Wählen Sie Ihre .svg (unter 3 MB; ein PixelToPath-Export liegt weit darunter).
2. Sobald sich die Datei in Ihren Uploads befindet, ziehen Sie sie auf die Seite. Skalieren Sie sie an den Griffen: Der Vektor bleibt scharf, auch im Story- oder A4-Format.
3. Klicken Sie auf die SVG. In der Werkzeugleiste erscheinen Farbkreise, einer für jede Farbe der Datei. Klicken Sie auf einen Kreis und wählen Sie eine neue Farbe: Canva wendet sie auf alle Formen dieser Farbe an.
4. Wenn keine Farbkreise erscheinen, ist die SVG zu komplex (Verläufe, zu viele Farben, Foto-ähnliche Pfade). Gehen Sie zurück zu PixelToPath, wechseln Sie zu Poster oder Schwarzweiß, exportieren Sie erneut und importieren Sie neu.

Canva empfiehlt ein SVG-1.1-Profil, gruppierte Formen gleicher Farbe und keine Texturen. Die Logo-Voreinstellungen von PixelToPath halten diese Vorgaben bereits ein. Sie müssen nicht erst Illustrator verwenden, um die Datei 'vorzubereiten'.

WordPress: SVG-Upload sicher zulassen

WordPress verweigert standardmäßig SVGs, und das nicht ohne Grund. Ein SVG ist XML: Es kann JavaScript, externe Entitäten oder eine XSS-Payload enthalten. Ein Besucher oder ein kompromittierter Redakteur, der ein schädliches SVG hochlädt, kann Code im Backend ausführen. Daher die Blockierung. Man muss das Format zulassen und die Datei bereinigen.

Fügen Sie nicht einfach image/svg+xml in die functions.php ein. Ohne die Datei zu bereinigen, öffnen Sie eine Sicherheitslücke. Die sichere Methode: Ein gepflegtes Plugin, das Skripte, onload-Ereignisse und XML-Entitäten entfernt. Safe SVG (10up), über eine Million Installationen.

1. Im WordPress-Dashboard: Plugins → Installieren. Suchen Sie nach Safe SVG (Autor: 10up). Installieren und aktivieren Sie es.
2. Gehen Sie zu Einstellungen → Medien. Beschränken Sie den SVG-Upload auf Administratoren (oder vertrauenswürdige Rollen). Öffnen Sie das Format nicht für alle Autoren, wenn die Website mehrere Mitwirkende hat.
3. Medien → Datei hinzufügen. Laden Sie die PixelToPath .svg hoch. Das Plugin bereinigt sie beim Import und zeigt eine Vorschau in der Mediathek an, was WordPress nativ nicht tut.
4. Fügen Sie in einem Beitrag oder einer Seite einen Bild-Block ein und wählen Sie die SVG aus. Für ein Header-Logo nutzen Sie den Customizer / Website-Informationen oder einen Bild-Block im Theme-Template (Site Editor).
5. Entwickler-Variante: Umgehen Sie die Mediathek. Platzieren Sie die Datei im Theme (assets/logo.svg) und referenzieren Sie sie im Template oder binden Sie sie inline ein, um sie mit CSS zu stylen. Kein Upload bedeutet keine Angriffsfläche über die Mediathek.

Safe SVG kann auch einschränken, wer hochladen darf. Halten Sie das Plugin aktuell: Die Bereinigung der Datei ist die eigentliche Kontrolle, nicht nur das Häkchen bei 'SVG zulassen'.

Welche PixelToPath-SVG soll ich in diese Tools einfügen?

Der Editor nimmt, was Sie ihm geben. Eine falsche Voreinstellung rächt sich beim Import: zu viele Formen, nicht änderbare Farben, abgelehnte Datei.

• Logo, Piktogramm, Schriftzug: Schwarzweiß oder Poster. Dies sind flache Farben, Figma und Canva färben sie mit einem Klick um.
• Vermeiden Sie Foto, wenn Sie die Farben ändern möchten. Dieser Modus erstellt eine Vielzahl winziger Formen; Canva zeigt oft keine nützlichen Farbkreise an.
• Schneiden Sie das Original vor dem Konvertieren zu: weniger Hintergrund, weniger Knoten, eine übersichtlichere SVG in der Figma-Ebenenliste.
• Eine Variante pro Anwendungsfall: eine monochrome SVG für Figma (CI), eine farbige SVG für Canva (Beitrag), dieselbe bereinigte Datei für WordPress (Header).

Wo dieser Workflow den Alltag verändert

Sobald die SVG im Tool ist, müssen Sie nicht für jede Variante neu konvertieren:

• Figma-CI: Das PNG des Kunden wird zu einer Komponente, die Sie umfärben (Primärfarbe, invertiert, monochrom), ohne neu zu zeichnen.
• Canva-Beiträge: Eine SVG, sechs Kampagnenfarben, scharfe Stories und Karussells.
• WordPress-Logo: Eine Datei im Header, scharf auf Mobile und Retina, leichter als das alte PNG.
• Freelancer-Lieferobjekt: Sie liefern die SVG plus die Figma / Canva-Anleitung. Der Kunde ist nicht mehr blockiert.
• UI-Icons: Importieren Sie sie stapelweise in Figma, richten Sie sie an einem 24-px-Raster aus und exportieren Sie das Set.

Behalten Sie das PNG für Fotos. Für alles, was die Farbe wechseln oder scharf bleiben muss, reicht die Kombination aus PixelToPath + Figma / Canva / WordPress.