eigne inline svg datei erstellen

[ChilliHilli]

Servus zusammen,
ich bin schon seit längerem daran zu versuchen mir eine Datei mit all meinen svg zu erstellen und diese dann per css einfärben zu können.
Mein Problem ist ich brauche alle Icons immer in min 4 verschiedenen Farben. Bisher habe ich immer die Datei dupliziert und die Fill "Farbe" angepasst. Was eine unmenge an Dateien zur folge hat.
Mein Ziel ist es eine Datei zu haben wo alle meine Icons drinnen sind und ich die dann per css einfärben kann

Kann mir da jemand eine Seite empfehlen wo ich das nachlesen kann?

Was ich bisher herausgefunden habe ist das man eine SVG-Datei erstellt und dort jedem Icon ein symbol tag gibt und dort dann eine ID und die ViewBox. Doch ich weiß leider nicht wie ich diese Datei dann in meine Seite einfüge.
Ich habe eine lösung mit php gesehen doch ich nutze Angular js.

Ich wäre super froh wenn ihr mir da helfen könntet.

Liebe Grüße
Jo

 

[MJayFux]

Hilft dir das hier:
https://www.mediaevent.de/svg-in-html-seiten/

 

[ChilliHilli]

Danke, das schaue ich mir genauer an

 

[AliceG]

Solltest du z.B. Gulp bei denen Projekten verwenden, dann würde ich dir den svg Gulp Workflow empfehlen.
https://arwhd.co/2015/05/18/svg-gulp-workflow/

Was aber ganz wichtig bei inline svg zu beachten ist:
Bis IE 11 – kein support, eine Fallback Funktion ist notwendig.
Lösung: https://github.com/jonathantneal/svg4everybody

Auch wenn jemand sagt: "Alte Browser unterstütze ich nicht mehr".
In diesem Fall wäre eine Fallback Funktion wichtig, da es sich hier nicht um geriengere Abweichungen in der Darstellung handelt, sondern die Bildchen werden einfach nicht angezeigt.

 

[ChilliHilli]

Vielen Dank Alice,

ja ich arbeite mit Gulp und schaue mir das genau an.