Illustrator CC 2015 für Webdesigner: SVG

Anwendungsbeispiele für SVG und Voraussetzungen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video beschreibt konkrete Einsatzgebiete und zeigt wichtige Voraussetzungen auf, die zu erfüllen sind, bevor Sie SVG-Formate in Ihre Web-Projekte implementieren.

Transkript

Im vorherigen Abschnitt haben Sie erfahren, was SVG-Grafiken überhaupt sind, und einen ersten Überblick über die Einsatzgebiete erhalten. In diesem Video vertiefe ich diese Einsatzgebiete noch einmal, und bespreche hier einige Beispiele aus meinem täglichen Webdesign-Workflow. Wann sollte man SVG eigentlich nutzen? Symbole und Objekte der Benutzeroberfläche sind vermutlich die häufigsten Einsatzgebiete der SVG-Grafiken. Warum macht es Sinn, bei beispielsweise Symbolen oder UI-Elementen auf SVG, anstatt auf Rastergrafiken wie JPG zu setzen? Nun, mit diesen Objekten interagieren die Benutzer auf vielfältige Art und Weise. Sie verwenden den Finger, um auf ein solches Symbol zu tippen, Sie klicken mit der Maus darauf, oder aktivieren und verwenden sie auf unterschiedlichste Art und Weise. Bei fast allen Interaktion müssen diese UI-Elemente graphisch signalisieren, dass sie aktiviert, deaktiviert, oder zumindest berührt worden sind. Und das auf jedem Gerät, und mit jeder Auflösung. SVG ist ein guter Weg um sicherstellen zu können, dass das immer perfekt, mit optimierter Grafik, stattfinden kann. Sie können SVG auch für Logo-Erstellung einsetzen. Logos sollten verschiedene Eigenschaften haben, wie beispielsweise, dass sie auch nur mit Schwarz-Weiß funktionieren. Oder aber eben verlustfrei skaliert werden können. Manchmal braucht man ein Logo auf einer Base-Cap, ein anderes mal auf einem Kugelschreiber, oder aber auf einer Hauswand. Somit erstellt man Logos häufig mit Illustrator. Und mit dem Programm ist es dann nur ein kleiner Schritt zu SVG-Grafiken. Benötigt Ihr Logo, oder eine andere einfache Grafik, keine Transparenz, beziehungsweise verwenden Sie nur einfache Farbflächen, also ohne Verlauf, dann sind Vektoren, also SVG, eine prima Grundlage für solche Anforderungen. SVG ist aber nicht für jeden Anwendungsfall geeignet. So gibt es Anforderungen, die besser mit Rastergrafiken, wie JPG, GIF, oder PNG realisiert werden. Und in manchen Fällen muss man einfach austesten, was zu einem besseren Ergebnis führt. Weiterhin eignen sich SVG-Grafiken auch in vielen Fällen für Hintergrundelemente, oder besondere Schmuckgrafiken. Also spezielle Objekte, wie kunstvolle Muster im Hintergrund, die mit der Auflösung und der Browserinteraktion ein- oder ausgezoomt werden. Mit SVG legen Sie in einem solchen Fall eine immer gleiche Ausgabequalität fest. Starten Sie einfach mal eine Websuche nach SVG-Hintergründen, und Sie werden viele coole Ideen erhalten, wann und wofür SVG in diesem Bereich eingesetzt werden kann. Der letzte Anwendungsbereich für SVG, den ich empfehlen möchte, sind Animationen. Also sogenannte HTML-basierte Animationen müssen vor allem schnell laden. Und SVG sticht insbesondere wegen seiner kleinen Dateigröße nahezu jedes andere Format aus. Ich muss es eigentlich nicht noch einmal erwähnen, aber auch hier gilt, dass diese Grafiken immer gleich gut aussehen, ganz gleich welches Endgerät oder welche Bildschirmauflösung verwendet wird. Noch ein paar Dinge, die wichtig sind, bevor Sie mit der Umsetzung Ihrer ersten SVG-Dateien beginnen. Sei es in Übungen oder in eigenen Webprojekten. Als erstes stellen Sie bitte sicher, dass Sie immer auf dem neuesten Stand bezüglich der Browser-Kompatibilitäten sind. Denn leider gibt es immer noch Browser, die diese Standards nur teilweise oder sogar überhaupt nicht supporten. Die gute Nachricht ist allerdings, dass die älteren Browser ohne SVG-Unterstützung nahezu vom Markt verschwunden sind. Aber selbst moderne Browser brauchen manchmal bei der ein oder anderen Anwendung ein sogenanntes Fallback. Also eine Technik, die zum Einsatz kommt, wenn SVG nicht in der gewünschten Art funktioniert, damit eine Website ohne Fehler verwendbar ist. Im Laufe, beziehungsweise zum Ende dieses Videotrainings gebe ich Ihnen noch eine Liste, welche Ressourcen Sie für Tests und Überprüfungen heranziehen können, um sich jeweils für das richtige Fallback entscheiden zu können. Zu guter Letzt müssen Sie natürlich lernen und verstehen, wie SVG korrekt in einem Webprojekt implementiert werden kann. Sollten sie diese Implementierung nicht selbst vornehmen, sondern von einem Entwickler durchführen lassen, so ist es zumindestens wichtig, dass Sie die korrekten Vorgaben liefern, damit der Coder die Umsetzung auch so durchführen kann, wie Sie sich das vorstellen. Die meisten Webentwickler kennen sich damit aus, und können Ihnen auch genaue Vorgaben nennen, die Sie bei den Exportvorgaben berücksichtigen können. Somit ist ein kurzes Gespräch zwischen der Entwicklungsabteilung und den Designern immer von großem Vorteil. Sind Sie selbst der Entwickler, stellen Sie lediglich sicher, dass Sie Ihre Implementierung nach aktuellen und modernen Gesichtspunkten umsetzen. Das heißt, überprüfen Sie mit Hilfe der W3C-Vorgaben Ihre eigenen Projekte, und halten Sie sich mit weiteren Infoquellen zu diesem Thema auf dem Laufenden. Einige dieser Informationsquellen erfahren Sie auch während dieses Videotrainings.

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!