Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

SVG-Icons als Code einbinden und per CSS gestalten

SVG-Icons als Code einbinden und per CSS gestalten – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

SVG-Icons als Code einbinden und per CSS gestalten

“

Sie können eine SVG-Grafik aber nicht nur mit dem Element img einbinden, sondern auch den in der SVG stehenden Code kopieren und ihn direkt im html wieder einfügen. Das möchte ich Ihnen jetzt einmal zeigen. Ich öffne hier news.svg im Editor, kopiere den Quelltext, schließe die Datei wieder und kann diesen Quelltext jetzt hier im html an der richtigen Stelle einfügen, und mache das hier einmal, und jetzt sehen Sie hier den SVG-Code. Der Browser sieht die Elemente svg und /svg, und er weiß, aha, das ist eine SVG-Grafik, und stellt diese dar. Hier in der Live-Vorschau wunderbar zu sehen. Und der Vorteil dabei ist, dass der inline eingebundene SVG-Code macht den Quelltext der Seite hier zwar unübersichtlicher, aber dafür können Sie den Code zentral von Ihren Stylesheets aus steuern. Ich gehe jetzt mal hier hin und sage infobox svg, das Element wird hier direkt angesprochen, und gebe als Größe 4rem ein und die Höhe soll automatisch bestimmt werden. So weit, so gut. Das geht beim Einbinden…

Inhalt