Spędziliśmy dużo czasu rozmawiając o używaniu inline i elementu. Możesz zbudować system ikon, który ma wiele zalet.
Możesz jednak stworzyć system ikon SVG na inne sposoby. Możesz rozłożyć tradycyjny arkusz sprite'ów z siatką w SVG i zrobić sprite'y w tle, tak jak robiliśmy to z obrazami rastrowymi. W przyszłości będziesz mógł używać identyfikatorów fragmentów, dzięki czemu będzie to nawet trochę łatwiejsze. Więcej informacji na ten temat.
Innym sposobem jest osadzenie identyfikatorów URI danych obrazu SVG bezpośrednio w pliku CSS. Takie podejście przyjmuje Grunticon.
Grunticon to wtyczka Grunt do automatyzacji systemu ikon SVG. Pobiera folder pełen SVG i przetwarza je w plik CSS. Jest tam kilka selektorów opartych na nazwach plików obrazów SVG, które mają background-imageidentyfikator URI danych SVG (jednak nie Base64).
Zrobienie tego w ten sposób oznacza korzyści związane ze skalowalnością SVG i rozmiarem pliku, ale to wszystko. Mimo to często to wszystko, czego potrzebujesz.
Być może najlepszą częścią Grunticona jest jednak to, że zapewnia wszystko, co niezbędne do awaryjnych rozwiązań. Obejmuje to alternatywny arkusz stylów dla danych URI PNG, a nawet samych pojedynczych plików PNG (które tworzy dla Ciebie). Dodatkowo skrypt, którego używasz na swojej stronie, aby określić wsparcie i załadować tylko odpowiedni arkusz stylów.
Myślę, że można uczciwie powiedzieć, że na razie sprawia to, że fallbacki są łatwiejsze w obsłudze niż defs / technika. Nie żeby to było niemożliwe.
Grumpicon jest wersją Grunticona w przeglądarce, której użyliśmy w tym screencastie.
Gdy to piszę, Grunticon pracuje nad sposobem stopniowego ulepszania do wbudowanego SVG, co byłoby całkiem fajne!