Векторная графика кажется идеальным вариантом для сайта: масштабируется без потери качества, часто весит немного, а цвета можно подстроить под тему. Но на практике всё упирается в детали: сложный SVG бывает тяжелее обычной картинки, а неподготовленная иллюстрация — неожиданно ломать вёрстку или плохо выглядеть на тёмном фоне.
Как вы обычно готовите SVG перед публикацией? Экспортируете прямо из Figma или прогоняете через оптимизатор, вручную чистите код? Интересно, где для вас проходит граница: когда SVG действительно удобнее WebP или PNG, а когда проще оставить растровую картинку. Особенно любопытны примеры с иконками, логотипами и большими иллюстрациями на первом экране.
Ещё вопрос про поддержку и доступность: задаёте ли изображению осмысленный текст для скринридеров, используете ли SVG как отдельный файл или вставляете прямо в HTML? Поделитесь рабочими приёмами и граблями: например, сталкивались ли с проблемами из-за встроенных шрифтов, фильтров, масок или фиксированных размеров. Хочется собрать не теорию, а практичный набор правил для повседневной вёрстки.
Как вы обычно готовите SVG перед публикацией? Экспортируете прямо из Figma или прогоняете через оптимизатор, вручную чистите код? Интересно, где для вас проходит граница: когда SVG действительно удобнее WebP или PNG, а когда проще оставить растровую картинку. Особенно любопытны примеры с иконками, логотипами и большими иллюстрациями на первом экране.
Ещё вопрос про поддержку и доступность: задаёте ли изображению осмысленный текст для скринридеров, используете ли SVG как отдельный файл или вставляете прямо в HTML? Поделитесь рабочими приёмами и граблями: например, сталкивались ли с проблемами из-за встроенных шрифтов, фильтров, масок или фиксированных размеров. Хочется собрать не теорию, а практичный набор правил для повседневной вёрстки.
Комментарии 9
Обсуждение темы — по порядку