cbone
@cbone
Серверная инфраструктура

SVG на сайт. Стоит или нет?

Всем привет. Недавно начали перерабатывать информацию на сайте и столкнулись с проблемой большого количества информации. Например страница en-i.ru/product-catalog/together-development/pressure-sensor/pressure-sensor/ весит около 1,6 мБ.
С целью уменьшения веса страницы думаю перегнать часть изображений в SVG формат (схемы).
Кто сталкивался, имеет смысл заморачиваться, или это изначально провальная идея? Какие могут быть подводные камни?
  • Вопрос задан
  • 6587 просмотров
Пригласить эксперта
Ответы на вопрос 6
olegbarabanov
@olegbarabanov
Программист, фрилансер (ИП)
Да можно. Но есть и некоторые «подковырки».

1) Можно если не использовать фильтры. Фильтры дико прожорливы, не везде нормально работают, на Фоксе бывают вызывают своеобразные «артефакты» (на Chrome были проблемы с Гауссовым размытием в версиях ниже то ли 22-ой, то ли 24-ой...).

2) Если выкладываете, то проверяйте идентичность и сходство работы с GPU ускорением браузера и без него. Особенно это касается Firefox. Был недавно дико удивлен, когда попытался использовать довольно таки сложный SVG (с фильтрами), в одном web-приложении(с использованием определенных CSS трансформаций на соседние объекты, но которые визуально пересекаемые). Прикурил от глюков. Особенно Firefox.

3) Если вы ориентируетесь еще и на пользователей IE версий меньше 9-ой, тогда Raphael только в помощь. Хотя им можно и png показывать.

Для простых задач(как например для того сайта, который указал автор), SVG вполне подойдет. Про фильтры не зря указал, некоторые редакторы грешат пихать эти фильтры куда не надо.
Ответ написан
Комментировать
В результате было бы интересно узнать о вашем опыте преобразование. На сколько удалось уменьшить обьем страницы и как при этом пострадал рендеринг.
Я же, в свою очередь, порекомендовал бы вам обойтись хорошим компрессингом ресурсов. Перевести простые картинки в png8 с 16(8) цветами — например, habrastorage — с 29 KB к 10КБ

Мы просто на днях переделывали виджеты для iBook Author — это мобильный сафари. В виджетах было много тоже не сложных svg — и грузилось всё не позволительно долго, я уже не говорю про анимацию. Переделав всё с растровой графикой — загрузка виджетов и анимация стала «летать».

Удачи
Ответ написан
Да, стоит.

Размер получается гораздо меньше, а качество лучше.

Единственная проблема, которую я обнаружил, это тормоза при использовании svg через object в safari на os x.
Ответ написан
Комментировать
danial72
@danial72
flutter dart.
2 проблемы:
Порой возможна несовместимость.
Не все изображения можно перевести в svg(вектор же)
Ответ написан
merlin-vrn
@merlin-vrn
Ещё из минусов — Fx тормозит на более или менее сложных SVG :(
Ответ написан
neTckaPe
@neTckaPe
Python, любитель звука
Хотелось бы себе мини карту состряпать, с подобными схемами, чисто для себя, не могу подобрать что взять
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы