Artikeleinführung von Wulin.com (www.vevb.com): Der vollständige Name von SVG ist skalierbare Vektorgrafiken. Wenn Sie Adobe Illustrator verwendet haben, glaube ich, dass Sie mit diesem geeigneten Format von Bildern nicht nicht vertraut sind!
Bevor wir SVG verwenden, werfen wir zuerst einen Blick auf SVG und erklären, warum wir SVG verwenden.
Der vollständige Name von SVG ist skalierbare Vektorgrafiken. Wenn Sie Adobe Illustrator verwendet haben, glaube ich, dass Sie mit diesem geeigneten Format von Bildern nicht nicht vertraut sind!
Warum SVG verwenden? BrowserunterstützungWenn Sie diese Versionen des Browsers unterstützen müssen, können Sie Modernizr wie folgt verwenden:
if (! modernizr.svg) {
$ (. gblogo img) .attr (src, bilder/logo.png);
}
Oder verwenden Sie den folgenden einfacheren Code:
<img src = gblogo.svg onError = this.onError = null; this.src = gblogo.png>
SVG -Dateien werden als allgemeine Bilder verwendetSie können es wie folgt direkt als Bild verwenden:
<img src = logo.svg href = class = logo>
csswang.com
</a>
CSS -Code:
.Logo {
Anzeige:
textindent:
Breite:
Höhe:
Hintergrund:
Hintergrundgröße:
}
Verwenden von Inline-SVGSie können den SVG -Code direkt in den Körper kopieren und sehen das Bild wie folgt:
<body>
<!-Kopieren Sie den SVG-Code hier und das Bild wird angezeigt->
</body>
Kontrolle SVG mit CSSSie können CSS verwenden, um die SVG -Datei zu steuern. Der folgende Code steuert die Hintergrundfarbe des Bildes, wenn die Maus suspendiert wird:
<g class = logo transform = translate (0.000000.500.000000) Skala (0,100000, -0.100000)
FILL =#00000 STROKE = NONE>
Der obige Code definiert eine Klasse eines Logos, und wir können sie in CSS wie folgt definieren:
.Logo: Hover {
füllen:
...
}
Beachten Sie, dass wir in SVG Füllung anstelle von Hintergrund verwenden, um die Hintergrundfarbe zu definieren.
Sie können sogar Filter verwenden, um die Mehrdeutigkeit wie folgt zu kontrollieren:
.Logo: Hover {
füllen:
Filter:
}
Wenn Sie die Maus verwenden, um das Bild zu bewegen, wird der folgende Effekt sein.
Online -Debugging:
Zusammenfassung von SVG -verwandten ToolsSVG ist ein sehr leistungsstarkes Bildformat, mit dem Sie Bilder effizient verarbeiten können und eine flexiblere und leistungsfähigere Grafikanzeige als JPG oder PNG aufweist. Ich glaube, wenn es rechtzeitig angewendet wird, wird es definitiv die beliebteste Bildverarbeitungsmethode!