Jump to content
Sign in to follow this  
radrigo

SVG или PNG

Recommended Posts

Всем привет.

 

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

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

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

 

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

 

 

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

 

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

Share this post


Link to post
Share on other sites
26 минут назад, radrigo сказал:

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

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

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

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

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

 

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

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


 

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
24 минуты назад, alex32 сказал:

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

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

 

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

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

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

bslshsm3.png

Share this post


Link to post
Share on other sites

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

 

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

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

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

 

Edited by alex32

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
13 часа назад, webair сказал:

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

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

 

Edited by alex32

Share this post


Link to post
Share on other sites
5 часов назад, alex32 сказал:

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

 

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

Share this post


Link to post
Share on other sites
3 часа назад, webair сказал:

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

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

Share this post


Link to post
Share on other sites
9 часов назад, webair сказал:

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

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

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

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

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

  • Upvote 1

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites
16 часов назад, SaD сказал:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...