SVG: Ein tiefes Styling und Manipulation mit CSS

skalierbare Vektorgrafiken (SVG) ist ein leichtes XML-basiertes Vektorbildformat für Webgrafiken. Die Unterstützung für Interaktivit?t und Animation in Verbindung mit einer exzellenten Browserkompatibilit?t (seit IE9) macht es zu einem leistungsstarken Tool für die moderne Webentwicklung. In diesem Artikel wird die Nutzung von CSS zum Stil und zur Manipulation von SVGs untersucht, wodurch ihre Vielseitigkeit im Webdesign verbessert wird.

Schlüsselvorteile von SVG

• Skalierbarkeit: Im Gegensatz zu Rasterbildern (PNG, JPG, GIF) behalten SVGs die Knusprigkeit in jeder Gr??e, perfekt für Logos und Symbole.
• CSS -Styling: SVG -Elemente innerhalb des DOM mithilfe von CSS direkt stylen und manipulieren, wodurch dynamische Interaktionen und ein konsequentes Styling über mehrere SVGs hinweg erm?glicht werden.
• SVG Sprites: konsolidieren Sie mehrere Bilder in eine einzelne Datei, optimieren Sie die Leistung durch Reduzierung von HTTP -Anforderungen und Verbesserung des Caching.
• Erweiterte Funktionen: Unterstützung für Animationen und Interaktivit?t in eigenst?ndigen SVG -Dateien erweitert seine Anwendungen über einfache Grafiken hinaus.

Warum SVGs Bitmaps

übertrifft

Bitmap -Formate definieren Bildfarbenpixel nach Pixel. Ein kleines Bild erfordert Tausende von Pixeln, was auch nach Komprimierung zu gr??eren Dateigr??en führt. Vergr??erte Bitmaps führt zu Pixelierung.

SVGs, die vektorbasiert sind, definieren Sie Bilder mit Punkten, Linien und Kurven. Dies führt zu erheblich kleineren Dateigr??en und überlegener Skalierbarkeit. Beispielsweise kann ein einfacher Kreis in SVG unter 150 Bytes im Vergleich zu einem viel gr??eren ?quivalenten PNG oder JPG sein. Zus?tzlich sind SVG -Hintergründe von Natur aus transparent. Die XML -Struktur verbessert auch die Zug?nglichkeit und SEO.

SVG -Erstellungswerkzeuge

W?hrend des Verst?ndnisses grundlegender SVG -Zeichnung ist vorteilhaft, spezialisierte Tools vereinfachen das Erstellen komplexer Formen und das Generieren von Code:

• kommerziell: Adobe Illustrator, Affinit?tsdesigner, Sketch
• Open Source: Inkscape
• online (kostenlos/kommerziell): Gravit Designer, Vectr, Svg-Edit, Boxy SVG, Vecteezy
• Diagrammbibliotheken: SVG -Diagramme aus Daten mit JavaScript generieren.

Tools wie SVGO und SVGOMG k?nnen den generierten SVG -Code für kleinere Dateigr??en weiter optimieren.

Verwenden von SVGs als statische Bilder

innerhalb <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS with SVG: Real World Usage ">

.myelement {
  background-image: url("mybackground.svg");
}

sind jedoch interaktive Elemente innerhalb des SVG deaktiviert. CSS -Transformationen und Filter k?nnen angewendet werden, was h?ufig überlegene Ergebnisse für die Bitmap -Skalierung führt.

eingeleitete SVG -Hintergründe in CSS

SVGs in CSS als Hintergrundbilder für kleine, wiederverwendbare Symbole effizient und vermeiden zus?tzliche HTTP -Anforderungen:

effizient:

.myelement {
  background-image: url("mybackground.svg");
}

Tools wie POSTCSS ASSETS -Plugins optimieren diesen Vorgang.

reaktionsschnelle SVG -Bilder

<svg> Für reaktionsschnelles Design stellen Sie sicher, dass die Standardbreite und -h?he innerhalb des

-Tages definiert werden, um die Gr??enprobleme zu verhindern:

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
}

Verwenden Sie dann CSS:

<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg>

HTML-in-angegebene SVG-Bilder

SVG direkt in HTML einbetten, macht es Teil des DOM und erm?glicht die Manipulation von CSS und JavaScript:

img {
  display: block;
  max-width: 100%;
  height: auto;
}

CSS kann dann auf bestimmte SVG -Elemente abzielen:

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg>

:hover Dies erm?glicht ein dynamisches Styling mit

, überg?ngen und Animationen.

SVG Sprites: Effiziente Symbolmanagement

<symbol> Kombinieren Sie mehrere Symbole in einer einzelnen SVG -Datei mit

Elementen:

#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}

<use> Verwenden Sie

Elemente zur Referenz -Symbole in HTML:

<svg>
  <defs>
    <symbol id="icon-folder" viewBox="0 0 32 32">...</symbol>
  </defs>
</svg>

Dies verbessert die Leistung, erfordert jedoch eine sorgf?ltige Handhabung für die Kompatibilit?t des Cross-Browsers und die effiziente Caching. Techniken wie AJAX -Beladung und -injektion k?nnen diese Herausforderungen bew?ltigen.

SVG -Effekte auf den HTML -Inhalt (Masken, Ausschnitt, Filter)

mask Nutzen Sie CSS clip-path, filter und

Eigenschaften, um Effekte wie Maskierung, Ausschnitt und visuelle Filter auf SVG -Elemente anzuwenden. Die Referenzierung von SVG -Elementen innerhalb von CSS erm?glicht komplexe visuelle Manipulationen.

eigenst?ndige SVGs mit eingebetteter Interaktivit?t

eigenst?ndige SVG-Dateien k?nnen CSS, JavaScript und sogar Bitmaps enthalten, wodurch in sich geschlossene interaktive Grafiken erstellt werden. Dies erm?glicht die Verteilung interaktiver Inhalte, ohne sich auf externe Ressourcen zu verlassen.

Schlussfolgerung

SVG, kombiniert mit CSS, bietet einen leistungsstarken und effizienten Ansatz für Webgrafiken. Die Vielseitigkeit erstreckt sich von einfachen statischen Bildern bis zu komplexen, interaktiven Animationen und bietet zahlreiche M?glichkeiten zur Verbesserung des Webdesigns.

Das obige ist der detaillierte Inhalt vonCSS mit SVG: Nutzung der realen Welt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!