Gespeichert von Frank Pfabigan am Mi., 26.08.2020 - 15:24
1 Minute ∅ Lesezeit @ 225 WPM

Mit der kleinen Javascript Lösung SVGInject macht man aus SVG-Bildern Inline-SVG-Objekte, bei denen jeder Pfad mit CSS oder Javascript ansprechbar und damit änderbar wird.

Was es macht

Aus einem normalen Bild-Element wie diesem:

<img src="image.svg" onload="SVGInject(this)" />

wird mit SVGInject dies:

<svg version="1.1" ...> ... </svg>

Damit steht der gesamte Sourcecode des SVG direkt im HTML zur Verfügung und kann direkt, z.B. per CSS, angesprochen und damit gestylt werden.

Anwendungen

Bei entsprechender Vergabe von #IDs oder .Klassen im SVG stehen diese auch im CSS zur Verfügung. Damit können die Pfade (path-Elemente) des SVG z.B. eingefärbt oder animiert werden.

Quellen

SVGInject (Javascript): https://github.com/iconfu/svg-inject

Autoren von SVGInject

Iconfu, Potsdam, Germany
Incors GmbH
https://www.iconfu.com/

Sektor-Referenz
Content created Mi., 26.08.2020 - 15:24 (3 Jahre 3 Monate)
Content changed Sa., 11.02.2023 - 04:05 (vor 9 Monate 2 Wochen)
URL Path /blog/svg-bilder-css-stylen
UUID d69cd17d-912e-4220-bfb4-e7970d3f7ed1