CSS mit SVG: Nutzung der realen Welt

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="https://img.php.cn/" 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!