SVGs gestalten

Vektorgrafiken perfekt anpassen!

SVG-Grafiken zu gestalten ist wie das Ankleiden eines Zauberwesens: Mit ein wenig CSS hauchst du ihnen wahrhaft Magie ein. Ein Hauch von Farbe hier, ein dramatischer Schlagschatten dort, und plötzlich leuchtet dein SVG wie ein Kristall im Dämmerlicht. stroke und stroke-width verleihen den Rändern den Charme einer alten Landkarte, und wer wagt, bringt mit transform das ganze Ding in Bewegung, ob gedreht, geschrumpft oder dramatisch aufgeblasen.

Doch Vorsicht, zaubere nicht zu wild! Mit transition und opacity schwebt dein SVG sanft dahin, doch zu viele Effekte und es flackert wie eine überreizte Kristallkugel. Ein SVG weiß, wann genug ist, denn manchmal ist weniger mehr, selbst in der Magie.

Los geht’s

Vektorgrafiken anpassen

SVGs stylen

Formen, Farben, Effekte – Vektorgrafiken perfekt anpassen!

SVGs lassen sich direkt mit CSS stylen, indem du Füllfarben, Strichstärken und Größen definierst. Mit SVG-Attributen steuerst du Linien, Flächen und Farbverläufe direkt im Code. Zusätzlich kannst du Schatten, Konturen und Filter nutzen, um deine Vektorgrafiken perfekt in dein Design einzufügen.

.circle {
    /* Farbe des Kreises */
    fill: green;
    /* Randfarbe */
    stroke: yellowgreen;
    /* Randdicke */
    stroke-width: 7px;
    /* Filter- und Schatteneffekte */
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
    opacity: 0.9;
}

Hier wird ein SVG-Kreis gestaltet mit einer grünen Füllung und einem gelbgrünen Rand, der eine Dicke von 7 Pixeln hat. Zusätzlich sorgt ein Drop-Shadow-Effekt für mehr Tiefe, während die Opacity von 0.9 den Kreis leicht transparent macht.

In dieser Lektion hast du gelernt…

Wie du SVG-Elemente mit CSS stylst, indem du fill, stroke und stroke-width verwendest, um Farben und Linien anzupassen.
Warum drop-shadow SVGs Tiefe verleiht, indem es Schattierungen hinzufügt, um Elemente hervorzuheben.
Wie opacity die Transparenz deiner SVGs steuert, um sie subtiler oder auffälliger zu gestalten.
Warum SVGs direkt im CSS angepasst werden können, um Design-Änderungen flexibel und ohne zusätzliche Bildbearbeitung vorzunehmen.

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!

Die Symbole des Waldes

Im Herzen des Waldes finden sich uralte Symbole – Kreise, die die Sonne rufen, Rechtecke, die Stabilität versprechen, und Linien, die Wege weisen. Natürlich behaupten die Bäume, dass sie diese erfunden haben. Um diese Formen selbst zu meistern, musst du mit SVGs (Scalable Vector Graphics) arbeiten, den magischen Werkzeugen der digitalen Natur. Mit HTML und CSS verleihst du ihnen Farben, Größen und Charakter. Ein Kreis wird so nicht nur ein Kreis, sondern vielleicht… ein Mond oder ein besonders selbstbewusster Stein.

Deine Aufgabe: Erstelle SVG-Symbole

SVG-Linie <line>:
Füge eine Linie mit den Attributen x1, y1, x2, y2 sowie stroke und stroke-width hinzu.
SVG-Rechteck <rect>:
Erstelle ein Rechteck mit den Attributen x, y, width, height, stroke und fill.
SVG-Kreis <circle>:
Füge einen Kreis mit den Attributen cx, cy, r, und fill hinzu, um die Position und Größe des Kreises zu bestimmen.
CSS-Eigenschaften fill, opacity:
Verwende CSS, um die Füllfarben der SVG-Elemente zu ändern und eine Transparenz (opacity) hinzuzufügen, z.B. .circle { fill: green; opacity: 0.8; }.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!

Editor in neuem Tab öffnen

HTML

<svg width="200" height="200">
    <line x1="10" y1="10" x2="190" y2="190" stroke="purple" stroke-width="5">
</svg>
<br>
<svg width="200" height="200">
    <rect x="10" y="10" width="180" height="100" fill="pink" stroke="purple" stroke-width="5">
</svg>
<br>
<svg width="200" height="200" class="circle">
    <circle cx="100" cy="100" r="50">
</svg>

CSS

.circle {
    fill: green;
    stroke: yellowgreen;
    stroke-width: 7px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
    opacity: 0.8;
}

Weiter geht’s