Главные боли SVG в 2026 году 🎨

SVG до сих пор ощущается как изолированный остров внутри веб-платформы. Патрик Броссе из Microsoft проанализировал фидбек разработчиков и собрал основные «недостающие звенья» технологии, которые всех бесят:

• Стилизация внешних ассетов. Все хотят красить иконки (fill, stroke) через CSS-переменные или использовать currentColor, когда файл подключен стандартно через <img> или background-image. Сейчас ради этого приходится инлайнить тонны тяжелого XML-кода прямо в HTML. Из хорошего: Firefox уже внедряет спецификацию CSS Linked Parameters, а Microsoft пилит её для Chromium. Скоро дождёмся.
• Игнорирование CSS-стандартов. Элементы внутри графики неохотно дружат с базовыми концептами платформы. Кроссбраузерная поддержка z-index, функций calc(), backdrop-filter и эффектов смешивания типа mix-blend-mode для конкретных тегов <path> внутри SVG всё ещё оставляет желать лучшего.
• Убогая типографика. В SVG нет нормального адаптивного текста. Спецификации не хватает встроенного переноса строк (inline-size), гибкого управления пробелами (white-space) и обработки переполнения (text-overflow). Из-за этого для локализации графиков приходится либо вручную разбивать строки, либо переводить шрифты в кривые, уничтожая a11y.
• Сломанный foreignObject. Идея встраивать HTML-лейаут внутрь SVG — интересная, но из-за багов рендеринга и непредсказуемого позиционирования в разных браузерах использовать это в продакшене до сих пор страшно.

Вывод простой: веб-платформа обязана развивать SVG, иначе разработчики продолжат обходить сложные графические фичи стороной из-за вечных костылей и непредсказуемого перформанса.

Часто сталкиваетесь с ограничениями SVG или просто инлайните всё подряд и не паритесь? 👇

Читать статью