Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Illustrator CC 2015 für Webdesigner: SVG

Der Illustrator-Dialog für den SVG-Export

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video beschreibt die Funktionen und Optionen des neu gestalteten SVG-Exportdialogs in Illustrator. Außerdem erhalten Sie Tipps und Empfehlungen für die richtigen Einstellungen.

Transkript

In diesem Video möchte ich Ihnen die Optionen und Funktionen des neu gestalteten SVG-Export-Dialogs in Illustrator beschreiben. Doch zuvor noch ein Hinweis zu den verwendeten Objektnamen. Ich habe in einem vorherigen Video die einzelnen Ebenen erstellt, also aus den Zeichenflächen und innerhalb dieser Ebenen die Gruppierungen aufgelöst, so weit ich da einzeln an die Objekte heran möchte, und diesen Objekten Bezeichnungen gegeben, Namen gegeben. In der Zwischenzeit habe ich diese Objektbezeichner in englische Begriffe umbenannt. Das ist nicht zwingend notwendig, die Programmierung funktioniert selbstverständlich auch mit deutschen Begriffen. Aber erstens ist es nicht ganz ungefährlich, weil beispielsweise Umlaute zu Schwierigkeiten führen können. Und zweitens ist es einfach Standard im Entwicklungsumfeld mit englischen Begriffen und englischen Kürzeln zu arbeiten. Und aus diesem Grund möchte ich Ihnen das auch empfehlen. Sie sehen, so ist dann z.B. hier aus dem Play-Button - Gut, das hatte ich, glaube ich, genauso benannt - "play" geworden. Aber hier zum Beispiel aus "schneller Vorlauf", also "SVL" dieses "Fast Forward" geworden, oder hier das "Rewind", "Progressbar", "Playhead" das ist hier der kleine Abspielknopf, usw. Also, wie gesagt, es ist nicht zwingend notwendig, aber abschließend zu dieser Namensgebung einfach auch von mir noch eine Empfehlung. Kommen wir nun zu dem Dialog, den erreichen Sie, indem Sie über den Menüpunkt "Datei Speichern unter" auswählen oder alternativ die Tastenkombinationen Shift+Command+S oder Steuerung+S, beziehungsweise hier die Command -Taste. Dann rufe ich den mal auf, und jetzt muss ich mich entscheiden, wo ich das Dokument abspeichern möchte, und dann habe ich hier unten bei dem Format die Möglichkeit zu sagen, SVG komprimiert, also SVGZ, oder SVG als normale Datei. Hier wählen Sie zunächst SVG, und wir suchen den Speicherplatz aus und klicken auf "Sichern". Und sofort öffnet sich der Dialog und dieser ist neu gestaltet, sehr leistungsstark und wir schauen uns an, was wir hier im einzelnen machen können. Zunächst einmal beginnt das Ganze mit dem SVG oder den SVG-Profil, und hier haben wir standardmäßig SVG 1.1, das ist der übliche Standard und den sollte man, wenn es jetzt keine weiteren Anforderungen gibt oder in irgendeiner Form Notwendigkeiten, den sollten Sie auch standardmäßig verwenden, also SVG 1.1 ist zum jetzigen Zeitpunkt die richtige Wahl. Dann haben wir hier den Block, der die Schriften behandelt. Ich habe ebenfalls im vorherigen Video erklärt, dass es besser ist, mit Schriften, die Sie verwenden, wenn Sie Schriften darstellen möchten, dass diese Schriften möglichst in Pfade konvertiert werden sollen. Das kann man manuell machen, wie demonstriert. Sie können aber auch beim Export zum Beispiel sagen, das Ganze nicht als SVG-Schrift exportieren, das ist eigentlich das Standard-Schriftenformat, was vom W3C verwendet wird. Es wird von allen Viewern unterstützt und hat also damit auch eine Bewandtnis, aber der Nachteil ist, dass gerade bei kleinen Schriften einfach eine optische Ungenauigkeit entstehen kann, das sieht wirklich nicht immer schön aus. Aus diesem Grund kann man das Ganze auch in Konturen umwandeln. Ich gehe noch mal zurück in SVG. Da habe ich noch mal eine Unteroption. Ich kann das Ganze, wenn es in SVG exportiert wird, auch hier in eine Systemschrift umstellen. Das bietet dann auch die beste Verwendung bei der Darstellung, und vor allen Dingen macht es auch die kleinstmöglichen Dateien da draus, das heißt, wenn man das Ganze dann hier auswählt, dann werden hier verschiedene Sachen entsprechend eingestellt und "(Ohne) Systemschriften verwenden" bietet also die kleinstmögliche Datei. Ansonsten muss das Ganze natürlich eingebettet werden und das kostet Speicherplatz, also, entspricht eigentlich nicht der Funktion, die wir vorher hatten. Die beste Wahl tatsächlich ist, das Ganze in Konturen umwandeln und in Form dessen konvertiert er also Texte direkt in diese Konturen, in Pfade, und somit ist das meiner Erfahrung nach die beste Möglichkeit, was die Optik angeht. Der nächste Punkt sind die Optionen, wenn es um Bilder, um eingebettete Grafiken in dem Illustrator-File hier im Hintergrund geht. Da haben wir im Moment nichts, aber Sie können natürlich auch Grafiken, Bilder, Fotos einbetten, beziehungsweise implementieren und auch in einer SVG/Grafik benutzen. Da stellt sich dann die Frage, ob Sie diese Bilder einbetten möchten oder eben verknüpfen möchten. Hier haben wir den Vorteil, betten Sie die Bilder direkt in das Dokument ein, wird dadurch natürlich dafür gesorgt, dass das Bild immer mit der SVG-Datei auch vorhanden ist. Allerdings der Nachteil, es wird die Dateigröße entsprechend um dieses Bildmaterial vergrößert, und das ist wieder konträr dem, was wir bei den Vorteilen in einem vorherigen Video zu den SVG-Formaten gesagt haben. Wenn Sie dann auf "Verknüpfen" hingegen klicken, dann wird diese Illustrator-Datei nach dem Export nicht eingebettet, sondern sie wird verknüpft mit der vorhandenen Grafik, auch eben mit Pixelbild-Elementen etc. Hierbei muss man dann natürlich dafür Sorge tragen, dass diese verknüpften Grafiken verfügbar sind, hat aber auch den Vorteil, dass ich diese verknüpften Grafiken wiederum leichter austauschen kann, ohne die SVG-Dateien angreifen zu müssen, wenn zum Beispiel Dateinamen etc. gleich werden. Und das ist auch hier in der kurzen Erklärung vorhanden. Da steht nämlich drin, "Nützlich bei mehreren SVG-Dateien, in denen dieselben Pixelbild-Elemente verwendet werden" und dergleichen. Was Sie da auswählen, muss man immer dem jeweiligen Anwendungsfall entsprechend entscheiden. Dann haben wir unten noch die Möglichkeit "Illustrator-Bearbeitungsfunktionen beibehalten". Wenn Sie dieses Häkchen setzen, dann können Sie die SVG-Grafiken direkt wieder in Illustrator öffnen, und dort weiter bearbeiten. Ich persönlich mag diese Funktion nicht so besonders weil auch hier gibt es natürlich wieder den großen Nachteil, dass die SVG-Datei größer wird, wie sie eigentlich sein müsste. Ich habe lieber zwei Versionen, ich habe mein Illustrator-File, und wenn ich da was ändern muss, dann öffne ich das Illustrator-File, und führe einfach einen weiteren Export durch, und überschreibe das vorhandene Dokument, wenn ich Änderungen benötige. Hier würde ich empfehlen, das Ganze nicht zu aktivieren. Wenn Ihnen diese ganzen Funktionen noch nicht ausreichen, dann gibt es hier unten "Mehr Optionen" und da sehen Sie, geht es dann weiter über CSS-Eigenschaften, die Genauigkeit hier mit dem Dezimalstellen, ob das ein Pixel ist oder dergleichen. Sie können bis zu sieben Pixel wählen. Das Ganze bedeutet natürlich, je genauer der Vektor im exportierten Bildmaterial sein muss, desto größer wird auch hier wieder die Datei. Für die meisten Dateien hingegen sind allerdings drei Dezimalstellen am besten geeignet und entsprechend könnte man das dann hier auch einbetten. Sie sehen, da gibt es ganz viele weitere Möglichkeiten, Slicing-Daten mit einbeziehen, XMP einschließen. Hier ganz wichtig für "Responsive Design", also flexible Layouts, das Häkchen sollte auf jeden Fall immer gesetzt sein. Denn dadurch wird die SVG-Datei durch CSS so aufbereitet, dass sie auch für "responsive" Dateien funktioniert. Was wird dann erzeugt? Das können wir hier uns hier über den Button "SVG-Code" einmal anzeigen lassen und dann sehen wir, da haben wir eine ganze Liste, von dem, was diese beiden Oberflächen dort erzeugen. Nämlich ein mathematischer Vektor nach dem anderen, plus ein paar Strukturinformationen, kann man hier unten sehr schön sehen. Informationen hier oben für den ganzen Aufbau, eingebettetes CSS und so weiter. Wie man auch sieht, ist das ganz normaler XML-Text, und den kann ich auch mit jedem vernünftigen Programmiereditor jederzeit selbstverständlich verändern. Ich schließe das mal. Dann ist Ihnen bestimmt schon aufgefallen, dass wir hier oben "Schneller Export in mehrere Formate" haben, und das können Sie eben auch testen, indem Sie da auf diesen runden Button klicken. Im Großen und Ganzen ist das gleich geblieben. Nur haben wir hier ein paar mehr Möglichkeiten. Sie können also Zeichenflächen auswählen, und dann das Ganze auch hier mit Skalierungsinformationen belegen. Sie können die Bereiche auswählen, ob Sie jetzt zum Beispiel nur die erste Seite oder das vollständige Dokument haben möchten. Da gibt es dann noch mal ein paar weitere Möglichkeiten und dann auch den Speicherort zum Beispiel nach dem Export zu öffnen. Ich breche das Ganze nochmal ab, gehe wieder auf "Speichern unter", dann entsprechend SVG, auf "Sichern", und habe jetzt hier alle meine Einstellungen getätigt, so wie ich die gerne haben möchte. Schaue noch mal nach, was ich hier an CSS und Stilelementen habe, das sieht alles ganz prima aus. Dann einfach auf OK klicken, um diese Datei zu exportieren und dann wird die an den ausgewählten Speicherort geschrieben. Sie kennen jetzt die wichtigen Optionen und Funktionen dieses Export-Dialogs und können damit schon eigene Layouts als SVG-Datei exportieren.

Illustrator CC 2015 für Webdesigner: SVG

Lernen Sie, wie Sie in Illustrator CC SVG erstellen, exportieren und die Grafikelemente direkt in Muse CC oder ihren HTML-Code einbinden.

1 Std. 3 min (10 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!