PNG zu SVG für Canva und Figma

Warum ein PNG in Canva und Figma unscharf wird

Ein PNG ist ein Pixelraster. Vergrößern Sie es für ein Banner in Canva oder einen großen Rahmen in Figma, und die Kanten werden weich und gezackt. Die Konvertierung von PNG zu SVG für Canva und Figma ersetzt die Pixel durch Vektorformen, sodass die Grafik bei jeder Größe scharf bleibt.

Es hilft auch, wenn Sie ein Logo im kostenlosen Plan von Canva erstellt haben. Das Hochladen einer SVG-Datei bei Canva ist nicht auf Pro-Benutzer beschränkt, aber das Herunterladen Ihres Designs als SVG ist eine Funktion des kostenpflichtigen Plans. Laden Sie es stattdessen als PNG herunter und führen Sie den Schritt „Canva-PNG-zu-SVG“ hier durch.

Canvas Regeln zum Hochladen einer SVG-Datei

Das Help Center von Canva listet einige Anforderungen für SVG-Uploads auf. Hier wird erläutert, wie jede Anforderung auf SVGR abbildet wird.

Was Sie beim Importieren der SVG-Datei in Figma sehen

Figma importiert eine SVG als Vektorebenen, sodass Sie Formen direkt auswählen, umfärben und skalieren können. Das ist der Zweck einer Figma-PNG-zu-SVG-Konvertierung: Sie erhalten bearbeitbare Formen statt eines flachen Bildes.

SVGR stapelt Formen, anstatt Löcher auszuschneiden. Der Hohlraum eines O oder die Lücke innerhalb eines Rings ist eine formhintergrundfarbene Form, die auf einer massiven Form liegt, daher sehen Sie in Figma überlappende Ebenen. Das sieht auf einem passenden Hintergrund richtig aus, zeigt sich aber auf jeder anderen Farbe.

Um ein echtes Loch zu erstellen, wählen Sie die obere Form zusammen mit der darunterliegenden Form aus und wenden Sie die Funktion "Subtrahieren" aus Figas booleschen Operationen an.

Text: nachgezeichnete Formen oder Live-Text?

Bei deaktivierter Texterkennung wird die Beschriftung als Form nachgezeichnet. Sie sieht genau wie das Original aus und funktioniert in beiden Apps, doch Sie können sie nicht erneut eingeben.

Wenn es aktiviert ist, wird der erkannte Text zu live SVG-Text, und SVGR führt zudem eine Farboptimierung durch, die Gradientfüllungen hinzufügen kann. Canva verlangt, dass Text umgewandelt wird, daher sollte diese Funktion dort deaktiviert bleiben. Figma importiert SVG-Text als Live-Text, wobei folgende Einschränkungen bestehen: Die Texttransparenz wird ignoriert, em-basierte Schriftgrößen werden als Pixel gelesen, und der Buchstabenabstand (letter-spacing) für einzelne Textabschnitte wird ignoriert.

Für Logos lassen Sie die Texterkennung ausgeschaltet. Wenn Sie bearbeitbare Überschriften benötigen, tippen Sie diese in Figma mit der richtigen Schriftart erneut ein.

Grenzen des Wissens

• Die Konvertierung von PNG zu SVG für Canva und Figma funktioniert für flache Grafiken, nicht für Fotos. Ein nachgezeichnetes Foto wird zu einer großen, komplexen Datei; laden Sie für Canva stattdessen das Foto selbst als JPG oder PNG hoch.
• Weichkantige PNGs können fast duplizierte Farben zurückgeben, wie mehrere fast schwarze Schattierungen. Färben Sie sie in Figma oder einem anderen Editor zu einer einzigen Farbe um, wenn Sie eine saubere Farbpalette wünschen.
• Wie Canva Ihnen das Neufarben eines hochgeladenen SVGs ermöglicht, hängt von der Datei ab, und wir haben dies nicht für jedes Design getestet. Laden Sie vor dem Erstellen einer Vorlage eine Testdatei hoch.
• Überlappende Formen sind auch in Canva wichtig. Bei transparentem Hintergrund behält das Innere eines O seine ursprüngliche Hintergrundfarbe und erscheint als Fleck auf jeder anderen Farbe. Schneiden Sie diese Löcher in Figma oder mit Pfad > Differenz in Inkscape aus, bevor Sie sie hochladen.
• Ein transparenter Hintergrund entfernt die Form, die in der an den Bildecken vorhandenen Farbe gemalt ist – das meinen die Leute, wenn sie vom Hintergrund sprechen. Wenn Ihre Kunstwerke in alle vier Ecken hineinragen oder die Ecken unterschiedliche Farben haben, wird nichts entfernt und der Hintergrund bleibt erhalten – geben Sie dem Kunstwerk einen ebenmäßigen, leeren Rand und konvertieren Sie erneut. Bereiche, die vollständig vom Kunstwerk umschlossen sind, werden niemals entfernt, und eine PNG-Datei, die bereits einen Transparenzkanal besitzt, wird unverändert belassen.
• Kurven werden als viele kurze gerade Segmente gezeichnet. Von einem kleinen Bild abgeleitet, können sie im vergrößerten Zustand leicht eckig wirken, daher beginnen Sie mit der größten verfügbaren Kopie.