Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Illustrator CC für Webdesigner: SVG

SVG-Code in eigener Website einfügen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Für viele ist die Arbeit mit SVG zu umständlich. Per Hand ein SVG-File zu erzeugen, ist sicher nicht der praktikabelste Weg. Das Video beschreibt, wie das Erzeugen des SVG-Codes und die Übernahme in einen HTML-Editor zum Kinderspiel werden.

Transkript

SVG hat in den letzten Jahren, na ja, ich sage mal, so etwas wie ein Schattendasein geführt. Die Funktion oder diese Technik gibt es ja schon lange, und auch die Browser unterstützen das zumindest teilweise schon recht lange zurückliegend. Trotzdem, ich habe auch mit ganz vielen bekannten Entwicklern aus der Branche gesprochen, und jeder hat dann gesagt, auch die Designer meinten das: Es ist ja ganz toll und auch die Qualität, ja, sicher, super, aber dieser Sourcecode! Da stimme ich schon zu. So einen SVG-Sourcecode per Hand zu schreiben, das ist sicherlich kein Spaß. Und dass das dann auch in der Praxis nicht relevant ist oder sich durchsetzten konnte, war klar. Bis zu dem Zeitpunkt den wir jetzt erreicht haben, in Verbindung mit Illustrator. Ich habe hier wieder das Logo in Illustrator gezeichnet. Also ganz simpel, und auch die Schrift bereits in Pfade umgewandelt. Die Frage die sich jetzt stellt, ist: Wie bekomme ich nun ein solches Dokument in eine HTML-Seite, und zwar als SVG-Code? Nun, nichts leichter als das! Ich markiere mir das Objekt, das ich haben möchte, einfach mit COMMAND oder Strg+C, je nach Rechner, in die Zwischenablage. So, und jetzt wechsle ich mal zu einem HTL-Editor, in dem Falle ist es der Dreamweaver, und erzeuge ein neues Dokument. Ganz normal, einfach ein HTML-Dokument, nichts Besonderes. Jetzt machen wir Folgendes-- Nein, ich gehe nochmal zurück. Ich möchte Ihnen noch etwas demonstrieren, fällt mir gerade ein. Und zwar, ich markiere mir nochmal dieses Objekt und wechsle in die Ebene. So, und diese Ebene, die bekommt von mir jetzt einen neuen Namen, nämlich einfach "Logo". Mehr nicht! Jetzt machen wir das Ganze nochmal. Ich kopiere das in die Zwischenablage, wechsle jetzt in mein eben erstelltes Dokument und schreibe hier rein "SVG-Import". Ich mache mir ein wenig Platz im normalen Bereich des Bodytextes oder -containers. Und jetzt der Oberknaller! Einfach "Bearbeiten, Einfügen" oder alternativ COMMAND, Strg+V. Ja, und da sehen Sie, bekomme ich den validen-- Und das ist ganz wichtig, man sieht hier schon den Hinweis darauf, "w3". Das heißt, nach dem Vorgang, das ist valider Sourcecode aus Illustrator heraus. Und Sie sehen, warum ich das jetzt gerade noch gemacht habe: Hier habe ich eine ID "logo", und mit dieser ID, da kann ich gleich im weiteren Verlauf noch ein bisschen spielen. Ich speichere das zunächst mal ab und benenne das Dokument "index.html" oder einfach "index_svg.html", und dann speichere ich das ab. Ich wechsle in den Ordner und öffne das Ganze mit Google Chrome. Und da sieht man, jetzt habe ich das Ganze in meiner Website, und zwar richtig frei skalierbar, egal in welcher Größe, perfekte Qualität! Ja, und auf dieses Dokument kann ich natürlich auch jederzeit zugreifen. Ich gehe nochmal in den HTML-Code. Dann sieht man, da das eine ganz normale ID ist, steht mir ja nichts im Wege, dass ich z. B. einfach mal ein neues Stylesheet aufbaue. Und das Ganze nenne ich jetzt-- Ich greife auf die ID "logo" zu und mal ganz einfach, nehme eine Breite von 50% der Website, und speichere das Dokument ebenfalls wieder ab. Ich wechsle in den Webbrowser, aktualisiere und Sie sehen, jetzt habe ich das Ganze schon an der entsprechenden Stelle stehen, wo es hin soll, und so ein bisschen zumindest den Ansatz auf Responsive-Funktionen, die werden damit deutlich. Ich kann Ihnen noch etwas zeigen, das ist auch ganz interessant. Ich ändere das mal anstatt 50 % in 500 Pixel, also eine feste Angabe, speichere das ab. Jetzt habe ich das Dokument hier drin, und wenn man Ganze jetzt mit COMMAND+ oder - oder Strl +/- vergrößert, dann sieht man nämlich auch nochmal, wie Klasse diese Qualität ist! Egal, welche Größenordnung ich habe, egal, wie weit ich hineinzoome oder dergleichen, ich habe perfekte Schrift, ich habe perfekte Grafik und muss mich da nicht um solche Rasterfragmente kümmern, wie wir sie üblicherweise bei PNG-, JPG- oder GIF-Grafiken haben. Und das ist meiner Meinung nach ein super Workflow. Und ob das Ganze jetzt zunächst einfach in einem Body-Bereich drinsteht, wie ich das Ihnen jetzt demonstriert habe, oder Sie haben bereits eine Website-Struktur mit den entsprechenden DIV-Containern, z. B. für den Randbereich, für das Logo, für den Header, den Footer. Genauso leicht kopieren Sie solche SVG-Grafiken an diese Positionen. Die passen sich ja an. Also, wenn Sie die DIVs in einer entsprechenden Breite deklariert haben, passt sich das SVG diesem DIV an, und damit glaube ich, ist das kein allzu großes Problem mehr, aus Illustrator heraus diese Grafiken als SVG-Code zu übernehmen. Und wenn Sie das Ganze noch in der minimalen Form machen, dass Sie alles zusammenrücken, das kann man ja auch im Dreamweaver im Nachhinein formatieren, dann haben Sie wirklich eine schnelle Webseite mit perfekten SVG-Grafiken in allen Größen, in allen Auflösungen. Und wenn Sie möchten, können Sie immer noch ein Fallback programmieren, indem Sie vielleicht eine PNG-Grafik dann einblenden, wenn irgendwie ein Browser das nicht mitmachen möchte, aber ich denke, dieser Workflow zeigt deutlich auf, wie einfach das Zusammenspiel der Applikationen in der Creative Cloud ist. insbesondere mit dem Im- beziehungsweise Export aus Illustrator und dem Import in den Dreamweaver.

Illustrator CC 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!