чем svg лучше png
2019 год — Модный, стильный и прогрессивный год дизайна, не так ли? Ещё в 2010 году разработчики не задумывались и выбирали для своего логотипа текстовой формат или же графический, разрешения JPEG или PNG. Однако не так давно многие пересмотрели свою точку зрения с вошедшим в моду «SVG», это новый вид который используется веб-мастерами и дизайнерами.
Оба формата поддерживают прозрачность и имеют неплохое качество, хотя SVG в нём выигрывает, помимо этого SVG не «пикселится», а так же является кодом, который всегда и везде возможно редактировать, даже в консоли браузера зайдя в CSS, разве не классно? Но, не спешим торопиться.
У SVG есть ограничения. Как и у любых других форматов, это логично. SVG рассчитывается математически — это значит, что формы и цвета всегда будут в порядке. Но растровые артефакты (т.е фотографические элементы) все равно не будут масштабируемыми, при этом будут занимать кучу места.
Тем самым если Вам настолько важна загрузка сайта (а она важна) — не стоит пихать все картинки SVG форматом.
Если же говорить о JPEG — то использовать его отлично если нужно сжимать изображения, ведь он отлично сжимается, но если Вам нужны прозрачные элементы, качество — забудьте о данном формате, используйте его для картинок публикаций на Вашем сайте, там он отлично подойдёт
А что, если мне нужно разработать сайт для экранов с разными разрешениями, в том числе и с 1920 на 1080, но SVG мне не подходит?
Ответ прост: используйте PNG, он так же отлично подойдёт, так как имеет высокое качество, а так же поддерживает прозрачность.
Вывод.
Если Вы действительно хотите следовать тренду и иметь красивый сайт — используйте SVG формат как минимум для логотипа, это сделает его более приятным, красивым и подчеркнет Ваш проект. Но! Не пихайте его везде — это увеличит время загрузки Вашего сайта, а анимации SVG формата — могут не поддерживаться на старых ОС Android и старых браузерах на подобии IE, что сделает логотип «не рабочим».
Удачи в Ваших начинаниях!
Оцените, данная информация была полезна для Вас?
SVG против PNG: эксперимент качества изображений средствами браузера
Наши клиенты обращались к нам с вопросом о том, возможно ли распечатывать макеты печатей или штампов прямо из браузера, не прибегая к переходным программам. Такая потребность обуславливается тем, чтоб для изготовления печати на полимере (и не только в этом методе), достаточно просто распечатать макет на кальке (инверсия макета) и пусть в работу. Для реализации этой задачи возможны два варианта, это печать макеты в формате SVG и в формате PNG. Ниже проведен эксперимент, с помощью которого можно проанализировать качество конечного изображения.
Исходный данные
Принтер: hp laserjet m1132 mfp.
• Google Chrome 44.0.2
Эталон:в качестве эталона изображение было, распечатано используя программу CorelDraw. Векторное изображение печати было импортировано в программу, и распечатано. Так же был сделан экспорт в формат PNG, для дальнейших тестов.:
Итак начнем.
Были запущенны четыре браузера, в котором поочередно открыты два изображения, сначала в формате SVG затем в формате PNG.
В каждом браузере была использована функция печати страницы, которая производит печать элементов,
которые отображаются в браузере. На выходе были получены, распечатанные изображения. Изображения подвиглись анализу и отфотографированы.
Результат SVG – в четырех случаях на выходе мы получили качество картинки близкое к эталонному. Распечатанное изображение четкое, без ярко выраженной ступенчатости или размытия.
Итоги.
Таким образом, итогом эксперимента, стал вывод : печать изображений в современных браузерах без потери качества возможна, но лиш при использовании изображений в формате SVG.
Почему нужно использовать SVG графику на сайтах
Уже трудно себе представить современные сайты без иконок и вообще без графики. Вся графика, которую мы видим на сайтах может быть растровой (JPG, PNG) или векторной в SVG формате. К сожалению, фотографии или рисованные иллюстрации мы не можем отобразить на сайте в виде SVG кода. Но если есть выбор, то всегда нужно выбирать именно SVG формат.
Преимущества SVG
1) Сравнение веса
Для сравнительного анализа скачаем с сайта flaticon.com две одинаковых иконки в PNG и SVG формате.
Мы видим, что размер файла tag.png составляет 27 КБ. В то время, как tag.svg весит всего лишь 6 КБ, что в четыре раза меньше. Как правило на странице сайта, используется десяток иконок. И при каждой загрузке страницы, только за счет иконок, сайт вынужден будет загружать около 300 килобайт.
Как вставить на сайт SVG иконку
SVG иконка представляет из себя трудночитаемый XML код, состоящий из координат линий и кривых. Не пугаемся и сохраняем спокойствие, мы достанем оттуда кое-какую информацию и запишем ее в HTML файле.
В HTML файл вставим два обязательных тега. Сделаем svg тег невидимым, копируем параметр viewBox и вставляем в тег symbol. Затем добавим идентификатор с любым осмысленным названием. Далее копируем из tag.svg все содержимое тегов path + circle и вставляем между тегами symbol. Это будет очень много кода, поэтому я не буду его сюда вставлять.
Ниже вставляем этот код, указав идентификатор иконки.
В итоге иконка появилась на HTML странице.
Как управлять SVG иконкой?
Добавим к тегу svg класс tag-icon и можем стилизовать ее как обычно, через CSS свойства.
Например позиционировать, изменять размер и цвет.
.tag-icon <
width: 100px;
height: 100px;
fill: rgb(230, 19, 107);
>
2) Масштабирование без потери качества
Вставим на сайт иконку, как растровую картинку и увеличим ее размеры в 10 раз. Края изображения стали неровными.
img <
width: 3000px;
height: 3000px;
>
Проделав тоже самое с SVG изображением, края остаются таким же ровными, как и у оригинального размера. Масштабирование никак не влияет на качество.
3) Возможности анимации безграничные.
Попробуем поменять цвет у иконок при наведении на более светлый. Посмотрите, как легко реализуется данный эффект у SVG иконки.
.tag-icon:hover <
fill: darkorange;
cursor: pointer;
>
При наведении на PNG иконку меняется цвет фона, а не самой иконки.
img:hover <
background-color: darkorange;
cursor: pointer;
>
Посмотрите пример на CodePen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
SVG, Iconfonts vs PNG
Статья по мотивам Изображения в верстке. Хватит это терпеть. Скорее даже по мотивам комментариев к этой статье и в общем реакции хабра на призыв использования векторной графики везде, где можно и действительно нужно.
Признаться, я был немного удивлен реакцией на такие мысли в 2014-м то году. По этому случаю рассмотрим более детально существующие техники работы с иконками.
На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.
Самую бурную реакцию вызвало именно применение SVG. Сначала юзер franzose заметил что:
Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже
Так как в статье речь шла преимущественно о иконках — такой коммент для меня совершенно непонятен. Да, я сам несколько раз получал от дизайнера ужасные иконки, которые представляли собой нагромождение примитивов, налепленных друг на друга. Но ничего не мешает подойти к дизайнеру и сказать, — “что за херня, мужик?!”, ну или самому зафиксить это дело в том же иллюстраторе, объединив в какой-нибудь общий shape (ну это конкретно мой случай, других “сложных векторов” я не видел пока). Еще для этих целей можно использовать SVGO. Кажется объединение в общий shape — это единственная его часть, которая действительно драматически влияет на производительность.
На самом деле даже если забыть про все эти вещи с иконками — я не могу представить какого-нибудь хоть минимально часто встречающегося кейса про “сложный вектор”. Да все равно вектор, применительно к задачам сегодняшнего веба будет меньше растра (это про вес).
Все мы понимаем что есть задачи, где это все же случается, но в таких случаях разработчики думают несколько другими категориями. Нужно например отобразить какую-нибудь огромную, сложную схему на небольшой площади, ну и будет подход вроде “что-то SVG-ха под мегабайт у нас выходит, коллега, давайте ка мы ее на сервере растрируем”. Тайлы те же на картах.
Потом пришла куча юзеров и крайне негативно высказалась по части производительности SVG как такового. Дескать все катастрофически хреново, десктопный браузер на 3-х с половиной SVG безбожно тормозит на скролле, мобильные устройства взрываются в руках.
На самом деле я считал что абсолютно во всех браузерах SVG, прилепленный через background-image кэшируется по самое нехочу. Мы ведь именно об этом случае говорим? На практике все оказалось немного сложнее.
Я пообщался с парой людей, которые занимаются SVG частью в Chrome и Firefox и показал им вот это демо, которое Adrian Osmond делал еще год назад для, в принципе, таких же целей. Но тогда все было на порядки хуже. Почему, можно почитать в его статье и багтрекере вебкита.
Chrome
FPS проседает примерно раза в полтора, два. Печально конечно, но не 10x все же. Так что же происходит под капотом Хрома в этот момент?
Я немного почитал исходники на chromium.org, нашел кое-какой кэширующий код для SVG, и это меня запутало еще сильнее. Тут я решил спросить у знающих людей.
Philip Rogers из Google, который в общем то и пишет большую часть всяких дел с SVG в хромиуме, сказал что различия отрисовки SVG и PNG несколько сложнее. Во-первых PNG декодируется в отдельном потоке, а SVG в главном, а во-вторых помимо производительности есть еще такие вещи, как например, память. В общем они решили отказаться от хранения кэша для svg чтобы сэкономить памяти. Как по мне — так это какой-то сомнительный план. Не совсем понимаю почему бы не кэшировать все это дело. Bitmap, которым заканчивается рендер не будет каких-то неприличных размеров, с сегодняшними то объемами памяти, даже на мобильных устройствах. Ну и грядет же вектор, тема перспективная. Но видимо поэтому в Google работают они, а не я.
Так что да, в хроме SVG отсчитывается заново каждый фрейм. Правда Philip сказал что они там что-то придумали, что “should bring it much closer to png performance”. Будет в следующей Canary. Посмотрим. Тем не менее производительность на уровне чуть меньшем чем 60 FPS (а у меня в общем средний такой конфиг) на огромной куче иконок одновременно находящихся на экране — это вполне себе адекватная производительность.
Firefox
Я не знаю чем померить FPS в FF (видел какую-то софтину, но процесс инсталляции был не совсем тривиален и я не стал возиться), но на глаз производительность PNG и SVG одинаковая. Так же думает и Robert Longson, контрибьютор SVG в Firefox. По словам Роберта, в Firefox есть кэш для всех изображений и разница между SVG и PNG может заключаться разве что в том, что SVG немного дольше “декодируется” при первой отрисовке, что вполне закономерно.
Таким образом в FF мы вообще имеем идентичную производительность, если не производим каких-либо манипуляций инвалидирующих SVG кэш. Естественно, скролл ничего не инвалидирует. Возможно есть еще какие-то моменты, но драматически производительность они ухудшить не могут.
Новые IE часто бывают очень хороши во всяких неочевидных местах, например WebGL. Тут такая же ситуация. В IE демо работает намного лучше чем в 2-х предыдущих браузерах, показывает одинаковый framerate для SVG и PNG. Но делает это по каким-то магическим причинам не сразу.
К сожалению я не знаю кто занимается разработкой SVG в IE, а в багтрекер писать сомнительно как-то такие вещи, поэтому эта часть останется без комментариев с другой стороны.
По части вещей вроде SVGO — я отношусь к ним довольно скептически. Не знаю на какую долю процента ускорится рендер при немного более быстром парсинге, но на мой взгляд — это штука сомнительная. Т.е. конечно да, какой-то профит есть, но минимальный.
С практиками верстки SVG все более-менее понятно. Я предпочитаю рисовать SVG спрайты. Техника такая же как и для растровых спрайтов. Проблемы решаемые ими в принципе такие же. Естественно есть куча разных плагинов для этих целей, например вот.
Еще можно делать это с помощью data url. Тут я рекомендую вот такую штуку и их же софтину вот тут, для тех, в чей процесс Grunt по каким-то причинам не входит. Ну еще можно прям файлами на background-image, но не нужно.
Единственный современный браузер где я видел проблемы с рендерингом SVG — это IE на Windows Phone. Но там эта проблема решаема.
Iconfonts
Если в SVG мы в принципе можем нарисовать все что душе угодно, то с помощью шрифтов ограничены монохромными иконками (если не брать во внимание извращения вроде stackicons), что в рамках текущих веяний в дизайне не представляется таким уж недостатком. Зато перед нами открывается куча возможностей начиная от банальной смены цвета и размера, заканчивая пачкой CSS манипуляций с шрифтами, вроде тенюшек и т.д.
Техника с иконочными шрифтами сложнее чем те же SVG. Тут нужно обладать некоторым объемом знаний в областях, где не каждый дизайнер ориентируется. Казалось бы, делов то, запихай свои SVG-хи в один из кучи онлайн-упакавщиков типа того же Icomoon-а или настрой какой-нибудь Grunt\Gulp плагин, и будет тебе счастье.
В комментариях к статье главным обвинением относительно шрифтов было что-то вроде
рендеринг ужасный в мелких размерах (явные лесенки) (с) designiac
А что вы хотели, ребят? Нарисовать огромную иконку приблизительно кегля так 48-го, проработать мелкие детали, потом воткнуть ее кеглем так 12-м и вместо удивления о каком-то плохом рендере этих ужасных вебшрифтов, наслаждаться идеальными чистыми иконками?
Хинтинг!
Вот основная вещь, которую нужно знать про iconfonts. Вот он, святой грааль иконок в вебе! Я считаю что если вы точно знаете что скажем, цвет иконок или их размер не изменятся (вероятно бывает и такое), нужно брать SVG и не морочить голову. Использовать шрифты без необходимости — какой-то не очень критичный конечно, но все равно overhead.
Чтобы было понятно зачем нам это вообще нужно — вот такой пример: берем модный Font Awesome и одним хинтом делаем из вот такой иконки pinterest:
Лучше всего видно на мелком кегле, естественно.
С наступлением эры HDPI устройств заморачиваться с этими вещами фронтэндеру возможно скоро не придется вообще, потому что хинтировать глиф в такой ситуации:
немного сложнее чем в такой:
Я не тот человек, который может авторитетно написать о хинтинге, поэтому делать этого не буду. Буду рад если придет серьезный шрифтовик и напишет детальную статью. Нужно просто брать во внимание то, что он (хинтинг) существует. И это не шрифты криво рендерятся, это некоторые разработчики не хинтируют их совсем, или лепят автохинты (которые, надо сказать, неплохо спасают временами).
Субпиксельное сглаживание
Ну, все что нужно знать о субпиксельном сглаживании — это то, что оно есть. Версию назад с этим были проблемы в хроме, но сейчас все работает так, как должно.
Недостатки растровой графики с такой необходимостью учитывать HDPI устройства, какая есть сейчас — очевидны. Возможно, если бы плотность ограничивалась 2 вариантами ретина\не ретина — это было бы достойным вариантом, и мало кому в голову пришло бы заморачиваться со всеми неоднозначностями вектора, существующими сейчас в вебе. Но у нас есть 1.5x, 2x, 3x устройства. И собирать спрайты под каждое из них уже не кажется достаточно изящным вариантом.
С другой стороны у растра без потерь есть достоинство, которое, лично для меня, перекрывает все недостатки в обслуживании — он стабилен. Можно быть точно уверенным в том, что как ты иконку нарисуешь — так она и будет выглядеть в итоге. Пиксель в пиксель. Вопрос лишь в том, нужна ли такая точность в каждом конкретном случае.
Я работаю над системой мониторинга и управления всяким серьезным оборудованием, вроде электрических подстанций или котельных. У нас есть солидная пачка иконок, обозначающих те или иные неисправности на объектах. Причем иконки эти встречаются в разных местах, разного размера и разного цвета. И мы на самом деле убили бы кучу времени, если бы делали все это в PNG, еще и под HDPI.
В общем я не совсем понимаю зачем в текущих условиях однозначно отказываться от таких вкусных техник как шрифты, да и вектор в целом. Есть моменты конечно, вроде того же решения в хроме отказаться от кэша, но в целом с производительностью и качеством рендера все в порядке. А если перестать теоретизировать и глянуть на стандартные задачи, так вообще выйдет пара кейсов, где стоит посмотреть в сторону растра.
Так вот, зачем я все это написал? Я предлагаю юзерам, негативно отозвавшимся о производительности и рендере векторных иконок, в том посте, с которого все началось, или сочувствующих им и их точке зрения, пари.
Вы предоставляете мне верстку или какой-то конкретный сайт (что лучше), иконки на котором сейчас заверстаны в PNG и под ретину и под простые дисплеи, исходники иконок которого у вас есть в векторе, который при любых эффектах выдает 60FPS на средней машине. Сразу оговоримся что объективно это должен быть обычный сайт. Не онлайн софтина по работе с иконками и не пример из этой статьи.
Я заменяю растр на вектор и оптимизирую какими хочу способами.
В итоге должна получиться страница, на которой FPS проседает не больше, скажем, 30%. О дальнейших условиях договоримся в процессе. Как вам? Докажем ущербность SVG?
Форматы изображений SVG, PNG и JPG: плюсы и минусы
Когда дело доходит до создания изображений для Интернета и других цифровых целей, какие форматы файлов могут предоставить вам лучший результат? Вы должны думать о скорости в противовес качеству и размеру изображения. Итак, что вы должны использовать: SVG, PNG или JPG?
Было время, когда вы просто использовали JPG, чтобы соответствовать пространству на 72 dpi и двигались дальше. Уже нет. Экраны с высоким разрешением, несколько видовых экранов и необходимость иметь быстрый веб-сайт сделали все это гораздо более сложным процессом. Давайте рассмотрим плюсы и минусы каждого из этих форматов!
SVG или, как расшифровывается, масштабируемая векторная графика, невероятно практична. Вот почему дизайнеры используют данный формат чаще.
Поскольку SVG является векторным форматом, он отлично смотрится в любом размере и работает практически для любого типа изображения, кроме фотографии.
SVG — это формат без потерь, то есть он не теряет никаких данных при сжатии, отображает неограниченное количество цветов и чаще всего используется для графики и логотипов в интернете, а также для проектов, которые будут просматриваться на Retina и других экранах с высоким разрешением.
Плюсы SVG
Минусы SVG
PNG или портативная сетевая графика — это формат, разработанный для Интернета, который предлагает то, что JPG не может – прозрачность. Именно поэтому PNG настолько популярен для загрузки таких элементов, как логотипы для дизайна веб-сайтов.
Существует два типа PNG — PNG-8 и PNG-24. PNG-8 использует более ограниченную цветовую палитру всего с 256 цветами, имеет несколько лучшую прозрачность и экспортируется в небольшом размере. PNG-24 использует неограниченную цветовую палитру, поддерживает прозрачность, но экспортируется в большом размере. Оба типа PNG имеют сжатие без потерь.
Хотя форматы PNG похожи на GIF, они не поддерживают анимацию. Этот формат чаще всего используется для иконок, небольших неподвижных изображений или любого изображения, которое нуждается в прозрачности.
Плюсы PNG
Минусы PNG
JPG или JPEG, вероятно, самый известный формат изображения. Это опция по умолчанию для большинства изображений, потому что она удобна для фотографий благодаря практически неограниченному цветному дисплею.
JPG также предлагает возможность выбрать, каким сжатие изображения должно быть от 0% (сильное сжатие) до 100% (без сжатия). Большинство дизайнеров выбирают что-то в диапазоне от 60 до 70 процентов. Изображения по-прежнему хорошо выглядят на этом уровне сжатия, но размеры файлов значительно меньше.
JPG использует сжатие с потерями и не поддерживает исходные данные во время сжатия. Каждый раз, когда фото пересохраняется и экспортируется в формате JPG, оно ухудшается.
Формат JPG чаще всего используется для изображений, фотографий и всего, что имеет большое количество цветов.
Плюсы JPEG
Минусы JPEG
Какой формат следует использовать?
Теперь, когда вы знаете, каковы некоторые различия между SVG, PNG и JPG, что из них вы должны использовать?
Вы можете задать себе несколько следующих вопросов, чтобы получить на это ответ.
Вам нужен векторный или растровый формат?
Вам нужна прозрачность?
Вы используете многоцветное изображение?
Это большая фотография?
Содержит ли изображение текст?
Сжатие без потерь важно для вас?
Нужно ли обновлять и перенастраивать графику?
Вы используете анимацию?
Вывод
Все три формата изображений – SVG, PNG и JPG – имеют практическое и широкое применение. Хотя SVG является новейшим форматом и часто может быть сохранен до наименьшего размера файла, это не всегда лучший вариант.
Подумайте о том, как вы используете изображения в вашем проекте, как вы выбираете тип файла, чтобы найти тот, который будет работать лучше всего для того, что вы пытаетесь достичь. Вы даже можете обнаружить, что некоторые проекты содержат изображения, использующие все три типа файлов. Это на самом деле происходит довольно часто!
Всем успешной работы и творчества!