Icon-System: SVG-Handling

[beatovich]

hallo

Einmalig verwendete Icons und Icons mit besonderem Gestaltungsbedarf (die dadurch wieder individuell werden und selten oder ebenfalls einmalig sind) und SVGs, die gar keine Icons sind (wie die Linie im Video-Beispiel) kommen direkt ins HTML. Abhängig von ihrer inhaltlichen Relvanz mit einem role="image" oder role="presentation".

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

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.

Warum einmlig gebrauchtes in eine Sprite packen?