HTML-Svg-Zeichnung. Was ist SVG: Vor- und Nachteile der Verwendung. Einbinden einer SVG-Datei mit der Include-Funktion
SVG-Dateien sind skalierbare Vektorgrafiken. Genauer gesagt handelt es sich um eine Sprache zur Beschreibung zweidimensionaler Grafiken. Grundlage ist die Auszeichnungssprache XML.
Dieses Format hat eine Reihe von Vorteilen: Als Vektorbilder behalten SVG-Bilder ihre Qualität, egal wie sie skaliert oder in der Größe geändert werden. SVG-Bilder unterstützen Interaktivität und Animation. SVG ist ein W3C-Standard, was bedeutet, dass es eine gute und qualitativ hochwertige Unterstützung bietet. Sie können SVG-Dateien nicht nur in Grafikeditoren, sondern auch in jedem Texteditor erstellen.
XML-basierte SVG-Bilder sind durchsuchbar, indiziert und können mit Skripten versehen und komprimiert werden.
Bevor wir zum Zeichnen ohne Zeichnen übergehen, schauen wir uns die Struktur einer leeren SVG-Datei an, die ausreicht, um in jedem Programm angezeigt zu werden.
1.
2.
3.
4.
5.
Der Einfachheit halber sind die Zeilen nummeriert. Die erste Zeile enthält die standardmäßige XML-Dokumentdeklaration.
Die zweite Zeile gibt das DTD-Schema des Dokuments an. Die dritte Zeile legt die Größe des erstellten Dokuments auf 600 x 600 Pixel fest. Erstes Tag-Attribut
Kreis.
Um einen Kreis in unserer leeren SVG-Datei zu erstellen, fügen Sie die Linie hinzu
Die Attribute sind die Koordinaten des Kreismittelpunkts (cx und cy) und sein Radius (r). In diesem Fall liegt der Koordinatenursprung in der oberen linken Ecke des Arbeitsblatts. Vollständige SVG-Datei:
Genau in der Mitte des Dokuments wird ein Kreis mit einem Radius von 100 Pixel erstellt. Da es keine Angaben zu Füllfarbe, Strich, Ebenen und anderen Effekten gab, wird der Kreis ohne Strich gezeichnet und mit Schwarz gefüllt, was wir sehen, wenn wir das Dokument in Inkscape öffnen. Beachten Sie, dass das Dokument auch keine Ebenen enthält.
Attributbezeichnungen cx, cy und r ist serienmäßig. Lassen Sie uns den Strich und die Füllung unseres Kreises festlegen und auch das Strichgewicht auf 6 px einstellen.
fill="grün" strich="gelb" strichbreite="6"/>
Die Füllung ist auf Grün eingestellt und der Strich ist gelb.
Wenn Sie in diesem Dokument eine Ebene erstellen, können Sie interessanterweise sehen, dass sich die Kreiszeichnung nicht auf der erstellten Ebene befindet, sondern irgendwo dort? Relevante Attribute sind rot hervorgehoben. Wenn es notwendig ist, einen Kreis ohne Füllung oder Kontur zu erstellen, setzen Sie den Wert des entsprechenden Attributs auf none
Schlaganfall = "keine"
Um die Transparenz der Füllung zu ändern, fügen Sie ein Attribut hinzu Opazität, zum Beispiel Opazität = "0,5" reduziert die Transparenz der Füllung um das Zweifache, und um die Transparenz des Strichs zu ändern, fügen Sie das Attribut hinzu Stroke-Opazität, zum Beispiel Strichopazität = "0,5" Reduziert die Deckkraft des Strichs um das Zweifache.
Rechtecke, Quadrate.
Rechtecke sehen so aus
Attribute eines Rechtecks (Quadrats) rechtwinkl Geben Sie die Koordinaten der oberen linken Ecke sowie die Breite und Höhe des Rechtecks an. Füll- und Stricheinstellungen sehen gleich aus.
Nun, im letzten Kreis mit einem Quadrat
Um die Transparenz zu ändern, verwenden wir den bereits bekannten Ansatz - fügen Sie das Attribut hinzu Opazität für Füllung und Attribut Stroke-Opazität für Schlaganfall.
Fortsetzung folgt.
Vektorgrafiken sind im Druck weit verbreitet. Aber für Websites können wir es auch mit SVG verwenden ( Skalierbare Vektorgrafik - skalierbare Vektorgrafik). Gemäß der W3.org-Spezifikation ist SVG wie folgt definiert:
Eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML. SVG ermöglicht die Verwendung von drei Arten von Objekten: Vektorgrafikformen (z. B. Pfade aus geraden Linien und Kurven), Bilder und Text.
Auch wenn SVG seit August 2011 in den W3C-Empfehlungen enthalten ist, diese Technologie praktisch nicht in Webprojekten verwendet, obwohl dies zuvor der Fall war Bitmaps verschiedene Vorteile. In dieser Reihe von Tutorials stellen wir Ihnen vor, wie Sie mit SVG-Elementen auf Webseiten arbeiten.
Vorteile von SVG
Auflösungsunabhängigkeit
Rasterbilder sind auflösungsabhängig. Grafiken werden nicht mehr darstellbar, wenn die Größe auf bestimmte Maßstäbe geändert wird. AUS Vektorgrafiken Eine solche Situation ist im Prinzip unmöglich, da alles durch mathematische Ausdrücke dargestellt wird, die automatisch neu berechnet werden, wenn sich der Maßstab ändert, und die Qualität unter allen Bedingungen erhalten bleibt.
Reduzierung der Anzahl von HTTP-Anfragen
SVG kann direkt eingebettet werden HTML-Dokument Verwenden des svg-Tags, sodass der Browser keine Anfragen zum Bereitstellen der Grafiken benötigt. Dieser Ansatz wirkt sich positiv auf die Ladeeigenschaften der Website aus.
Stile und Skripte
Das Einbetten mit dem svg-Tag macht es auch einfach, Grafiken mit CSS zu stylen. Sie können Objekteigenschaften wie Hintergrundfarbe, Transparenz, Rahmen usw. ändern. Ebenso können Grafiken mit JavaScript manipuliert werden.
Einfach zu bearbeiten und zu animieren
SVG-Objekte können mit CSS oder JavaScript animiert werden. Außerdem können SVG-Objekte mit einem Texteditor geändert werden.
Kleinere Dateigröße
SVG hat im Vergleich zu Rastergrafiken eine kleinere Dateigröße.
Grundlegende SVG-Formen
Gemäß der Spezifikation können wir mehrere Grundformen zeichnen: Linie, Polylinie, Rechteck, Kreis, Ellipse. Alle Elemente müssen in das Tag eingefügt werden . Betrachten wir die Grundelemente im Detail.
Linie
Ein Element wird verwendet, um eine Linie in SVG zu zeichnen
Der Anfang des Segments wird durch die Attribute x1 und y1 definiert, und der Endpunkt wird durch die Koordinaten in den Attributen x2 und y2 definiert.
Es gibt auch zwei weitere Attribute (stroke und stroke-width), die verwendet werden, um die Farbe bzw. Breite der Linie zu definieren.
Dieses Objekt ist ähnlich wie
Element
Rechteck mit Element gerendert
Verwenden Sie das Element, um einen Kreis zu zeichnen
Die ersten beiden Attribute cx und cy definieren die Koordinaten des Zentrums. Im obigen Beispiel haben wir beide Koordinaten auf 102 gesetzt. Der Standardwert ist 0.
Um eine Ellipse zu zeichnen, verwenden Sie das Element
Element
Verwendung des Editors für Vektorgrafiken
Das Rendern einfacher SVG-Objekte in HTML ist einfach. Mit zunehmender Komplexität des Objekts kann diese Vorgehensweise jedoch zu einem großen Arbeitsaufwand führen.
Aber Sie können jeden Editor für Vektorgrafiken verwenden (zum Beispiel Adobe Illustrator oder Inkscape) um Objekte zu erstellen. Wenn Sie ein solches Tool besitzen, ist es viel einfacher, die erforderlichen Objekte darin zu zeichnen, als Grafiken in einem HTML-Tag zu codieren.
Sie können Befehle für Vektorgrafiken aus einer Datei in ein HTML-Dokument kopieren. Oder Sie können die .svg-Datei mit einem der folgenden Elemente einbetten: embed , iframe und object .
Das Ergebnis wird dasselbe sein.
Browser-Unterstützung
SVG wird in den meisten modernen Browsern gut unterstützt, mit Ausnahme von IE Version 8 und früher. Aber das Problem lässt sich mit lösen JavaScript-Bibliotheken. Zur Vereinfachung können Sie das Tool ReadySetRaphael.com verwenden, um SVG-Code in das Raphael-Format zu konvertieren.
Zuerst laden wir die Bibliothek und binden sie in ein HTML-Dokument ein. Dann laden wir die .svg-Datei, kopieren den resultierenden Code und fügen ihn nach dem Laden in die Funktion ein:
Im Body-Tag platzieren wir das folgende div-Element mit der ID rsr .
Und alles ist bereit.
Im nächsten Tutorial der Reihe sehen wir uns an, wie man SVG-Objekte in CSS formatiert.
Lassen wir die Frage, ob es ratsam ist, SVG auf der Website zu verwenden, beiseite. Den Nutzen dieser Technologie muss jeder für sich selbst bestimmen. Außerdem wurde dieses Thema schon mehrfach angesprochen.
Betrachten wir nun die Methoden zum Einbetten von SVG, deren Vor- und Nachteile sowie die Möglichkeiten zur Manipulation von SVG-Elementen.
Der Artikel ist in erster Linie für diejenigen gedacht, die noch nicht verwenden Vektorgrafiken auf ihren Webseiten, will aber eigentlich mit einem Bein in der Zukunft präsent sein.
Für die Neugierigen gebe ich gleich eine zusammenfassende Tabelle:
1 Sie können die Farbe, Größe, Ausrichtung und andere Stile von reinem Text ändern
2 Stile müssen entweder in die SVG-Datei selbst geschrieben oder mit einem externen Stil in SVG am Anfang der Datei verbunden werden:
In Wahrheit funktionieren Stile, die in SVG geschrieben sind, auch, wenn das IMG- oder Hintergrundbild-Tag verwendet wird, aber das macht keinen Sinn.
Ja, Sie können aus SVG einen Icon-Font erstellen, außerdem gibt es frei verteilte Icon-Fonts. Aber es gibt eine Reihe schwerwiegender Einschränkungen. Wie jedes Zeichen in einer SVG-Schriftart können Symbole in einer Schriftart nicht mehr als eine Farbe haben.
Hier sind einige Dienste, bei denen Sie vorgefertigte Symbolsätze herunterladen oder Ihre eigenen hochladen und Ihre eigene Symbolschrift erstellen können:
Beachten Sie, dass Sie beim Erstellen einer eigenen Schriftart alle Objekte im Pfad konvertieren müssen. Tags und Attribute, die übersprungen werden: Kreis, Rechteck, Strich, Strichbreite, Füllung, Füllregel.
Wenn Sie eine Symbolschrift verwenden, werden alle Elemente des SVG-Objekts zu einem Symbol kombiniert, und Sie können damit über CSS und JS nur als Schriftartsymbol interagieren: Größe mit Schriftgröße ändern, Farbe mit Farbe ändern, animieren mit CSS-Hilfe Animation oder JS und so weiter.
+
das Icon verhält sich wie ein Schriftsymbol, und alle Parameter werden auf die gleiche Weise per CSS konfiguriert (Größe, Farbe, Ausrichtung usw.);
+
die einzige Möglichkeit, die im IE 8 ohne zusätzliche Manipulationen funktioniert;
–
alle Elemente SVG-Datei werden zu einem Zeichen zusammengefasst, sodass es nur als Ganzes mit CSS oder JS gesteuert werden kann;
–
nur einfarbige Symbole werden unterstützt;
–
Wenn das Laden der Schriftart fehlschlägt, sieht der Benutzer die Symbole entweder überhaupt nicht oder, wenn die Symbolcodes mit den Unicode-Zeichen übereinstimmen, werden die entsprechenden Zeichen angezeigt.
SVG als OBJEKT
Leider (oder glücklicherweise) blockieren Codepen und jsfiddle aus Sicherheitsgründen das Laden externer Objekte.
Das Einbetten sieht so aus:
Das Objekt bettet ein iframe-ähnliches Datenattributelement ein und fügt das Markup der enthaltenen Datei hinzu, sodass auf die Elemente mit JS zugegriffen werden kann, jedoch nicht auf die übliche Weise:
Var object = document.getElementById("'object'"); //Elementobjekt abrufen var svgDocument = object.contentDocument; //Svg-Element im Objekt abrufen var svgElement = svgDocument.getElementById("some_id_in_svg"); //beliebiges Element innerhalb von svg svgElement.setAttribute("fill", "black"); //ändere die Attribute des ausgewählten Elements
Es ist erwähnenswert, dass sich die Stile für SVG-Elemente in CSS von den Standardstilen unterscheiden. Sie können die vollständige Liste der von SVG unterstützten Stile sehen.
SVG verhält sich nicht wie ein normales Bild, es kann nicht überproportional transformiert werden, indem man eine Breite und Höhe festlegt. Das Objekt darin nimmt die maximale Fläche ein und wird im Container zentriert:
Aber das Objekt kann mit CSS wie folgt transformiert werden:
transformieren: scale(2, 1);
IE 8 und darunter unterstützen kein SVG ab dem Wort „absolutely“, daher sollten Sie sich darum kümmern, SVG zu überprüfen und durch eine Bitmap zu ersetzen, wenn es unter den Benutzern Ihrer Website diese spezifische Zielgruppe gibt. Sie können dies auf viele Arten tun, zum Beispiel mit Modernizr, um eine .no-svg-Klasse zum Hauptteil hinzuzufügen:
If (!Modernizr.svg) ( $(body).addClass("no-svg"); )
.no-svg .icon ( Breite: 100px; Höhe: 100px; Hintergrundbild: url("icon.png"); )
Vor- und Nachteile dieses Ansatzes:
+
Sie können eine externe CSS-Datei verwenden, um Stile zu verwalten;
+
+
interaktive Animationen werden unterstützt;
–
Beide Einbettungsmethoden ähneln in gewisser Weise der Einbettung mit dem Objekt-Tag, zum Beispiel können Sie die Proportionen nicht ändern, indem Sie die Breite und Höhe des Containers ändern, aber sie haben mehr Einschränkungen.
In SVG enthaltene externe Stile funktionieren nicht, der Zugriff auf Elemente über JS schlägt ebenfalls fehl. Interaktive Animationen in SVG funktionieren auch nicht. Und Probleme mit IE 8 und darunter bleiben ebenfalls bestehen.
Aber SVG-Animationen funktionieren in beiden Fällen.
Im Fall von IMG sieht die Einbettung wie ein normales Bild aus:
Im Fall von Hintergrundbild als regulärem Block:
.icon ( Hintergrundbild: url("icon.svg"); Breite: 90px; Höhe: 150px; )
Außerdem können Sie mit background-image Sprites verwenden, wie bei PNG-Bildern, und Sie können die Größe mit background-size ändern:
Hintergrundgröße: 90px 150px;
In Anbetracht der Tatsache, dass der Prozentsatz der Personen mit Bildschirmen mit einem Geräte-Pixel-Verhältnis von über 1 und ihren Geräten, die SVG nicht unterstützen, gegen Null tendiert (falls vorhanden), können Sie Medienausdrücke verwenden, um SVG nur für sie zu verbinden, und das PNG verwenden Version für den Rest:
Icon ( background-image: url("icon.png"); ) @media nur Bildschirm und (-webkit-min-device-pixel-ratio: 1.5), nur Bildschirm und (min--moz-device-pixel-ratio : 1,5), nur Bildschirm und (-o-Gerät-Pixel-Verhältnis: 3/2), nur Bildschirm und (min-Gerät-Pixel-Verhältnis: 1,5) ( .icon ( background-image: url("icon.svg "); ) )
Vor- und Nachteile dieser Ansätze:
+
SVG-Animationen und -Filter werden unterstützt;
+
im Fall von Hintergrundbildern können Sie SVG-Sprites verwenden;
–
Sie können die Eigenschaften von SVG-Elementen nicht über CSS oder JS ändern;
–
interaktive Animationen werden nicht unterstützt;
–
Für IE 8 und darunter ist eine Bitmap-Ersetzung erforderlich.
In dieser Version wird der SVG-Code, der durch Öffnen einer beliebigen SVG-Datei mit einem Textdokument erhalten werden kann, direkt in den Seitencode eingebettet.
Zweifellos verschlechtert eine solche Konstruktion die Lesbarkeit des Codes und erhöht sein Volumen, aber es eröffnen sich neue Möglichkeiten.
Wenn Sie beispielsweise eine Reihe von Symbolen in einer SVG-Datei haben, können Sie diese mit einer einfachen Ansichtskonstruktion wiederverwenden:
wo some_svg_element_id die ID des Elements in der ursprünglichen SVG-Datei.
Für ein einzelnes Element können Sie beispielsweise SVG-Transformationen anwenden:
Wenn jedoch eine interaktive Animation auf das Element innerhalb des ursprünglichen SVG angewendet wurde, beispielsweise beim Klicken, wie in der Demo oben, dann funktioniert die Animation beim Duplizieren des Objekts auf allen Elementen gleichzeitig.
SVG-Animationen und -Filter sind ein Thema für einen separaten Artikel, daher beschränke ich mich darauf
Dieser Beitrag ist der erste einer Reihe von Artikeln über SVG-Grafiken (Scalable Vector Graphic), die die Grundlagen von Vektorgrafiken auf der Website behandeln.
Vektorgrafiken sind in der Druckindustrie weit verbreitet. Für Websites gibt es SVG, die laut offizieller Spezifikation auf w3.org eine Sprache zur Beschreibung von 2D-Grafiken in XML ist. SVG umfasst drei Arten von Objekten: Formen, Bilder und Text. SVG existiert seit 1999 und ist seit dem 16. August 2011 in den Empfehlungen enthalten W3C. SVG wird von Webentwicklern stark unterschätzt, obwohl es mehrere wichtige Vorteile hat.
Vorteile von SVG
- Skalierung: Im Gegensatz zu Rastergrafiken verliert SVG beim Skalieren nicht an Qualität, sodass es bequem für die Retina-Entwicklung verwendet werden kann.
- Reduzieren von HTTP-Anfragen: Bei der Verwendung von SVG wird die Anzahl der Aufrufe an den Server reduziert und die Ladegeschwindigkeit der Website entsprechend erhöht.
- Styling und Scripting: Mithilfe von CSS können Sie die Grafikeinstellungen auf der Website ändern, z. B. Hintergrund, Transparenz oder Rahmen.
- Animation und Bearbeitung: Mit Javascript können Sie SVG animieren und in einem Text- oder Grafikeditor (InkScape oder Adobe Illustrator) bearbeiten.
- Geringe Größe: SVG-Objekte wiegen viel weniger als Bitmaps.
Grundlegende SVG-Formen
Laut offizieller Spezifikation können Sie mit SVG einfache Objekte zeichnen: Rechteck, Kreis, Linie, Ellipse, Polylinie oder Polygon mit dem Tag SVG.
einfache Linie mit Tag Linie mit nur zwei Parametern - Startpunkte (x1 und x2) und Endpunkte (y1 und y2):
Sie können auch die Attribute oder Stile für Strich und Strichbreite hinzufügen, um Farbe und Breite festzulegen:
Style="Strichbreite:1; Strich:rgb(0,0,0);"
gestrichelten Linie
Die Syntax ist ähnlich der vorherigen, das Tag wird verwendet Polylinie, Attribut Punkte setzt Punkte:
Rechteck
Durch das Rect-Tag aufgerufen, können einige Attribute hinzugefügt werden:
Kreis
Von Tag aufgerufen Kreis, im Beispiel mit dem Attribut r Radius einstellen cx und cy Stellen Sie die Koordinaten des Zentrums ein:
Ellipse
Von Tag aufgerufen Ellipse, funktioniert ähnlich Kreis, aber Sie können zwei Radien einstellen - Empfang und ry:
Vieleck
Von Tag aufgerufen Polygon, kann ein Polygon eine unterschiedliche Anzahl von Seiten haben:
Verwenden von Editoren
Wie Sie an den Beispielen sehen können, ist das Zeichnen einfacher SVG-Formen sehr einfach, aber Objekte können viel komplexer sein. Dafür müssen Sie Vektorgrafik-Editoren wie Adobe Illustrator oder Inkscape verwenden, wo Sie Dateien im SVG-Format speichern und dann in einem Texteditor bearbeiten können. Sie können SVG mithilfe von Embed, Iframe und Object in eine Seite einbetten:
Ein Beispiel ist ein Bild eines iPods von OpenClipArt.org:
Browser-Unterstützung
SVG wird von fast allen modernen Browsern mit Ausnahme von Internet Explorer 8 und darunter unterstützt. Dies kann jedoch mit der Javascript-Bibliothek Raphael.js behoben werden. Auf ReadySetRaphael.com können Sie eine SVG-Datei in das Format dieser Bibliothek konvertieren.
Zuerst müssen Sie die Raphael.js-Bibliothek auf der gewünschten Seite einbinden, dann die SVG-Datei hochladen, den generierten Code kopieren und in die Funktion einfügen:
Window.onload=function() ( //Raphael-Code hier einfügen)
Auf der Seite einfügen div mit Attribut rsr.
SVG ist ein Bildformat für Vektorgrafiken. Im wahrsten Sinne des Wortes handelt es sich dabei um skalierbare Vektorgrafiken. Das heißt, genau damit arbeiten Sie in Adobe Illustrator. Die Verwendung von SVG in der Webentwicklung ist recht einfach, aber es gibt einige Funktionen, die es wert sind, in Betracht gezogen zu werden.
Wofür wird SVG verwendet?
- Kleine Dateigröße, die gut komprimiert werden kann
- Ohne Qualitätsverlust auf jede beliebige Größe skalieren
- Sieht auf Retina-Displays großartig aus
- Volle Designkontrolle in Interaktivität und in Filtern
Lassen Sie uns etwas für die bevorstehende Arbeit in Adobe Illustrator zeichnen. Nehmen Sie den Kiwi-Vogel:
Bitte beachten Sie, dass die Leinwand genau am Bildrand geschnitten wird. Canvas in SVG ist genauso aufgebaut wie PNG oder JPG. Sie können die Datei direkt aus Adobe Illustrator als SVG-Datei speichern.
Nachdem Sie die Datei gespeichert haben, wird ein weiteres Dialogfeld mit SVG-Optionen angezeigt. Um ehrlich zu sein, weiß ich nicht viel über alle Einstellungen, die in diesem Fenster angezeigt werden. Es gibt eine Spezifikation für SVG-Profile. Wenn Sie also interessiert sind, können Sie sie lesen. Ich finde, dass SVG 1.1 gut funktioniert.
Das Coole dabei ist, dass Sie entweder auf OK klicken und die Datei speichern oder auf die Schaltfläche „SVG-Code…“ klicken können und ein Texteditor mit dem SVG-Code geöffnet wird.
Beide Wege können hilfreich sein.
Verwendung von SVG als img-Tag
In Illustrator ist unsere Leinwand 612px ✕ 502px groß.
Wie groß das Bild auf der Seite sein wird, ist Ihnen überlassen. Sie können die Größe eines Bildes ändern, indem Sie die Breiten- und Höheneigenschaften definieren, genau wie bei PNG oder JPG. Hier ist ein Beispiel:
Schauen Sie sich diesen Stift an!
So erstellen Sie Cross-Browser-SVG
Wenn Sie SVG auf diese Weise verwenden, müssen Sie sich der unterschiedlichen Browserunterstützung bewusst sein. Grundsätzlich funktioniert SVG überall außer IE8 und niedriger und Android 2.3 und niedriger.
Wenn Sie SVG verwenden müssen, aber auch Unterstützung für die oben aufgeführten Browser benötigen, gibt es mehrere Möglichkeiten, das Problem zu lösen. Ich habe verschiedene Techniken in verschiedenen Projekten verwendet, um dieses Problem zu lösen.
Eine Möglichkeit, die SVG-Unterstützung zu überprüfen, ist mit Modernizr, das den src-Pfad ändert:
If (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )
David Bushell hat sich eine sehr einfache Alternative ausgedacht, die jedoch Javascript im Markup enthält:
Der SVGeezy-Dienst kann auch helfen. Im weiteren Verlauf dieses Artikels werden wir viele verschiedene Fallback-Methoden für die SVG-Unterstützung durchgehen.
Verwenden von SVG als Hintergrundbild
Ähnlich wie das img-Tag kann SVG als Hintergrundbild verwendet werden:
Kiwi Corp .logo ( Anzeige: Block; Texteinzug: -9999px; Breite: 100px; Höhe: 82px; Hintergrund: url(kiwi.svg); Hintergrundgröße: 100px 82px; )Beachten Sie, dass wir die Hintergrundgröße auf genau die gleiche Größe wie das Element setzen. Dies muss getan werden, sonst würden wir einen kleinen oberen Teil des Originalbildes sehen. Diese Zahlen berücksichtigen die ursprünglichen Proportionen des Bildes. Sie können auch Schlüsselwörter wie „enthalten“ als Werte für die Hintergrundgröße verwenden, damit das Bild das gesamte Element ausfüllt.
Die Verwendung von SVG als Hintergrundbild hinterlässt Spuren in der Browserunterstützung, aber im Allgemeinen ist alles dasselbe wie bei der Verwendung des img-Tags.
Modernizr kann uns hier noch effizienter helfen als mit img. Die Sache ist, wenn Sie das Hintergrundbild durch ein unterstütztes Format ersetzen, wird nur eine HTTP-Anforderung ausgeführt, anstatt zwei, wie dies bei img der Fall ist. Modernizr fügt dem HTML-Tag den Klassennamen „no-svg“ hinzu, wenn der Browser keine SVG-Unterstützung hat:
Hauptheader ( Hintergrund: url(logo.svg) no-repeat oben links; Hintergrundgröße: enthalten; ) .no-svg .main-header ( Hintergrundbild: url(logo.png); )
Wenn Sie Probleme mit den beiden oben genannten Möglichkeiten zur Verwendung von SVG haben, finden Sie hier weitere Möglichkeiten zum Platzieren von Vektorgrafiken.
Verwenden von "Inline" -SVG
Es wurde oben erwähnt, dass Sie beim Speichern eines Bildes im SVG-Format mit dem Illustrator-Editor den richtigen SVG-Code erhalten können (Sie können die Datei auch mit einem Texteditor öffnen und diesen Code kopieren). Sie können diesen Code in Ihren HTML-Code kopieren und das SVG wird genauso gerendert wie bei der Verwendung von img.
Dies kann nützlich sein, da das Bild mit dem Code zum Dokument geliefert wird und keine HTTP-Anfrage gestellt wird. Mit anderen Worten, die Vorteile sind die gleichen wie bei der Verwendung von Daten-URI-Daten. Allerdings gibt es auch Nachteile. Aufgrund des Einfügens des direkten SVG-Codes sieht das Dokument aus wie ein großes aufgeblähtes Stück Scheiße.
Es gibt auch eine Möglichkeit, SVGs serverseitig einzufügen:
SVG-Optimierung
Adobe Illustrator optimiert standardmäßig nicht das resultierende SVG-Bild. Es bietet einen DOCTYPE und Anmerkungen, was im Grunde Müll ist. SVG ist standardmäßig ziemlich leicht, aber warum nicht noch kleiner machen? Peter Collingridge hat ein Online-SVG-Optimierungstool bereitgestellt. Mit diesem Service können Sie eine alte Datei hochladen und erhalten eine optimierte neue.
Wenn Sie mehr Hardcore wollen, kein Problem, hier ist ein Tool zum Optimieren von SVG mit dem serverseitigen Javascript Node JS-Tool https://github.com/svg/svgo
SVG gestalten
Sehen Sie, wie ähnlich SVG zu HTML ist? Dies liegt daran, dass es sich bei beiden um XML-Daten handelt. In unserem Design bilden zwei Elemente die Basis, nämlich Ellipse und Pfad. Wir können für sie ganz einfach Klassen per HTML-Code spezifizieren.
Jetzt können wir diese Elemente mit benutzerdefiniertem SVG-CSS steuern. Dieses CSS muss nicht direkt in das SVG eingebettet werden, es kann absolut überall platziert werden. Bitte beachten Sie, dass SVG-Elemente über einen speziellen Stilsatz verfügen, der speziell für die Arbeit mit Vektorgrafiken entwickelt wurde. Beispielsweise wird nicht die übliche Hintergrundfarbe verwendet, sondern eine Füllung. Obwohl einige normale Stile auch funktionieren, wie :hover.
Kiwi (Füllen: #94d31b; ) .kiwi:hover (Füllen: #ace63c; )
SVG hat einige lustige Filter. Zum Beispiel Unschärfe:
...Dann können Sie dies optional in CSS anwenden:
Ground:hover ( filter: url(#pictureFilter); )
Folgendes ist passiert:
Schauen Sie sich diesen Stift an!
Unterstützung für „Inline“-SVG-Browser
Eine Liste von Browsern, die diesen SVG-Rendering-Modus unterstützen, finden Sie hier http://caniuse.com/#feat=svg-html5. Auch hier keine Unterstützung in IE8 und Android 2.3.
Eine der Fallback-Optionen für diese Art von SVG:
...Dann verwenden wir wieder Modernizr:
Logo-Fallback ( Anzeige: keine; /* Stellen Sie sicher, dass es dieselbe Größe hat wie die SVG-Datei */ ) .no-svg .logo-fallback ( background-image: url(logo.png); )
Verwenden von SVG als Objekt
Wenn Ihnen die Verwendung von "Inline"-SVG nicht gefällt (denken Sie daran, dass diese Option Nachteile hat, wie z. B. fehlendes Caching), können Sie das SVG an ein Objekt binden und es dann mit CSS ändern:
Wir verwenden Modernizr für die browserübergreifende Unterstützung:
No-svg .logo ( Breite: 200px; Höhe: 164px; Hintergrundbild: url(kiwi.png); )
Diese Option funktioniert hervorragend mit Caching und hat die größte Browserunterstützung von allen oben genannten. Aber um auf ein solches Objekt mit CSS einzuwirken, müssen Sie Stile direkt in die SVG-Datei schreiben.
...Die Verwendung von Daten-URIs ist eine Möglichkeit, das Gewicht von SVG zu reduzieren. Mobilefish.com stellt zu diesem Zweck ein Online-Optimierungstool zur Verfügung. Es reicht aus, den Inhalt Ihrer SVG-Datei einzufügen und das Formular auszufüllen, dann wird das Ergebnis in einem Textfeld angezeigt, das kopiert werden kann. Es sieht aus wie das:
Sie können diesen Code überall verwenden! Zum Beispiel:
Logo ( Hintergrund: url(data:image/svg+xml;base64,); )
Und übrigens, wenn Sie einen Inline-Stil im SVG haben, der vor base64 ist, funktioniert es, wenn Sie ihn wie ein Objekt verwenden!
