Используем SVG на сайте

[GreatRash]

SVG-анимации не работают как минимум в Android 4.3 (в стоковом браузере). Так что с ними надо быть аккуратней.

[firya]

Конечно всегда нужно оглядываться на то, чем пользуется ваша аудитория, но судя по статистике с caniuse доля android 4.3 на данный момент меньше чем IE 8

[GreatRash]

Судя по их статистике, браузером в Android 5 вообще никто не пользуется.

[firya]

Хорошее замечание:) видимо какой-то баг у них там

[alex_rus]

потому что в 5ом андройде вместо встроенного используется chrome, а у него 13%

[GreatRash]

Он на caniuse же в отдельную ветку выделен как хром 40.

[alex_rus]

Судя по их статистике, браузером в Android 5 вообще никто не пользуется.

не пользуются потому что в Android 5.0 от гугла его просто нет вообще. Им невозможно воспользоваться.

Он на caniuse же в отдельную ветку выделен как хром 40.

А то что на caniuse.com версия 40 это бывший WebView (для встраивания в приложения) вместо которого сейчас движок от chrome 40.

[GreatRash]

Ну я про это всё знаю, к чему вы клоните? Процент использования всё равно 0.

[Serator]

www.chromestatus.com/feature/5371475380928512 — более того, они считаеются нерекомендуемыми с 45-ой версии Chrome'а.

[WaveCut]

Люблю SVG за то, что он легко и непринужденно решает проблемы с High-DPI экранами.

[dom1n1k]

На мой взгляд, иконочные шрифты изначально были мертворожденным стандартом, который получил некоторую популярность исключительно из-за слабой на тот момент поддержки SVG. Они недобны, неествественны, плохо контролируемы. Полагаю, что в ближайшие год-два они будут полностью и окончательно вымыты из индустрии.

[firya]

Не думаю что в ближайшие годы иконочные шрифты куда-то денутся. Да они плохо контролируемы, да бывают проблемы в отображении, но в тоже время для обычного вебмастера это самый простой способ встроить иконки на сайт, за исключением вставки png тегом img

[dom1n1k]

Ну тогда они останутся только в виде готовых паков, которые предполагается использовать as is в быстрых шаблонных задачах (типа тех, что входят в bootstrap). Самостоятельно их делать точно никто не будет.

[dom1n1k]

Что касается фолбека для IE8, то вместо

.no-svg .icon {
    background-image: url(“icon.png”);
}

мне больше нравится хак с множественными фонами, которые не поддерживается IE8, а потому вторая строчка будет проигнорирована:

.icon {
    background-image: url(“icon.png”);
    background-image: url(“icon.svg”), none;
}

или так, ну общем возможны варианты:

.icon {
    background: url(“icon.png”);
    background: url(“icon.svg”), transparent;
}

Минус Модернайзер, минус лишние зависимости и тормоза, минус несколько строк кода.

[firya]

Изящное решение, не думал о таком варианте. Modernizr сам не использую, поскольку в своих проектах не считаю целесообразным грузить лишний файл, ради отображения иконки 1-2% пользователей, которая никак не повлияет на восприятие информации

[dom1n1k]

Но как-то и очень не хочется нагружать старые (=тормозные) телефоны лишним JS.

Фиг знает, в среднем по больнице caniuse доля андроидов 2.3 — 0.07%. Не знаю почему так мало. Возможно потому, что владельцы таких телефонов не шарятся с них по интернету, а используют небольшой набор нативных приложений (мессенджеры, социалочки и все). Потому что кто активно серфит — уже проапгрейдился бы.
Суммарная доля FF 2-3 тоже ~0.1%. Один из тысячи.

Конечно, всегда надо смотреть на целевую аудиторию конкретного сайта, потому что она может отличаться от средней. Если аномально много старого — ну тогда просто забиваем на SVG и используем старый добрый растр. Тем более, что старые устройства = медленные устройства.