Illustrator CC 2015 für Webdesigner: SVG

Was bedeutet SVG und wann sollte das Format zum Einsatz kommen?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video beschreibt in einem Überblick die technischen Hintergründe des Dateiformates und verdeutlicht die Vorteile sowie die Einsatzgebiete bei speziellen Workflows.

Transkript

Wenn Sie Ihre Arbeit als Webdesigner neu beginnen oder noch nicht mit SVG gearbeitet haben, fragen Sie sich vielleicht, was genau SVG bedeutet. Lassen Sie uns also in diesem Video ein wenig über die Hintergründe dieses Dateiformates sprechen. Also, was genau ist SVG? Zunächst einmal ist es ein Dateiformat, ähnlich wie JPEG oder PNG, nur das SVG für Scalable Vector Graphics steht. Soweit klingt das einfach, und im Wesentlichen sagt es auch schon alles, was Sie über das Dateiformat wissen sollten. Erstens, es ist skalierbar. Zweitens, Struktur und Aufbau wird durch Vektoren berechnet. Und drittens, es ist eine Grafik. Diese drei Merkmale bringen mich vor allen Dingen direkt auf die Idee, SVG überall dort einzusetzen, wo man skalierbare Grafik verwenden muss, wie z. B. bei einem Responsive-Webdesign-Workflow. Zusätzlich ist es ein Grafikdateiformat das vom W3C, also dem World Wide Web Consortium, empfohlen wird. Da das W3C im Grunde so etwas wie der Dachverband der Webstandards ist, kann man deren Aussagen durchaus vertrauen. Hier werden Entscheidungen bezüglich der HTML-Strukturen getroffen, aber auch die entsprechenden Grafikformate ausgewählt, die bei der Web-Entwicklung verwendet werden dürfen. Wenn Sie sich an die vorgegebenen SVG-Richtlinien sowohl in der Erstellung als auch in der Implementierung halten, ist dieses Format ohne Komplikationen zu verwenden. Adobe Illustrator ist das perfekte Programm, um SVG-Grafiken zu erstellen. Das betrifft insbesondere das neue Release CC 2015, denn hier sind einige tolle SVG-Optionen enthalten, mit deren Hilfe sich kinderleicht code-konforme SVG-Grafiken erzeugen lassen. Weiterhin können Sie aus fast allem, was mit Illustrator entworfen wurde, eine SVG-Grafik erzeugen, und das ist schlicht fantastisch, wenn man bedenkt, wie leistungsstark dieses Programm inzwischen geworden ist. Stellt sich noch die Frage: Warum soll man überhaupt SVG-Grafiken einsetzen, wenn es doch auf den ersten Blick viel schneller ist, jpg-, gif- oder png-Grafiken zu verwenden? Nun, die Antwort liegt auf der Hand: SVG ist absolut auflösungsunabhängig. Sie wird schließlich aus Vektoren berechnet, also die Datei. Und ebenso, wie Sie Vektorgrafiken in Illustrator beliebig skalieren können, ohne einen Qualitätsverlust hinnehmen zu müssen, können Sie das auch mit SVG-Grafiken machen. Sobald Sie die Grafik in die eine oder andere Richtung skalieren, werden die Vektoren neu berechnet, und das Ergebnis ist eine genauso scharfe und genaue Abbildung wie vor der Skalierung. Das ist wirklich klasse und bedeutet vor allem, dass Sie mit nur einem Arbeitsschritt frei skalierbare Grafiken für alle Bildschirmauflösungen auf jedem Endgerät in gleichbleibend perfekter Qualität erzeugen können. Ein weiterer Pluspunkt ist die Dateigröße. Je nach Grafik ist es durchaus möglich, dass SVG-Grafiken nur wenige Kilobyte groß sind. Weiterführend in diesem Training werde ich Ihnen dazu noch ein paar Tipps aufzeigen, wie Sie Ihre Grafiken so optimieren, dass sie möglichst wenig Platz auf Ihrer Festplatte einnehmen. Last, but not least, ein weiterer großer Vorteil, dass SVG-Grafiken vollständig aus XML-Code strukturiert werden. Somit sind die Dateien von Entwicklern vollständig anpassbar. Sollten Sie bereits in der Lage sein, XML-Dateien selbst zu schreiben oder zu mindestens zu verändern, ist es nur noch ein kleiner Schritt, alle möglichen weiteren Anpassungen selbst vorzunehmen. Fassen wir noch einmal zusammen: Mein Favorite und Nummer eins ist die Verwendung von SVG-Grafiken im Responsive-Webdesign-Workflow. Hier passt diese Technik wie der berühmte Deckel auf den Topf. Die Datei wird verlustfrei auf jedem Gerät und mit jeder Auflösung skaliert. Besser geht es fast nicht mehr. Zweitens, als vektororientiertes Grafikprogramm ist Illustrator die perfekte Software zur Erstellung, und die neuen Exportfunktionen der CC 2015 machen es Ihnen sehr leicht, SVG-Grafiken zu exportieren. Drittens kann der erzeugte Code von jedem XML-Entwickler leicht angepasst werden. Der letzte enorme Vorteil betrifft den Speicherplatzverbrauch auf dem Webserver, und das ist schon ein Pluspunkt gegenüber jpg-, gif- oder png-Grafiken, denn diese Dateiformate können durch unvorsichtig oder unüberlegt eingestellte Parameter durchaus sehr groß werden. Sie haben jetzt einen Überblick, wann Sie SVG-Grafiken einsetzen sollten, und vor allen Dingen, wo die Vorteile dieses Dateiformates liegen. Somit erschließen sich vielleicht ganz neue Möglichkeiten auch für andere Teilbereiche Ihres täglichen Arbeitsablaufes.

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)
SVG Super erklärt
Anonym
Ich kenne SVG Grafiken schon sehr lange. Dieses Video hat mir den Schrecken oder die eigene Faulheit genommen. Die Dateigröße von SVG Grafiken ist beeindruckend klein. Ich werde jetzt bei der Neuerstellung von Kundenprojekten SVG Grafiken mit einbauen.

Vielen Dank.
Klasse Video zu SVG
Anonym
Sehr ausführlich und verständlich erklärt.
Das ist der Durchbruch für SVG im Web.
Vielen Dank.

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!