Ein Blick in skalierbare Vektorgrafiken (SVG)
Vektorgrafiken sind in Printmedien weit verbreitet. In einer Website können wir auch Vektorgrafiken mit SVG oder Skalierbare Vektorgrafiken. SVG wird aus der offiziellen Spezifikation auf W3.org zitiert und wird beschrieben als:
Eine Sprache zum Beschreiben von zweidimensionalen Grafiken in XML. SVG ermöglicht drei Arten von ßgraphischen Objekten: Vektorgraphikformen (z. B. aus geraden Linien und Kurven bestehende Pfade), Bilder und Text.
Es gibt es seit 1999 tatsächlich und seit dem 16. August 2011 ist es eine W3C-Empfehlung. SVG wird jedoch immer noch erheblich unterbeansprucht, während die Verwendung von Vector anstelle von Bitmap für die Bereitstellung von Grafiken oder Bildern auf einer Website viele Vorteile bietet.
SVG-Vorteile
In Bezug auf das Bereitstellen von Grafiken auf Websites bietet SVG einige Vorteile gegenüber Bitmap, darunter einige:
Auflösung unabhängig
Die Bitmap- / Raster-Grafik ist von der Auflösung abhängig - sie basiert auf Pixeln. Die bereitgestellten Grafiken sehen pixelig aus, wenn sie bei einer bestimmten Zoomstufe verändert werden. Dies geschieht nicht bei Vektorgrafiken, die von der Auflösung unabhängig sind, da die Grafik durch eine mathematische Gleichung ausgedrückt wird skalierbar auf jeder Zoomstufe bei gleichbleibender Qualität, auch bei Retina Display.
HTTP-Anforderung reduzieren
SVG kann mit direkt in ein HTML-Dokument eingebettet werden svg Tag, so dass der Browser keine Anforderung zum Bereitstellen der Grafik stellen muss. Dies führt auch zu einer besseren Ladeleistung für die Website.
Styling und Scripting
Einbetten direkt mit svg tag ermöglicht es uns auch, die Grafik einfach über CSS zu gestalten. Wir können Objekteigenschaften ändern B. Hintergrundfarbe, Deckkraft, Ränder usw. wie bei normalen HTML-Tags. In ähnlicher Weise können wir die Grafik auch über JavaScript bearbeiten.
Kann animiert und bearbeitet werden
SVG-Objekte können animiert werden, wenn sie das Animationselement verwenden, oder durch die JavaScript-Bibliothek wie jQuery. Das SVG-Objekt kann auch mit einem beliebigen Textcode-Editor oder einer Grafiksoftware wie Inkscape (kostenlos) oder Adobe Illustrator bearbeitet werden.
Kleinere Dateigröße
SVG hat im Vergleich zu Bitmap eine kleinere Dateigröße, die eine ähnliche grafische Darstellung aufweist.
Grundformen mit SVG zeichnen
Entsprechend der Spezifikation können wir einige Grundformen wie die zeichnen Rechteck, Kreis, Linie, Ellipse, Polylinie und Polygon mit SVG und damit der Browser die SVG-Grafik darstellen kann, müssen all diese Grafikelemente in die eingefügt werden Etikett. Sehen wir uns die Beispiele unten für weitere Details an:
Linie
Zeichnen eine Linie In SVG können wir die verwenden
Wie Sie oben sehen können, wird die Koordinaten für den Startpunkt der Linie mit den ersten beiden Attributen ausgedrückt x1 und x2, Die Endpunktkoordinate der Linie wird mit ausgedrückt y1 und y2.
Es gibt auch zwei andere Attribute, die Schlaganfall und Strichbreite Diese werden zum Definieren der Farbe und der Breite des Rahmens verwendet. Alternativ können wir diese Attribute auch wie in einem Inline-Stil definieren:
Irgendwann macht es einfach dasselbe.
- Demo anzeigen “Linie”
Polylinie
Es ist fast wie das
Punkte Attribute, die alle Koordinaten speichern, die die Linien bilden.
- Demo anzeigen “Polylinie”
Rechteck
Das Zeichnen eines Rechtecks ist damit auch einfach
- Demo anzeigen “Rechteck”
Kreis
Wir können auch einen Kreis mit zeichnen 100 Radius, der mit definiert ist r Attribut:
Die ersten beiden Attribute, cx und cy definieren die Mittelpunktskoordinate des Kreises. Im obigen Beispiel haben wir gesetzt 102 beide für die x und y koordinieren, wenn diese Attribute nicht angegeben sind, 0 wird als Standardwert verwendet.
- Demo anzeigen “Kreis”
Ellipse
Wir können eine Ellipse mit zeichnen x Linienradius und y Linienradius mit rx und ry Attribut;
- Demo anzeigen “Ellipse”
Polygon
Mit dem
- Demo anzeigen “Polygon”
Vektor-Grafik-Editor verwenden
Wie Sie sehen, ist das Zeichnen einfacher Objekte mit SVG in HTML recht einfach. Wenn das Objekt jedoch komplexer wird, ist diese Übung nicht mehr ideal und verursacht Kopfschmerzen.
Glücklicherweise können wir, wie oben erwähnt, einen Vektorgrafik-Editor verwenden Adobe Illustrator oder Inkscape den Job erledigen. Wenn Sie mit dieser Software vertraut sind, ist es sicherlich viel einfacher, Objekte mit ihrer grafischen Benutzeroberfläche zu zeichnen, als die Grafik selbst in einem HTML-Tag zu codieren.
Wenn Sie mit Inkscape arbeiten, Sie können Ihre Vektorgrafik als einfaches SVG speichern und dann im Textcode-Editor öffnen. Nun sollten Sie die SVG-Codes in der Datei finden. Kopieren Sie alle Codes und fügen Sie sie in Ihr HTML-Dokument ein.
Oder Sie können das auch einbetten .svg Datei durch eines dieser Elemente; einbetten, iframe und Objekt, zum Beispiel;
Die Ergebnisse werden schließlich gleich sein.
In diesem Beispiel verwende ich diesen Apple iPod von OpenClipArt.org.
- Demo anzeigen “iPod”
Browser-Unterstützung
In Bezug auf die Browserunterstützung wurde SVG in allen gängigen Browsern mit Ausnahme von IE8 und früheren Versionen sehr gut unterstützt. Dieses Problem kann jedoch mit dieser JavaScript-Bibliothek namens Raphael.js gelöst werden. Zur Vereinfachung verwenden wir dieses Tool ReadySetRaphael.com, um unseren SVG-Code in ein von Raphael unterstütztes Format zu konvertieren. Hier ist wie.
Laden Sie zunächst die herunter Raphael.js Bibliothek zu Ihrem HTML-Dokument. Laden Sie dann das hoch .svg Datei auf der Site, kopieren Sie den generierten Code und fügen Sie ihn in den folgenden Ladevorgang ein Funktion;
window.onload = function () // der Raphael-Code geht hier hin
In der Karosserie tag, fügen Sie folgendes ein div mit rsr ID-Attribut;
Das ist es, du bist fertig. Schauen Sie sich das Beispiel unter dem Link unten an.
- Demo anzeigen “Raphael”
Abschließende Gedanken
Das sind also die Grundlagen von SVG. Wir hoffen, Sie haben jetzt ein gutes Verständnis für dieses Thema. Dies ist der beste Weg, um Ihre Website für jede Bildschirmauflösung zu optimieren, selbst für die Verwendung auf einem Retina-Display.
Wenn Sie eine abenteuerlustige Person sind, haben wir hier ein paar weitere Referenzen und Diskussionen hinzugefügt, um tiefer in dieses Thema einzutauchen.
- Eine Einführung in SVG - W3 Schulen
- Unabhängige Auflösung mit SVG - Smashing Magazine
- Warum verwenden Sie nicht SVG? - NetTuts
Danke fürs Lesen und wir hoffen, dass Ihnen dieser Beitrag gefallen hat.
- Demo anzeigen
- Quelle herunterladen
