Codeoptimierung ist immer ein ewiges Bedürfnis von Programmierern, und die sinnvolle Verwendung von SVG-Bildern zum Ersetzen einiger Bilder in PNG/JPG und anderen Formaten ist ein wichtiger Teil der Front-End-Optimierung SVG-Bilder. Was sind die Vorteile:
SVG kann von vielen Tools (z. B. Notepad) gelesen und geändert werden.
Ein paar kleine Beispiele für SVG-Bilder:
Werfen wir einen Blick auf den Code für das dritte Freigabesymbol:
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g Stroke=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 Stroke-linejoin=round/> <path d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
Schüler, die SVG nicht verstehen, müssen jetzt Fragezeichen im Gesicht haben, genau wie beim ersten Mal, als ich sie traf. Keine Sorge, fangen wir mit den Grundlagen an.
Was ist SVG?SVG ist ein Bildformat, das auf der XML-Syntax basiert und sein vollständiger Name ist Scalable Vector Graphics. Andere Bildformate basieren auf der Pixelverarbeitung, während SVG eine Beschreibung der Form eines Bildes ist. Es handelt sich also im Wesentlichen um eine Textdatei mit geringer Größe, die nicht verzerrt wird, egal wie oft sie vergrößert wird. Darüber hinaus ist SVG ein Standard des World Wide Web Consortium und SVG ist in W3C-Standards wie DOM und XSL integriert.
Wie benutzt man?In HTML5 können Sie SVG-Elemente direkt in HTML-Seiten einbetten, wie zum Beispiel das kleine rote Herz oben:
<body> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 width=60 height=25 rx=1/> <mask id=bx=0 y=0 width=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g transform=translate(-9 -56) fill=none fill-rule=evenodd> <use Stroke= #EDEEEF mask=url(#b) Stroke-width=2 xlink:href=#a/> <path d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>
SVG-Code kann auch in eine Datei mit der Endung .svg geschrieben und dann mithilfe von Tags wie <img> , <object> , <embed> und <iframe> in die Webseite eingefügt werden.
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSS kann auch SVG verwenden
.logo {Hintergrund: url(logo.svg);}SVG-Dateien können auch in die BASE64-Kodierung konvertiert und dann als Daten-URIs auf Webseiten geschrieben werden.
<img src=data:image/svg+xml;base64,[data]>SVG-Syntax
1. <svg> -Tag
SVG-Code wird im Top-Level-Tag <svg> platziert. Unten finden Sie ein Beispiel.
<svg width=100% height=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Die Attribute width und height von <svg> geben die Breite und Höhe an, die das SVG-Bild im HTML-Element einnimmt. Neben relativen Einheiten können auch absolute Einheiten (Einheit: Pixel) verwendet werden. Wenn diese beiden Attribute nicht angegeben sind, beträgt die Standardgröße des SVG-Bildes 300 Pixel (Breite) x 150 Pixel (Höhe).
Wenn Sie nur einen Teil des SVG-Bildes anzeigen möchten, geben Sie das viewBox-Attribut an.
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Der Wert des Attributs <viewBox> besteht aus vier Zahlen, die die Abszisse und Ordinate der oberen linken Ecke sowie die Breite und Höhe des Ansichtsfensters darstellen. Im obigen Code ist das SVG-Bild 100 Pixel breit x 100 Pixel hoch und das viewBox-Attribut gibt an, dass das Ansichtsfenster am Punkt (50, 50) beginnt. Was Sie also tatsächlich sehen, ist der Viertelkreis in der unteren rechten Ecke.
Beachten Sie, dass das Ansichtsfenster in den Raum passen muss, in dem es sich befindet. Im obigen Code beträgt die Größe des Ansichtsfensters 50 x 50. Da die Größe des SVG-Bilds 100 x 100 beträgt, wird das Ansichtsfenster auf die Größe des SVG-Bilds vergrößert, d. h. es wird viermal vergrößert .
Wenn Sie das Breitenattribut und das Höhenattribut nicht angeben und nur das ViewBox-Attribut angeben, entspricht dies der Angabe nur des Seitenverhältnisses des SVG-Bilds. In diesem Fall entspricht die Standardgröße des SVG-Bildes der Größe des darin enthaltenen HTML-Elements.
2. <circle> -Tag
Das <circle> -Tag stellt einen Kreis dar.
<svg width=300 height=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 class=red /> <circle cx=150 cy=50 r=25 class =ausgefallen /></svg>
Der obige Code definiert drei Kreise. Die cx-, cy- und r-Attribute des <circle> -Tags sind die Abszisse, die Ordinate bzw. der Radius und die Einheit ist Pixel. Die Koordinaten sind relativ zum Ursprung der oberen linken Ecke der <svg> -Leinwand.
Das Klassenattribut wird verwendet, um die entsprechende CSS-Klasse anzugeben.
.red { fill: red;}.fancy { fill: none; Stroke: black;}Die CSS-Eigenschaften von SVG unterscheiden sich von denen von Webelementen.
Füllung: Füllfarbe
Strich: Strichfarbe
Strichbreite: Rahmenbreite
3. <line> -Tag
Mit dem Tag <line> werden gerade Linien gezeichnet.
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=Stroke:rgb(0,0,0);Stroke-width:5 /></svg>
Im obigen Code stellen das Attribut x1 und das Attribut y1 des Tags <line> die Abszissen- und Ordinatenkoordinaten des Startpunkts des Liniensegments dar. Das Attribut x2 und das Attribut y2 stellen die Abszissen- und Ordinatenkoordinaten des Endpunkts des Liniensegments dar Liniensegment; das Stilattribut stellt den Stil des Liniensegments dar.
4. <polyline> -Tag
Das Tag <polyline> wird zum Zeichnen einer Polylinie verwendet.
<SVG Breite = 300 Höhe = 180> <Polylinienpunkte = 3,3 30,28 3,53 Füllung = keine Strich = Schwarz /></svg>
Das Punkteattribut von <polyline> gibt die Koordinaten jedes Endpunkts an. Die Abszisse und die Ordinate werden durch Kommas und die Punkte durch Leerzeichen getrennt.
5. <rect> -Tag
Das <rect> -Tag wird zum Zeichnen von Rechtecken verwendet.
<svg width=300 height=180> <rect x=0 y=0 height=100 width=200 style=stroke: #70d5dd; fill: #dd524b /></svg>
Das x-Attribut und das y-Attribut von <rect> geben die Abszissen- und Ordinatenkoordinaten des oberen linken Eckendpunkts des Rechtecks an. Die Breiten- und Höhenattribute geben die Breite und Höhe (Einheitspixel) des Rechtecks an.
6. <ellipse> -Tag
Das <ellipse> -Tag wird zum Zeichnen von Ellipsen verwendet.
<svg width=300 height=180> <ellipse cx=60 cy=60 ry=40 rx=20 Stroke=Black Stroke-width=5 fill=silver/></svg>
Das cx-Attribut und das cy-Attribut von <ellipse> geben die Abszissen- und Ordinatenkoordinaten des Ellipsenzentrums an (Einheitspixel); das rx-Attribut und das ry-Attribut geben den Radius der Quer- und Längsachse der Ellipse an (Einheitspixel).
7. <polygon> -Tag
Das <polygon> -Tag wird zum Zeichnen von Polygonen verwendet.
<SVG-Breite = 300 Höhe = 180> <Polygonfüllung = grüner Strich = orange Strichbreite = 1 Punkte = 0,0 100,0 100,100 0,100 0,0/></svg>
Das Punkteattribut von <polygon> gibt die Koordinaten jedes Endpunkts an. Die Abszisse und die Ordinate werden durch Kommas und die Punkte durch Leerzeichen getrennt.
8. <path> -Tag
Mit dem Tag <path> wird der Pfad angegeben.
<svg width=300 height=180><path d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >
Das d-Attribut von <path> stellt die Zeichenreihenfolge dar. Sein Wert ist eine lange Zeichenfolge, gefolgt von Koordinaten.
M: bewegen zu (moveto)
L: Zeichnen Sie eine gerade Linie nach (lineto)
Z: geschlossener Pfad
9. <text> -Tag
Das <text> -Tag wird zum Zeichnen von Text verwendet.
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
Die x- und y-Attribute von <text> stellen die Abszisse und Ordinate des Startpunkts der Grundlinie des Textblocks dar. Der Textstil kann mithilfe der Klassen- oder Stilattribute angegeben werden.
10. <use> -Tag
Das <use> -Tag wird zum Kopieren einer Form verwendet.
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white Stroke=blue /></svg>
Das href-Attribut von <use> gibt den zu kopierenden Knoten an, und das x-Attribut und das y-Attribut sind die Koordinaten der oberen linken Ecke von <use> . Darüber hinaus können Sie auch Breiten- und Höhenkoordinaten angeben.
11. <g> -Tag
Das <g> -Tag wird verwendet, um mehrere Formen zur einfachen Wiederverwendung in einer Gruppe zusammenzufassen.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white Stroke=blue /></svg>
12. <defs> -Tag
Das <defs> -Tag wird für benutzerdefinierte Formen verwendet. Der darin enthaltene Code wird nicht angezeigt und dient nur als Referenz.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white Stroke=blue /></svg>
13. <pattern> -Tag
Das <pattern> -Tag wird verwendet, um eine Form anzupassen, die zum Kacheln eines Bereichs referenziert werden kann.
<svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 patternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 width=100% height=100% fill=url(#dots) /></svg>
Im obigen Code definiert das <pattern> -Tag einen Kreis als Punktmuster. patternUnits=userSpaceOnUse bedeutet, dass die Breite und Länge von <pattern> tatsächliche Pixelwerte sind. Weisen Sie dann diesen Modus zu, um das untere Rechteck zu füllen.
14. <image> -Tag
Das <image> -Tag wird zum Einfügen von Bilddateien verwendet.
<svg viewBox=0 0 100 100 width=100 height=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
Im obigen Code gibt xlink:href -Attribut von <image> die Quelle des Bildes an.
15. <animate> -Tag
Das <animate> -Tag wird zum Erzeugen von Animationseffekten verwendet.
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animate attributeName=x from=0 to=500 dur=2s repeatCount=indefinite /> </rect ></svg>
Im obigen Code bewegt sich das Rechteck weiter und erzeugt Animationseffekte.
Die Attribute von <animate> haben die folgende Bedeutung.
attributeName: Der Name des Attributs, in dem der Animationseffekt auftritt.
from: Der Anfangswert einer einzelnen Animation.
to: Der Endwert einer einzelnen Animation.
dur: die Dauer einer einzelnen Animation.
RepeatCount: Animationsschleifenmodus.
Animationen können für mehrere Eigenschaften definiert werden.
<animate attributeName=x from=0 to=500 dur=2s repeatCount=indefinite /><animate attributeName=width to=500 dur=2s repeatCount=indefinite />
16. <animateTransform> -Tag
Das <animate> -Tag hat keine Auswirkung auf das CSS-Transformationsattribut. Wenn eine Transformation erforderlich ist, muss das <animateTransform>-Tag verwendet werden.
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransform attributeName=transform type=rotate begin=0s dur=10s from=0 200 200 to=360 400 400 repeatCount=indefinite /> </rect></svg>
Im obigen Code ist der Effekt von <animateTransform> die Drehung. Zu diesem Zeitpunkt haben die Werte von „von“ und „bis“ drei Zahlen. Die erste Zahl ist der Winkelwert und der zweite und dritte Wert sind die Koordinaten von das Rotationszentrum. from=0 200 200 bedeutet, dass am Anfang der Winkel 0 beträgt und die Drehung um (200, 200) beginnt; to=360 400 400 bedeutet, dass am Ende der Winkel 360 beträgt und die Drehung um (400) beginnt , 400).
1. DOM-Operationen
Wenn der SVG-Code direkt in die HTML-Webseite geschrieben wird, wird er Teil des DOM der Webseite und kann direkt über das DOM manipuliert werden.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 retainAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
Nachdem der obige Code in die Webseite eingefügt wurde, können Sie den Stil mithilfe von CSS anpassen.
Kreis { Strichbreite: 5; Strich: #f00;}Kreis: Hover { Strich: #090;}Das SVG kann dann mit JavaScript-Code manipuliert werden.
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('circle clicked - enlarging'); mycircle.setAttribute('r', 60);}, FALSCH);Der obige Code gibt an, dass beim Klicken auf die Grafik das r-Attribut des Kreiselements neu geschrieben wird.
2. Holen Sie sich SVG DOM
Verwenden Sie die Tags <object> , <iframe> und <embed> , um SVG-Dateien einzufügen und SVG-DOM zu erhalten.
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();Beachten Sie, dass Sie das SVG-DOM nicht abrufen können, wenn Sie das <img>-Tag zum Einfügen einer SVG-Datei verwenden.
3. Lesen Sie den SVG-Quellcode
Da es sich bei der SVG-Datei um einen XML-Text handelt, kann der SVG-Quellcode durch Lesen des XML-Codes gelesen werden.
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 height=440 > <!-- SVG-Code --> </svg></div>
Verwenden Sie die Methode serializeToString() der XMLSerializer-Instanz, um den Code des SVG-Elements abzurufen.
var svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));4. Konvertieren Sie das SVG-Bild in ein Canvas-Bild
Zuerst müssen Sie ein neues Image-Objekt erstellen und das SVG-Bild dem src-Attribut des Image-Objekts zuweisen.
var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL ||. var url = DOMURL.createObjectURL(svg);img.src = url; Wenn das Bild dann geladen ist, zeichnen Sie es in das <canvas> -Element.
img.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ZusammenfassungSVG kann noch viel mehr als das. Wir werden die mit SVG erstellten Animationseffekte und Texteffekte später ausführlich erläutern, aber lassen Sie uns heute hier aufhören.
console.log('右下角点好看呦')Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder Script Home unterstützt.