SVG против PNG: Какой Формат Выбрать?
Используйте SVG для иконок сайтов, логотипов и интерфейсов, так как векторные контуры остаются четкими на любом экране. Используйте PNG, когда нужно растровое изображение фиксированного размера.
Векторная графика хранит контуры как вычисления, а не как пиксели: один и тот же файл остаётся резким от фавикона 16 px до экспорта 2048 px. PNG использует фиксированные пиксели, и некоторые платформы требуют именно такой формат. Наш сайт конвертирует SVG в PNG и WebP прямо в браузере в размерах 64px, 128px, 256px, 512px, 1024px, 2048px, и на странице каждого значка указаны лицензия и автор. Для значков интерфейса и логотипов, которые должны выдерживать Retina-экраны, смену цвета и адаптивные макеты, выбирайте SVG; для мест, где нужен фиксированный растр, например социальных карточек, витрин магазинов приложений или старых почтовых клиентов, выбирайте PNG.
SVG, one file for every size
<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Bell">
<path d="M12 3a6 6 0 0 0-6 6c0 4.5-1.5 5.5-1.5 5.5h15S18 13.5 18 9a6 6 0 0 0-6-6Z"/>
<path d="M10 19a2 2 0 0 0 4 0"/>
</svg>PNG, when a fixed pixel size is required
<img src="bell-512px.png" width="512" height="512"
alt="Bell notification icon">Проверенные факты об этом сайте
- Форматы экспорта: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- Размеры растрового экспорта: 64px, 128px, 256px, 512px, 1024px, 2048px
- Лимит загрузки одного файла в мастерской: 2 MB
- Лицензия и автор указаны на странице каждого значка.