SVGs

Die Geheimwaffe für gestochen scharfe Grafiken

SVGs, oder skalierbare Vektorgrafiken, sind die geheimen Meister der Bildkunst im Webdesign. Sie sind wie der Alchemist unter den Bildern: leicht, flexibel und immer bereit, ihre Form zu ändern, ohne dabei auch nur einen Hauch von Schärfe zu verlieren. Egal ob auf dem kleinsten Handydisplay oder auf einem gigantischen Monitor – SVGs bleiben immer kristallklar, als hätten sie einen Verjüngungstrank getrunken.

Weil SVGs auf XML basieren, kannst du sie direkt in HTML einbinden und mit CSS zauberhaft animieren oder gestalten. Ob Logos, Icons oder interaktive Diagramme – SVGs sind immer eine gute Wahl, um deine Designs dynamisch und auf jedem Gerät perfekt darzustellen.

Los geht’s

Linie
Rechteck

Kreis
Vektorgrafiken einbinden

SVGs im HTML

Vektorgrafiken direkt im Code – flexibel, scharf und skalierbar!

Linie

Der erste Pinselstrich deines Designs

Der einfachste Zauber im Buch! Mit einem <line>-Element ziehst du mühelos eine Linie. Denk es dir wie den ersten Strich eines magischen Pinsels: klar, gerade mit viel Potenzial.

<svg width="200" height="200">
    <line x1="10" y1="10" x2="190" y2="190" stroke="purple" stroke-width="5">
</svg>

Rechteck

Struktur und Ordnung auf einen Blick

Rechtecke sind das Brot und Butter der SVG-Welt! Mit dem <rect>-Element zauberst du quadratische oder rechteckige Formen auf deine Seite. Praktisch, wenn du deinem Design etwas mehr Struktur verleihen möchtest.

<svg width="200" height="200">
    <rect x="10" y="10" width="180" height="100" fill="pink" stroke="purple" stroke-width="5">
</svg>

Kreis

Rund und perfekt, die Tänzer der Formen

Kreise sind die eleganten Tänzer der SVG-Welt. Mit <circle> zeichnest du perfekte runde Formen – so einfach, dass es fast wie Magie wirkt. Einfach den Mittelpunkt und den Radius bestimmen, und schwupps, da ist er.

<svg width="200" height="200" class="circle">
    <circle cx="100" cy="100" r="50">
</svg>

Vektorgrafiken umrechnen lassen

Vom Bild zur Magie – deine Grafiken als SVG

Hast du eine Grafik, die du in eine scharfe, skalierbare SVG-Grafik verwandeln willst? Kein Problem! Websites wie convertio.co helfen dir dabei. Grafik hochladen, und zack – es wird in eine SVG verwandelt. Grafikprogramme wie Illustrator oder Inkscape speichern SVGs direkt oder spucken den Code aus. So wird aus einem Bild eine magische Grafik, die auf jeder Bildschirmgröße glänzt!

<img src="assets/img/fox.svg" alt="" class="img">

In dieser Lektion hast du gelernt…

Wie du mit <line> eine einfache Linie zeichnest, indem du Start- und Endpunkte sowie Farbe und Dicke definierst.
Warum <rect> ideal für Rechtecke und quadratische Formen ist, um Struktur und Ordnung in SVG-Designs zu bringen.
Wie du mit <circle> perfekte Kreise erstellst, indem du den Mittelpunkt (cx, cy) und den Radius (r) bestimmst.
Warum SVGs vektorbasiert sind, sodass sie verlustfrei skalierbar bleiben und auf jeder Bildschirmgröße gestochen scharf aussehen.
Wie du bestehende Bilder in SVGs umwandelst, um sie als flexible, leichtgewichtige Grafiken für deine Webseite zu nutzen.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

weiter geht’s