Icon-System: SVG-Handling

[marctrix]

Hej beatovich,

da haben wir uns missverstanden. Ich kürze mal meinen eigenen Text und hebe hervor.

Einmalig verwendete Icons […] kommen direkt ins HTML.

Alle anderen Icons kommen in ein Sprite.

Das Problem: die werden im IE nicht angezeigt, wenn das Sprite eine externe Datei ist (und nur das macht ja Sinn). Der IE kann das aber, wenn das Sprite direkt ins HTML geladen wird.

Einbindung als 
selector {background-image("data:...")}
  nicht getestet

Einbindung als 
select0r {background-image("icons.svg#identifier")}
  MSIE 11 kann damit umgehen. <view> Element im SVG 

Einbindung als 
.icon.identifier{ background-image("icons.svg"; background-position: x y }
  MSIE 11 braucht background-width und background-height

Interessant. Würde ich als Fallback nehmen. Ich weiß nur nicht, wie ich herauskriegen soll, wann das Fallback angewendet werden muss…

Also für den IE11 aus etwas wie src="../path/to/my_sprite.svg#my-icon" folgendes zu machen src="#my-icon".

Ich dachte inline-svg ist für seltene Bilder. Da brauchst du doch gar kein use.

So hatte ich das vorgesehen. Was das Js machen soll betrifft die Icons, die ich ins Sprite auslagern möchte.

Marc