Canonical: https://instain.ru/de/articles/svg-icon-in-recraft-erstellen-und-bei-24-pixeln-prufen/ Language: de Praktische Anleitung # SVG-Icon in Recraft: erstellen und bei 24 Pixeln prüfen Auf der großen Zeichenfläche sieht die Gießkanne sauber aus, doch im Menü verschwindet ihr Henkel. Wir zeigen, wie Sie in Recraft ein Vektor-Icon erstellen und für die Größe überarbeiten, in der es tatsächlich verwendet wird. ![Flächige Silhouette einer grünen Gießkanne mit Knotenpunkten am Vektorumriss auf einem hellen Blatt.](https://instain.ru/assets/images/article-recraft-svg-ikonka-proverka-malogo-razmera-cover-1e03197a7904-1200.webp) Redaktionelle Illustration des Prinzips eines Vektorumrisses; keine Oberfläche und kein Ergebnis von Recraft. ## Mit Größe und Einsatzzweck beginnen Angenommen, ein Bereich zur Pflanzenpflege braucht eine kleine grüne Gießkanne. Im Menü soll sie 24 × 24 Pixel groß sein, auf einer Hinweiskarte 48 × 48. Das ist eine Übungsaufgabe, kein Bericht über einen Recraft-Test. Das Kriterium ist einfach: Der Gegenstand muss auch ohne Beschriftung erkennbar sein. Legen Sie vor der Generierung fest, welche Details unverzichtbar sind. Bei unserer Gießkanne sind das der Behälter, ein länglicher Ausguss rechts und ein Henkel links mit deutlich sichtbarer Öffnung. Glanzlichter, Muster auf der Seitenwand und einzelne Wassertropfen helfen bei dieser Aufgabe nicht. Verschwindet der Ausguss beim Verkleinern, bleibt ein grüner Eimer übrig. ## Die Vektorgenerierung gezielt auswählen Öffnen Sie ein Projekt in Recraft Studio und wechseln Sie zu Create. Wählen Sie unter Generation type die Option Vector: Laut aktueller Dokumentation ist das ein eigener Generierungstyp, getrennt von Image. Wählen Sie ein geeignetes, in Ihrem Konto verfügbares Vektormodell und ein quadratisches Seitenverhältnis, sofern es zu Ihrem Layout passt. Nicht jedes Bild mit flächiger Füllung ist eine Vektorgrafik. Im Modus Image kann eine ähnlich aussehende Illustration entstehen, aber mit einem anderen Ausgangsformat. Die Recraft-Dokumentation weist außerdem darauf hin, dass bei der Generierung mit dem Typ Vector keine Referenzbilder verfügbar sind. Arbeiten Sie bei dieser Aufgabe mit einer Textbeschreibung; für ein bereits vorhandenes Rasterbild gibt es den gesonderten Vorgang Vectorize. ## Die Form so beschreiben, dass sie überprüfbar ist Für den ersten Entwurf eignet sich etwa dieser Prompt: „Einfaches flächiges Icon einer Gartengießkanne in Seitenansicht. Breiter grüner Behälter, kurzer, deutlich erkennbarer Ausguss nach rechts, großer Henkel links mit offener Aussparung. Eine dunkelgrüne Füllfarbe, ohne Verläufe, Schatten, Schrift, Muster oder Wassertropfen. Der Gegenstand ist vollständig in einer quadratischen Komposition zu sehen, mit freiem Raum ringsum. Das Icon soll auch in kleiner Darstellung erkennbar sein.“ Der letzte Satz beschreibt eine Absicht, prüft aber nicht das Ergebnis für Sie. Lassen Sie mehrere Varianten erzeugen und wählen Sie zunächst die mit der verständlichsten Silhouette. Eine reich verzierte Gießkanne kann auf der Zeichenfläche interessanter aussehen und zugleich als Navigationssymbol schlechter funktionieren. ## Überflüssiges entfernen und den auffälligsten Fehler korrigieren Prüfen Sie den Übergang zwischen Ausguss und Behälter und ob der Henkel mit der Seitenwand verschmolzen ist. Ein einzelner grüner Fleck am Rand kann eine überflüssige Form sein; eine schmale helle Aussparung dagegen der einzige Hinweis auf den Henkel. Solche Stellen sollten Sie zuerst überarbeiten. Recraft bietet einen Vector Editor. Laut Dokumentation öffnet ein Doppelklick auf die Vektorgrafik deren einzelne Formen zur Bearbeitung; mit einem weiteren Doppelklick auf die gewünschte Form bearbeiten Sie Punkte und Kurven. Positionen und Füllfarben lassen sich ebenfalls ändern. Für unsere Aufgabe ist es sinnvoller, eine zu enge Öffnung zu verbreitern und ein zufälliges Detail zu entfernen, als die ganze Zeichnung wieder komplizierter zu machen. Speichern Sie die Version vor der Änderung. Falls beim Vereinfachen die erkennbare Form verloren geht, können Sie leicht darauf zurückgreifen. ## 24 und 48 Pixel mit der großen Version vergleichen Platzieren Sie Kopien des Icons in beiden Zielgrößen im Layout und betrachten Sie es bei der normalen Ansicht von 100%. Es hilft bei dieser Prüfung nicht, das kleine Symbol auf die halbe Bildschirmgröße zu vergrößern: So groß sieht es später niemand. Prüfen Sie bei 24 Pixeln drei Dinge: Ist der Ausguss erkennbar, bleibt die Öffnung im Henkel sichtbar und gibt es genug Freiraum um den Behälter? Betrachten Sie anschließend die Darstellung mit 48 Pixeln. Ist die größere Version verständlich, während die kleine ihre Form verliert, löst ein bloßer Formatwechsel das Problem nicht. Vereinfachen Sie den Umriss, vergrößern Sie eine wichtige Aussparung oder erstellen Sie eine eigene Menüvariante. Prüfen Sie das Symbol auf dem vorgesehenen Hintergrund. Dunkelgrün auf Weiß ist anders lesbar als dasselbe Grün auf einer dunklen Fläche. Saubere SVG-Kanten gleichen weder schwachen Kontrast noch eine zu enge Komposition aus. ![Zwei flächige Gießkannen-Icons: eine überladene und eine vereinfachte Variante mit offenem Henkel.](https://instain.ru/assets/images/article-recraft-svg-ikonka-proverka-malogo-razmera-illustration-1-9028950f859f-1200.webp) Schema zur Vereinfachung eines Icons für kleine Darstellungen. Ein redaktionelles Beispiel, keine Ergebnisse eines Recraft-Tests. ## SVG exportieren und die heruntergeladene Datei öffnen Wenn die Form stimmt, wählen Sie den SVG-Export. Prüfen Sie die heruntergeladene Datei in dem Editor, in dem Sie das Layout aufbauen: Ist der Gegenstand vollständig sichtbar, gibt es unerwartet große Ränder und sind Farben sowie Aussparungen erhalten geblieben? Wiederholen Sie die Prüfung mit 24 und 48 Pixeln, nachdem Sie das Icon in die tatsächliche Oberflächenkomponente eingesetzt haben. Für den Export eines ganzen Frames nennt die Recraft-Dokumentation eine wichtige Voraussetzung: Alle enthaltenen Elemente müssen Vektoren sein. Ist noch ein Rasterbild darin, muss es zunächst vektorisiert werden. Fügen Sie dem fertigen Icon daher nicht eigens PNG-Dekoration hinzu, wenn das Ergebnis als SVG exportiert werden soll. ## Wenn eine passende Gießkanne bereits als PNG vorliegt Nehmen Sie dann einen anderen Weg: Platzieren Sie das Rasterbild auf der Zeichenfläche, wählen Sie es aus und klicken Sie im Kontextbereich auf Vectorize. Die Dokumentation beschreibt, wie sich die Farbanzahl mit Color Reduction reduzieren und die Palette anschließend bearbeiten lässt. Dabei wird ein vorhandenes Bild umgewandelt, statt einen Vektor direkt aus Text zu generieren. Verwenden Sie eine klare, flächige Vorlage. Recraft warnt vor Artefakten beim Vektorisieren von Fotos, 3D-Renderings und stark texturierten Illustrationen. Prüfen Sie nach der Umwandlung erneut Ausguss, Henkel und kleine Darstellung. Die Dateiendung von PNG in SVG umzubenennen ersetzt diesen Vorgang nicht. ## Arbeitsdateien sichern und die Tarifbedingungen prüfen Bewahren Sie das Projekt, die fertige SVG-Datei, den Prompt und die Zielgrößen zusammen auf. Kennzeichnen Sie eine vereinfachte Menüvariante gesondert. So ersetzen Sie bei der nächsten Änderung nicht versehentlich das gut erkennbare kleine Symbol durch die komplexere Version von der großen Zeichenfläche. Sehen Sie vor dem Einsatz in einem kommerziellen Projekt in die aktuellen Recraft-Tarife. Der Anbieter erklärt derzeit, dass Ergebnisse des kostenlosen Tarifs öffentlich und nicht für die kommerzielle Nutzung lizenziert sind; für Bilder, die während eines kostenpflichtigen Abonnements erstellt wurden, nennt er andere Bedingungen. Dass sich eine SVG-Datei herunterladen lässt, belegt noch keine passenden Nutzungsrechte. Prüfen Sie verfügbare Modelle, Kreditverbrauch und Kontobedingungen, bevor Sie die Aufgabe starten. ## Quellen und Dokumentation - [Recraft Studio: Generierungstypen und Einstellungen unter Create](https://www.recraft.ai/docs/recraft-studio/image-generation/how-to-generate-an-image) - [Recraft Vector Editor: Formen, Punkte, Referenzbeschränkungen und Frame-Export](https://www.recraft.ai/docs/recraft-studio/image-editing/vector-editor) - [Recraft: Rasterbilder vektorisieren und die Grenzen der Umwandlung](https://www.recraft.ai/docs/recraft-studio/format-conversions-and-scaling/vectorizing) - [Recraft: SVG aus einer Textbeschreibung generieren](https://www.recraft.ai/ai-vector-generator) - [Recraft: aktuelle Tarife, Sichtbarkeit und Rechte an Ergebnissen](https://www.recraft.ai/pricing) [Alle Artikel ](https://instain.ru/de/articles/) ## Werkzeuge aus diesem Beitrag Sterne zeigen Katalogbewertungen, keine Nutzerrezensionen oder Besucherstatistiken. [Punktwerte richtig einordnen](https://instain.ru/de/methodology/) Bilder ### [Recraft](https://instain.ru/de/ai/recraft/) Raster- und Vektorgrafiken für Designaufgaben 4.48 / 5 Dienst