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)" />Code-Sprache: HTML, XML (xml) wird mit SVGInject dies: <svg version="1.1" ...> ... </svg>Code-Sprache: HTML, XML (xml) 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/