Share
Als Webdesigner ist es höchste Zeit, dass Sie wissen, wie Sie SVG (Scalable Vector Graphics) in Ihre Websites integrieren. Lassen Sie uns nun einen Blick auf die Grundlagen von SVG sowie auf komplexere Designs wie Logos oder Icons werfen.
Auf der WWDC 2012 gab Apple kürzlich die Veröffentlichung des neuen Retina-Displays MacBook Pro bekannt. Retina-Displays haben eine höhere Pixeldichte (220,5 ppi) als normale Bildschirme oder Monitore, und Apple behauptet, dass die Pixeldichte der Retina-Technologie so hoch ist, dass das Auge bei einem typischen Betrachtungsabstand keine Pixelation wahrnehmen kann. Wenn Sie ein Retina-Display aus erster Hand gesehen haben, werden Sie sicher zustimmen, dass sie atemberaubend aussehen. Diese Retina-Displays können jedoch für uns Webdesigner Probleme bereiten.
Das Problem tritt auf, wenn Bilder, die zuvor als 72ppi gespeichert wurden, auf Retina-Displays verzerrt aussehen. Die Lösung dieses Problems ist immer noch nicht zu 100% gelöst, und Designer suchen nach neuen Wegen, dieses Problem zu umgehen.
Eine mögliche Lösung (in einigen Fällen) ist die Verwendung von SVG. Warum sollten Sie SVG verwenden? SVGs werden als Vektoren gerendert und können daher auf jede Bildschirmauflösung skaliert werden, unter der wir sie betrachten, während die Schärfe und Kristallqualität beibehalten werden, die wir bei ihrer ersten Entwicklung beabsichtigten.
Dies löst nicht alle Probleme. Wir können SVG nicht verwenden, um pixelbasierte Bilder wie .jpg oder png zu rendern (dafür können wir jedoch immer das canvas-Tag verwenden). Wenn es um illustrierte Icons oder Logos geht, erweist sich SVG als äußerst nützlich. Heute werde ich Ihnen die Grundlagen der Verwendung von SVG zeigen und zeigen, wie Sie Ihre Vektoren, die Sie in Adobe Illustrator entworfen haben, mit Leichtigkeit in Ihre Websites integrieren können.
Bevor wir einsteigen, gebe ich Ihnen einen schnellen Überblick über SVG:
Fangen wir einfach an. Wir erstellen eine Linie. Dazu fügen wir einem HTML-Dokument den folgenden Code hinzu.
Zuerst verwenden wir das 'svg'-Tag und dann fügen wir darin das XML-Markup hinzu. Folgendes definieren wir:
Wenn wir zum Beispiel eine diagonale Linie erstellen möchten, können wir das y2-Attribut auf 200 setzen. Dies würde den Endpunkt der Linie um 200 herabsetzen und somit eine diagonale Linie erzeugen. Wir können auch einige Stile darauf anwenden und machen dies mit CSS. Hier haben wir einige Inline-Stile verwendet, Sie können sie jedoch auch in einem externen Stylesheet verwenden.
Kreise können mit Ausnahme einiger Attribute auf ähnliche Weise wie eine Linie erstellt werden. Hier erstellen wir einen silbernen Kreis mit schwarzem Rand und einem Radius von 50.
Mit den Attributen cx und cy können wir die x- und y-Koordinaten der Mitte des Kreises festlegen. Wenn wir diese Attribute übersehen, wird der Mittelpunkt des Kreises auf '0' gesetzt, wodurch der Kreis von der Seite abgeschnitten wird. Das mit 'r' gekennzeichnete Attribut legt schließlich den Radius des Kreises fest.
Wie Sie inzwischen sehen können, ist das Erstellen von Formen mit SVG sehr einfach. Das Erstellen eines Rechtecks ist keine Ausnahme.
Ähnlich wie beim Festlegen der Breite und Höhe eines Elements in CSS machen wir dasselbe, verwenden jedoch die svg-Attribute 'rect'.
Ellipse funktioniert fast genauso wie das Erstellen eines Kreises. Diesmal haben wir jedoch nicht nur einen festen Radius, sondern separate Attribute für den X- und Y-Radius.
Polygone werden etwas kniffliger (aber nur ein bisschen). Wir beginnen damit, dem Polygon eine Füllfarbe, einen Orangenstrich und eine Strichbreite von 10 zu geben. Anschließend übergeben wir die Punktattribute an das Polygon. Jedes Koordinatenpaar definiert die x- und y-Koordinate jedes Eckpunkts des Polygons. In dieser Demonstration habe ich einen Stern geschaffen.
Wie bereits erwähnt, ist SVG großartig, denn wenn Sie Text einschließen, können Suchmaschinen ihn indizieren - anders als andere Rendering-Engines wie Flash.
So fügen wir Text hinzu:
Webdesigntuts+
Im obigen Code können Sie sehen, dass wir die x- und y-Koordinaten hinzugefügt haben. Legen Sie dann einige CSS-Stile fest, z. B. Schriftfamilie, Gewichtung, Größe und Farbe.
Innerhalb des Pfad-Tags müssen wir uns auf das Attribut 'd' konzentrieren. Dieses 'd'-Attribut beschreibt den zu erstellenden Pfad. Jeder Befehl innerhalb des Attributs 'd' ist einer der folgenden Befehlsbuchstaben, gefolgt von seinen Parametern. Die Befehle für das Attribut 'd' lauten wie folgt:
Hier ist ein Beispielcode:
Wir können unseren Text sogar von oben setzen, um diesem Pfad folgendermaßen zu folgen:
Wir haben den Pfad im 'defs'-Tag definiert und ihm eine ID von' path1 'gegeben. Wir können dies dann mit dem Attribut 'textPath' auf den Text anwenden.
Nachdem wir nun die Grundlagen zum Erstellen von Formen mit SVG erläutert haben, ist es an der Zeit, etwas komplexer zu machen. Zum Glück für uns muss es nicht sein Das komplex, eigentlich dank Adobe Illustrator sehr einfach. Für diejenigen, die sich mit Illustrator nicht auskennen, kann dies wie folgt beschrieben werden:
Die branchenweit führende Vektorzeichnungsumgebung für die Erstellung von Grafiken, die medienübergreifend skaliert werden.
Öffnen Sie Illustrator und erstellen Sie Ihr Logo oder Symbol. Die meisten professionellen Logos sollten mit Vektoren erstellt worden sein, damit Sie sie von Ihren Kunden erhalten können. Wenn nicht, können Sie versuchen, sie selbst neu zu erstellen. Wenn Sie nicht mit Illustrator arbeiten, gibt es bei Vectortuts eine Fülle von Informationen+
Wenn Sie Ihr Logo oder Symbol haben, gehen Sie zu "Datei> Speichern unter" und wählen Sie "SVG" aus der Dropdown-Liste "Dateityp". Geben Sie Ihrer Datei einen Namen und klicken Sie auf "Speichern". Der SVG-Optionsdialog sollte sich dann öffnen. Dort wählen Sie "SVG-Code anzeigen". Dadurch wird der Code im Browser geöffnet. Sie müssen lediglich die svg-Tags in Ihr HTML-Dokument kopieren und darin einfügen. Wie einfach war das??
Sie können Illustrator auch zum Erstellen von Pfaden verwenden. Zeichnen Sie einfach eine Linie in Illustrator und greifen Sie auf die Attributdaten "d" zu, die Sie wie oben beschrieben für einen Pfad verwenden können. Beispielsweise wurde der Pfad, den ich für den obigen Text "webdesigntuts +" erstellt habe, in Illustrator erstellt und dann in mein Dokument exportiert.
Anschließend können Sie das SVG-Tag mit Standard-CSS-Methoden formatieren oder in Ihr Dokument einfügen. Sie können ihn auch in ein Ankertag umschließen, um einen Link zu erstellen, oder ihn mit JavaScript ansprechen, um zusätzliche Funktionen hinzuzufügen.
Es ist nur eine Frage der Zeit, bis Netzhaut und Pixeldichte zu jedem Gerät und Bildschirm gehören, das wir verwenden, und dies wird auch in Zukunft mit zunehmender Dichte vorangetrieben. Durch die Verwendung von SVG können wir skalierbare Grafiken erstellen, die kristallklar werden und mit höheren Bildschirmauflösungen für die Zukunft bereit sind. Natürlich sind SVGs nicht in jeder Situation praktisch, aber für vektorbasierte Illustrationen im Web ist dies definitiv der beste Weg.
Accentsconagua