10 примеров это конечно круто, а вот 2 приведу:
1. можно в один спрайт сложить изображение как иконки, так и клипарта (последний пример видимо было раскрыть полностью);
2. иконка сегодня нужна 20x20 пикселей, а завтра мне захотелось ее увеличить или уменьшить — рисовать новые? да для адаптивной разметки это очень хорошо: меняй размеры в зависимости от окна браузера как хочешь. Разве не круто?
А если посидеть подумать, наверняка, можно еще пару пунктов добавить.
Выложил оригинальный размер SVG файла www.divmotive.ru/_frm/habr/icons.svg Хотите, конвертируйте в PNG и смотрите какой будет вес… Файл SVG пересохранил заново, его размер чуть отличается от указанного мной выше. Говорю об этом, потому что чувствую вы и к этому можете придраться :)
1. Я не считал размеры спрайта на smashingmagazine, мой с соц. иконками получился 4431 байт SVG и 69 772 байта PNG — ну сожмем мы еще до 17 000 байт например, это все равно будет больше, чем получивышися в SVG.
2. SVG мы сможет увеличить до неограниченно любого размера, а вот PNG нет.
Вы по ссылке ходили? Там все описано и даже пример на jsfiddle дан.
Ага, понял. Но здесь SVG делается «программно», о чем я писал, что еще не разобрался с этим. Может у вас и ссылка есть где про это подробно написано? Здесь описания не увидел.
Наверное надо выделить жирным. Потому что дизайнеры, как это часто бывает, не то не понимают суть таких проблем, а вообще никакого представления не имеют о формировании страницы в браузере. И еще стараются доказать обратное.
1. можно в один спрайт сложить изображение как иконки, так и клипарта (последний пример видимо было раскрыть полностью);
2. иконка сегодня нужна 20x20 пикселей, а завтра мне захотелось ее увеличить или уменьшить — рисовать новые? да для адаптивной разметки это очень хорошо: меняй размеры в зависимости от окна браузера как хочешь. Разве не круто?
А если посидеть подумать, наверняка, можно еще пару пунктов добавить.
2. SVG мы сможет увеличить до неограниченно любого размера, а вот PNG нет.
Ага, понял. Но здесь SVG делается «программно», о чем я писал, что еще не разобрался с этим. Может у вас и ссылка есть где про это подробно написано? Здесь описания не увидел.
Я даже префиксы не стал писать для
background-size, а вы говорите про «двойные» псевдоэлементы. Зачем захломлять код? Решение не этом.Наверное надо выделить жирным. Потому что дизайнеры, как это часто бывает, не то не понимают суть таких проблем, а вообще никакого представления не имеют о формировании страницы в браузере. И еще стараются доказать обратное.