Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony

Mamy tu do czynienia z pewną klęską urodzaju: olbrzymi wybór różnych ekranów, a co za tym idzie – rozdzielczości, zmusza grafików do nieustannej gimnastyki, czyli dostosowywania stron i aplikacji www poprzez skalowane ikony. Jednym z rozwiązań jest osadzanie ikon jako czcionki (poprzez @font-face), pomagają w tym aplikacje takie jak http://icomoon.io/app/. Można też wykorzystać zalety grafiki wektorowej w formacie SVG i skorzystać z takich narzędzi jak Grunticon. Warto poznać wady i zalety obu rozwiązań, zanim zdecydujemy na wdrożenie któregoś z nich w naszym projekcie.

#1Co zrobić, jeśli komplikujemy sobie życie udziwniając fonty, różnicując je w obrębie strony lub stosując niestandardowe?

SVG daje szansę zróżnicowania rangi ikon i ładowania ich osobno, najpierw te bardziej znaczące, później kolejne, mniej potrzebne użytkownikom. Font-face pozwala na różnicowanie fontów. Jeden do tekstu, inny do ikon. Można? Można.

#2Niektóre urządzenia mają problem z „Private Unicode Area”

W zwiazku z tym, że jest możliwość nadpisywania znaków (glyphs) w „Private Unicode Area” i wykorzystania tego mechanizmu do serwowania wybranych znaków,  istnieją urządzenia które ten mechanizm wykorzystują. Zapisywanie tych znaków może nastepować w różnych zakresach  standardu Unicode, stąd powoduje to konflikty.

#3Czarne kwadraty i krzyżyki na Opera Mini oraz inne zniekształcenia.

Nie da się przewidzieć wszystkich problemów, które mogą zaistnieć na różnych stronach. 100-procentowego poczucia bezpieczeństwa nigdy mieć nie będziecie, ale według niektórych znawców tematu, dzięki SVG możecie chociaż trochę odetchnąć. Polecam tekst Iana Feathera TU.

#4Chrome Canary i Beta robią z fontem straszne rzeczy.

Zauważyliście? Z SVG nie ma tego problemu. Po prostu.
Jednocześnie: w stabilnej wersji Chrome face-font sobie radzi bez problemów.

#5W Firefoksie ikony są wyraźniejsze…

… w efekcie nie do końca jesteśmy w stanie zapanować nad ostatecznym wyglądem strony. Z SVG możemy normalizować wygląd wszystkich elementów dla każdej przeglądarki.

#6Wygenerowane treści.

Jeśli chcesz użyć font-icon w CSS musisz je prawidłowo skojarzyć z wygenerowanymi treściami. Nie zawsze jest to łatwe, zwłaszcza, jeśli masz już spory zasób „:before” i „:after”. Można oczywiście kombinować z umieszczeniem ich w linii, ale wiadomo, że to się może skończyć pominięciem lub zapomnieniem, zwłaszcza w dużych aplikacjach. W SVG nie ma tego problemu – możesz stosować wiele warstw i umieszczać ikony chociażby w tle innych treści.

#7Umieszczanie wszystkich elementów we właściwych miejscach wcale nie jest łatwe.

Z face-font – warto dodać. SVG daje możliwość rozdzielenia na poszczególne warstwy konkretnych treści i kombinowanie z rozmiarami pod kątem poszczególnych przeglądarek.

#8Chcemy multikoloru.

I jesteśmy skazani na SVG, bo tylko tam mamy opcję multikolor, a nie pojedyncze kolory, jak w przypadku font-face. Teoretycznie, nawet w font-face możemy problem obejść, stosując warstwy przy tworzeniu ikon. Jest to jednak działanie ryzykowne. Jednocześnie, należy zaznaczyć, że font-face ma więcej możliwości działań związanych z kolorami. Na dodatek, łatwo się z nich korzysta.

#9Mamy ochotę na animację.

I SVG nam na to pozwala. W przeciwieństwie do font-face.

Podsumowując:

Sporo zależy od projektu, jeszcze więcej od osobistych preferencji. Stawiacie na font-face czy SVG?