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 in der 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 SVG-Auszeichnung ein, die du in einem anderen Programm kopiert hast
Aus einer Datei importiert, trägt die Hüllgruppe den Namen der Datei. Aus der Zwischenablage eingefügt, heißt sie SVG.
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.
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.
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.