SVG или PNG

[radrigo 182]

Всем привет.

 

Читаю про svg, есть плюсы и минусы.

Плюс - это конечно чёткая прорисовка на экранах с любой плотностью.

Минус - требует гораздо больше ресурсов от браузера.

 

Хотелось бы услышать ваше мнение, кто что использует.

 

 

Допустим у меня svg файл с иконками 17 кб., как сильно это скажется на производительности?

 

Кстати на dle-news.ru иконки png

[germanydletest 457]

26 минут назад, radrigo сказал:

Плюс - это конечно чёткая прорисовка на экранах с любой плотностью.

Плюсов у SVG гораздо больше, нежели только чёткая прорисовка, к примеру SVG легко модифицируется (смена цветов, толщина линий и т.д.), быстро загружается, SVG графика адаптивна ну и далее по списку.

31 минуту назад, radrigo сказал:

Минус - требует гораздо больше ресурсов от браузера.

Для того что бы это заметить нужно открыть через браузер огромное и сложное изображение

 

33 минуты назад, radrigo сказал:

 

Допустим у меня svg файл с иконками 17 кб., как сильно это скажется на производительности?

всё зависит от того какой интернет у посетителя вашего сайта, но 17 кб. это не те размеры, с которыми нужно уже переживать насчёт производительности 

[alex32 942]

Немножко поправлю

6 часов назад, germanydletest сказал:

Для того что бы это заметить нужно открыть через браузер огромное и сложное изображение

У вектора нет понятия "Огромное". Вектор на то и вектор.Хоть вы его растянете 3х3 метра, он будет красиво смотрется, хоть уменьшите 3х3см, он будет так же смотреться.  Именно поэтому в полиграфии для печати используют вектрор - тяни не хочу хоть до каких размеров, ему пофиг. И вес картинки от этого не увеличится.

 

6 часов назад, germanydletest сказал:

всё зависит от того какой интернет у посетителя вашего сайта, но 17 кб. это не те размеры, с которыми нужно уже переживать насчёт производительности

Никакой связи. 17kb вектора можно растянуть  до любого размера (хоть до 50х50 метров), и при этом ни качество, не вес не изменится. Вес так и будет 17кб. 17кб это разве много? ничто. Так что, однозначно svg, даже думать нечего. Вопрос тут больше стоит о кроссбраузерности, о том, все ли браузеры будут нормально показывать векторное изображение, а не о весе и отрисовке

7 часов назад, radrigo сказал:

Допустим у меня svg файл с иконками 17 кб., как сильно это скажется на производительности?

вообще не скажется. Все шрифты на вашем сайте (да и все другие шрифты в мире) по сути своей - вектор. Вы не думаете, сколько весит шрифт (а они иногда до нескольких сотен кб доходят) но паритесь о 17 килобайтах)))
 

[germanydletest 457]

24 минуты назад, alex32 сказал:

У вектора нет понятия "Огромное".

то что вектор тянется сколько хочешь это понятно, я говорил об огромности объёма (веса) файла, а не пиксельного размера.

 

30 минут назад, alex32 сказал:

Вес так и будет 17кб.

Не всегда, вот вам конкретные цифры

[alex32 942]

я говорю про 1 изображение, а не при три разных. И я говорю о физическом размере, который измеряется в сантиметрах, миллиметрах и тд, а не о "весе" в байтах. Именно поэтому для печати полиграфии или банеров 3х6 метров используется вектор, а не растр.

 

2 часа назад, germanydletest сказал:

я говорил об огромности объёма (веса) файла, а не пиксельного размера.

не хочу огорчать, но... пиксели - это к растру, а не к вектору) у вектора кривые, точки координат, а не пиксели

 

Изменено 30 июня 2016 пользователем alex32

[webair 178]

SVG это конечно хорошо...

Но почему у Google логотип в растре? (имеется 2x версия для экранов с высокой плотностью пикселей).

В этом плане Яндекс впереди. У него svg + png (для старичков)

[alex32 942]

13 часа назад, webair сказал:

Но почему у Google логотип в растре?

А давно гугель стал образцом для подражания? Что то я не успел отразить, когда это произошло

 

Изменено 2 июля 2016 пользователем alex32

[webair 178]

5 часов назад, alex32 сказал:

А давно гугель стал образцом для подражания? Что то я не успел отразить, когда это произошло

 

Google состоит в W3C, развивает и спонсирует передовые технологии, работает над улучшением интернета (хотя бы взять https://developers.google.com/speed/pagespeed/insights/), инициировал массовый переход на адаптивные сайты тем, что первым начал ранжировать сайты с адаптивным дизайном выше в выдаче и много чего еще.

[alex32 942]

3 часа назад, webair сказал:

Google состоит в W3C, развивает и спонсирует передовые технологии,

Ну теперь прогоните тот же гугле.ру через валидатор w3c и посмейтесь.Это явно не законодатель мод, и уж точно не образец для подражания. 
 

[celsoft 6 093]

9 часов назад, webair сказал:

Google состоит в W3C, развивает и спонсирует передовые технологии, работает над улучшением интернета

Развивать и поддерживать новые технологии и обязанность поддерживать старые это вещи разные. SVG поддерживают не все браузеры, старые IE их не понимают, а гугл обязан отображаться во всех браузерах, поэтому они спонсируют новые технологии, а для отображения своего сайта пользуются старыми. Переходите на SVG и не думайте. Он лучше.

5 часов назад, alex32 сказал:

Ну теперь прогоните тот же гугле.ру через валидатор w3c и посмейтесь.Это явно не законодатель мод, и уж точно не образец для подражания. 

Я всегда говорил и буду говорить, что лучший валидатор это браузер, любая по настоящему кроссбраузерная верстка никогда не пройдет валидацию, потому как древние браузеры раньше имели свои пути развития и каждый реализовывал одни и те же "фишки" по своему. Это только последнее время все более или менее стали придерживаться единых стандартов. Поэтому валидатором нужно пользоваться для выявления проблем с отображением чтобы понять где грубые ошибки именно в верстке, а не для того чтобы проверить, есть там слеш или а стоит ли там alt и т.д.

[SaD 16]

SVG не замена растру, так что не нужно выбирать между ними. На геом.фигурах, иконках и т.д, будет выигрывать растр. На сложных многоцветных картинках, растру нет альтернативы.

 

SVG это замена шрифтовым иконкам. Он проще, легче и удобнее. Собственно для этого и создан. Единственные проблемы с ним, это в немного мудрёном способе внедрения на страницу....но если разобраться, то всё будет просто.

 

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

[celsoft 6 093]

16 часов назад, SaD сказал:

SVG не замена растру, так что не нужно выбирать между ними. На геом.фигурах, иконках и т.д, будет выигрывать растр. На сложных многоцветных картинках, растру нет альтернативы.

Это очевидно. Для фото только растровые изображения. SVG это мелкие графические элементы. Лого, иконки и подобное, только для этого.