Перед началом
Возьмите три реальных файла: фотографию, простой логотип и снимок интерфейса с мелким текстом. Для каждого запишите размер показа и необходимость прозрачного фона.
Текстовое объяснение схемы
Фото → растр → Логотип → SVG → Интерфейс → точные края. Иконка круга описывается одной геометрической фигурой. Портрет содержит тысячи сложных переходов: автоматическая трассировка может создать тяжёлый SVG и испортить лицо. Векторная оболочка с вложенной фотографией не превращает её в масштабируемый рисунок.
Как сделать
- Фотографию сохраняйте в растровом формате: JPEG, WebP или AVIF по требованиям проекта. Сравнивайте артефакты на сложных деталях и не экспортируйте огромный исходник для маленькой карточки.
- Простой логотип или схему готовьте в SVG, если права и инструменты позволяют. Проверьте viewBox, отсутствие внешних ресурсов и читаемость при уменьшении. Полученный от неизвестного автора SVG сначала проверяют как код.
- Для снимка интерфейса сравните PNG и WebP: мелкие контрастные буквы особенно чувствительны к потерям. Не превращайте текстовую инструкцию целиком в картинку — рядом нужен доступный текст.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#fa4616"/></svg>Разберём пример
Иконка круга описывается одной геометрической фигурой. Портрет содержит тысячи сложных переходов: автоматическая трассировка может создать тяжёлый SVG и испортить лицо. Векторная оболочка с вложенной фотографией не превращает её в масштабируемый рисунок.
Проверьте результат
Увеличьте логотип, уменьшите его до размера значка и откройте файл на тёмном фоне. Для фото проверьте детализацию при реальном размере показа и выбранный браузером ресурс.
Где легко ошибиться
Расширение SVG само по себе не доказывает компактность и безопасность. Файл может содержать растровые данные, скрипты или ссылки на внешние ресурсы.
Источники и продолжение
- MDN — Responsive images
- Векторная и растровая графика для web — 2009-01-24 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.