Давайте коротко пройдемся по основным отличиям двух наиболее популярных форматов иконок для сайтов: PNG и SVG.
PNG — это растровый формат. Если упрощать, это значит, что в файле хранится информация о том, какой цвет и прозрачность заданы для той или иной точки (пикселя). Поэтому для PNG всегда указывается разрешение, которое показывает, сколько всего точек описано. PNG это уже довольно старый формат, и ожидается, что вскоре ему на смену придет что-то новое, но пока что он всё еще доминирует в вебе.
Преимущества PNG
- Простота в использовании — открывается всеми браузерами и большинством редакторов для редактирования изображений
- Наличие прозрачности — в отличие от JPG, изображения в PNG могут быть с прозрачными частями (без фона)
- Легкость встраивания — большинство CMS поддерживают работу PNG, а вставить такую иконку в страницу очень просто
Проблемы PNG
- При большом разрешении — большой вес
- Масштабирование ограничено разрешением. Это может оказаться проблемой, например, для мониторов с высокой плотностью (Retina). Качество иконок на таких мониторах может стать очень неприятным сюрпризом
- Сложно редактировать готовую иконку — популярные редакторы для веба не очень подходят для работы с PNG (Кстати, вы можете использовать Image Tracer в Figma для конвертации PNG в вектор)
Что такое SVG
SVG хранит информацию о содержании изображения в виде уравнений кривых (Кривые Безье). Информацию о том, чем заполнен пиксель, получают из этих уравнений (для X будет найден соответствующий Y). Таким образом можно рассчитать значения для любых разрешений, поэтому иконки SVG никогда не теряют четкости.
Преимущества SVG
- Высокая четкость всегда и везде
- Маленький вес для простых изображений
- Удобно изменять в редакторах
- Можно анимировать
Проблемы SVG
- Нужны специальные редакторы для изменения
- Могут приводить к медленной загрузке при большой разметке
- Поддерживаются не всеми CMS и устройствами
Что же выбрать?
В зависимости от ваших потребностей и уровня работы с веб-сайтом. Если вы не слишком сильно подкованы, делайте выбор в пользу старого-доброго PNG, ведь это самый простой для интеграции формат.
Если же вам важно, чтобы иконки имели безупречный вид на любых устройствах, обратите внимание на SVG. Если вашего владения CMS или HTML недостаточен, обратитесь к веб-мастеру — это недорогая операция, гарантирующая наиболее качественное отображение.
Где подобрать иконки в SVG или PNG? В нашей базе, конечно: найти и скачать иконки бесплатно.