Как пользоваться: Масштабирование SVG viewBox
- Вставьте SVG, у которого есть
viewBox(или ширина и высота). - Укажите новый размер viewBox — например, 24 × 24, чтобы совпасть с набором иконок.
- Выберите точность и нужно ли масштабировать толщину обводки.
- Скопируйте результат: оба превью должны выглядеть одинаково, меняются только числа.
Зачем пересчитывать координаты вместо transform?
Наборы иконок работают лучше всего, когда все иконки имеют одинаковый viewBox (24×24, 20×20, 16×16…): они выровнены, а толщина линий выглядит одинаково. Обёртка иконки в <g transform="scale(0.5)"> работает визуально, но оставляет в исходнике неудобные числа, непредсказуемо масштабирует обводку и ломает инструменты, которые читают данные path. Пересчёт координат даёт чистый SVG, который ведёт себя так, будто его нарисовали сразу в новом размере.
Что масштабируется
- Данные path (
d) — все команды, абсолютные и относительные: M, L, H, V, C, S, Q, T и A. Для дуг масштабируются радиусы, а поворот и флаги сохраняются. x,y,cx,cy,x1…y2,width,height,rx,ry,rиpoints.- По желанию —
stroke-widthиfont-size. - viewBox, который начинается не с 0 0, сдвигается к 0 0.
Ограничения
Элементы со своим атрибутом transform сохраняют его без изменений, а проценты и размеры, заданные через CSS, не конвертируются. Чтобы получить точный результат, сначала примените трансформации в Figma или Illustrator (или используйте convertTransform из SVGO). Неравномерное масштабирование (разные коэффициенты по X и Y) приближает радиусы окружностей средним коэффициентом.
Дальше можно очистить иконку и вставить её в Webflow с помощью SVG to Webflow или преобразовать для React с помощью SVG to JSX.
Также ищут как: масштабирование svg path, изменить размер svg, нормализация иконок, svg 24x24, path transform, пересчёт координат svg.
Инструменты, которые хорошо сочетаются с Масштабирование SVG viewBox
- SVG в CSS конвертер — Вставьте SVG и получите компактный URL-закодированный data URI, а также готовые правила background-image и перекрашиваемые mask-image.
- Калькулятор соотношения сторон — Меняйте размер изображений и видео без искажений: укажите соотношение и одну сторону, чтобы получить вторую, или введите размер, чтобы узнать его соотношение.
- Генератор фавикона — Создайте полный набор фавикона из логотипа, буквы или эмодзи: favicon.ico с несколькими размерами, Apple touch icon, иконки Android/PWA, webclip для Webflow, веб-манифест и HTML-теги для вставки.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как поменять SVG с 512×512 на 24×24?
Иконка будет выглядеть иначе?
Зачем оставлять stroke-width без масштабирования?
Что с transform?
transform остаются как есть, и вы увидите предупреждение. Чтобы получить полностью чистый результат, примените их в дизайн-редакторе.