SVG importieren
Vektorgrafik aus Illustrator, Affinity Designer, Inkscape oder Figma als bearbeitbare Formebenen hereinholen, und die SVG-Funktionen, die dabei auf der Strecke bleiben.
Eine SVG-Datei wird hier zu echter Geometrie: Pfade werden zu Formebenen mit Ankerpunkten und Anfassern, die du mit dem Knoten-Werkzeug bearbeitest, und nicht zu einem Bild einer Zeichnung. Gruppen in der Datei werden zu Gruppen im Ebenenbedienfeld.
Es gibt vier Wege hinein, und alle laufen über denselben Leser:
- Datei ▸ Importieren ▸ SVG… importiert in das geöffnete Projekt
- Datei ▸ Öffnen… mit einer ausgewählten SVG-Datei baut ein neues unbenanntes Projekt darum herum
- Die Datei auf der Leinwand abzulegen importiert sie, anderswo abgelegt öffnet sie sich als neues Projekt
- Strg+V fügt Vektorgrafik ein, die du in einem anderen Programm kopiert hast, samt Gruppen
Um die Grafik wird keine zusätzliche Gruppe gelegt: Die obersten Formen und Gruppen der SVG-Datei landen als oberste Ebenen. Aus einer Datei importiert, trägt die erste oberste Gruppe den Namen der Datei. Aus der Zwischenablage eingefügt, behält die Grafik ihre eigenen Gruppen und Namen, landet mittig auf der Leinwand und ist ausgewählt.
Gruppen, die du in einem anderen Vektorprogramm kopiert hast, kommen als Gruppen an, genauso verschachtelt. Ein Einfügen kommt also nicht in zusätzliche Ebenen verpackt an. Manche Programme lassen die Gruppen in der Vektorkopie weg, die sie in die Zwischenablage legen. Unter Windows übernimmt Celas Studio die Gruppierung dann aus der anderen Kopie, die diese Programme dort ablegen, sofern sie Form für Form übereinstimmt und keinen Beschnitt enthält.
Was woraus wird
| In der SVG-Datei | In Celas Studio |
|---|---|
| g, a und ein verschachteltes svg | Eine Gruppenebene |
| path, rect, circle, ellipse, polygon, polyline, line | Je eine Formebene |
| image | Eine Bildebene |
| linearGradient, radialGradient | Eine Verlaufsfüllung oder Verlaufskontur an der Form, die ihn nutzt |
| text | Eine leere Platzhalterebene, benannt nach den ersten Zeichen |
Jeder Pfadbefehl wird verstanden, auch elliptische Bögen, und alles wird in kubische Bézier-Kurven umgerechnet. Ein zusammengesetzter Pfad, also ein O, ein Ring oder alles mit einem Loch, bleibt eine Formebene samt ihren inneren Konturen. Das Loch funktioniert also weiterhin, und das Ganze bleibt als ein Objekt bearbeitbar.
Füllungen, Füllregel, Konturen, Konturbreite, Enden und Ecken, Deckkraft und Verläufe kommen alle mit, und die Konturbreite wird mit der Grafik mitskaliert, damit die Strichstärke stimmt. Was in der Datei als ausgeblendet markiert ist, kommt ausgeblendet an.
Manche Vektorprogramme schreiben eine Form, in der weitere Formen liegen, in drei Teilen: ihre Füllung, die Formen darin und obendrauf eine Kopie ihres Umrisses. Celas Studio setzt diese Teile wieder zusammen. Füllung und Umriss werden eine Formebene, die Formen dazwischen werden ihre Kinder, und ihr Umriss wird auf Vorne gestellt, damit er wie im Original oben bleibt.
Farben werden in jeder CSS-Form gelesen, die das Zeichenmodell nutzt: benannte Farben, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() und rgba(), wobei in den numerischen Formen auch Prozentwerte angenommen werden. Die vier- und achtstelligen Hex-Formen bringen ihr Alpha mit.
Ein abgerundetes Rechteck mit unterschiedlichem rx und ry kommt mit wirklich elliptischen Ecken an. Sind rx und ry gleich, bleibt es ein schlichtes Rechteck mit einem Eckenradius, und der Radius-Anfasser des Knoten-Werkzeugs greift weiterhin.
Ein verknüpftes image wird relativ zum Ordner der SVG-Datei aufgelöst, Grafik mit Verweis auf eine Nachbardatei lädt also. Eine eingebettete data:-URI wird unmittelbar dekodiert.
Gruppen tragen keine Transformation
Transformationen aus der Datei werden in die Grafik selbst eingerechnet. Die Gruppen, die du bekommst, sind also reine Struktur ohne eigene Drehung oder Skalierung. Die Zeichnung landet genau dort, wo die Datei es vorsieht, und du kannst die Gruppe danach drehen oder skalieren, ohne dass sich darunter etwas verschiebt. Eine Gruppe, die nichts als eine Transformation enthält, ohne Namen, ID oder andere Einstellung, wird nicht behalten: Ihr Inhalt landet direkt dort, wo die Gruppe ihn hingesetzt hätte.
Was nicht unterstützt wird
Der Leser deckt das Zeichenmodell ab und nicht die gesamte SVG-Spezifikation. Alles Folgende wird ohne Meldung übergangen.
- CSS-Stilblöcke und Klassenattribute, siehe die Warnung unten
- use und symbol: Sprite-Sammlungen und wiederholte Instanzen kommen leer an
- clipPath und mask: die Beschneidung wird nicht angewendet, weggeschnittene Grafik kann also wieder auftauchen
- Musterfüllungen, die auf ein flaches Grau zurückfallen
- Filtereffekte wie Weichzeichnung, Schlagschatten und die übrigen
- marker, also Pfeilspitzen und Kappen
- stroke-dasharray und stroke-dashoffset, gestrichelte Konturen kommen deshalb durchgezogen an
- switch, foreignObject und SMIL-Animation
- Text: Schrift, Größe und Lage gehen verloren, es bleibt nur eine benannte Platzhalterebene
- Prozent- und relative Einheiten sowie Transformationen, die in einem style-Attribut stehen
Eine Datei vorbereiten, die sauber ankommt
- Wandle Text vor dem Export in Kurven um, denn Text kommt nur als Platzhalter an.
- Wandle Konturen, Strichmuster, Muster und jeden Filtereffekt um, dessen Aussehen du behalten willst.
- Löse Schnittmasken auf oder beschneide die Grafik auf das, was sichtbar sein soll.
- Löse Symbole und wiederholte Instanzen auf, damit nichts auf use angewiesen ist.
- Exportiere mit Präsentationsattributen statt mit CSS und gib dem Dokument eine viewBox.
Größe und Platzierung
Breite und Höhe des Dokuments werden in Pixeln, Punkt, Pica, Zoll, Millimetern oder Zentimetern gelesen und zusammen mit der viewBox zu einer sinnvollen Skalierung verrechnet. Eine in Prozent bemaßte Datei, also das übliche Weblogo mit width=100%, wird in der Größe ihrer viewBox importiert statt gedehnt. Danach wird die Grafik auf deiner Leinwand zentriert.