HTML SVG
Zuvor verlangte das Miniprojekt eine kleine persönliche Site. Diese Lektion startet einen optionalen Grafik-Track. SVG lässt HTML scharfe Icons und Formen mit Mathematik statt Pixeln zeichnen. Praxis-Fokus: SVG auf die Seite bringen — kein voller Designkurs.
Warum SVG in einem HTML-Kurs
Rasterbilder werden beim Vergrößern unscharf. SVG beschreibt Pfade und Formen — Logos bleiben scharf. Anfänger treffen SVG als Header-Icon oder Abzeichen. Inline vs. Datei hält Seiten leicht und zugänglich.
Direkte Antwort
1) Inline: svg-Baum ins HTML. 2) Datei: .svg speichern und per img mit alt laden. 3) Inline bei CSS/JS-Hooks oder präziser Benennung. 4) img für statische Logos. 5) Bedeutsame Grafiken benennen. 6) Dieser Kurs nur Einbetten.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
Winziges Inline-SVG
Inline-SVG ist Markup. Ein Kreis mit viewBox und zugänglichem Namen zeigt die HTML-Aufgabe: der Browser zeichnet; Sie steuern Größe und Bedeutung.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Das Inline-Demo lesen
- svg ist die Wurzel
- width/height Layout-Box; viewBox Koordinaten
- circle ist eine Kindform
- role=img plus aria-label benennt die Grafik
- Größenänderung bleibt scharf
- Miniprojekt nutzte img für Fotos; hier kann das „Bild“ Markup sein
SVG als Bilddatei
Existiert logo.svg, behandeln Sie es wie Media: src und sinnvolles alt. Pfade müssen zum Ordner passen.
<img src="images/logo.svg" alt="Site logo" width="120">
Das Dateimuster lesen
- src zeigt auf .svg
- alt trägt den zugänglichen Namen
- width steuert Layout; Vektoren skalieren sauber
- CSS stylt die img-Box leichter als jeden Pfad inline
- Eine Datei über Seiten wiederverwenden
- Als Nächstes canvas — JS-Pixel, anderes Werkzeug
Inline vs. Datei wählen
- Icon zum Einfärben per CSS: oft inline
- Statisches Markenlogo: img
- Fotos: Rasterformate
- Riesige Inline-Illustration: Datei bevorzugen
- Bedeutsame Grafik: immer benennen
- Tiefes SVG-Authoring: späterer Pfad
Übung — SVG auf der Seite
- Kreis einfügen; prüfen.
- width/height ändern — bleibt scharf.
- .svg unter images/ mit img+alt laden.
- aria-label/alt kurz entfernen.
- Inline-Icon neben Überschrift auf Mini-Projekt-Kopie.
- Satz: SVG ist skalierbares Markup oder Vektordatei — kein Fotoersatz.
- Ausblick: canvas zeichnet per Skript.
Typische Fehler
- Fehlende zugängliche Namen
- Riesige Inline-SVG-Bäume
- SVG für Fotos statt JPEG/PNG/WebP
- viewBox weglassen
- SVG mit canvas verwechseln
- Intro als vollen Illustrationskurs nehmen
- a11y-Gewohnheiten vom Miniprojekt vergessen
Zusammenfassung
- SVG zeichnet auflösungsunabhängige Formen und Icons
- Inline mit svg oder Datei mit img
- Bedeutsame Grafiken benennen
- Vektoren skalieren; Fotos bleiben Raster
- Miniprojekt war Site-Build; hier startet optional Grafik
- Als Nächstes: HTML-canvas
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt