Тренажёр viewBox и preserveAspectRatio
Один SVG может целиком помещаться в иконку, обрезаться по краям баннера или растягиваться. Изменяйте окно и координаты рисунка, чтобы увидеть, как работают viewBox и preserveAspectRatio. В режиме практики решите задачи на масштаб, выравнивание и выбор области.
Как пользоваться тренажёром
Ширина и высота окна задаются в CSS-пикселях. Четыре числа viewBox — начало X, начало Y, ширина и высота области в координатах рисунка. Увеличение размеров viewBox уменьшает рисунок в том же окне. Изменение первых двух чисел сдвигает выбранную область.
Meet выбирает меньший масштаб и вмещает весь viewBox. Slice выбирает больший масштаб и заполняет окно. None масштабирует оси независимо и игнорирует выравнивание. Min, Mid и Max задают начало, середину и конец по каждой оси. Обрезку создаёт overflow: hidden, а не само значение slice.
Под превью показаны масштаб, смещение и координаты, попадающие в окно. Рамка — граница окна; на маленьком экране пример уменьшается целиком. Скопируйте SVG или скачайте его для проверки в своей странице. Прогресс практики сохраняется локально; просмотр разбора не засчитывает решение.
Для вашего удобства рекомендую использовать полноэкранный режим.
Для интерактивного исследования включите JavaScript. При viewBox="0 0 200 100" и окне 300 × 200 режим meet даёт масштаб 1,5 и свободные полосы по 25 px сверху и снизу; slice — масштаб 2 и обрезку по 50 px слева и справа при overflow: hidden.
Как координаты переходят в пиксели
Для окна 300 × 200 и viewBox="0 0 200 100" исходные масштабы равны 1,5 и 2. Meet использует 1,5 по обеим осям: при xMidYMid сверху и снизу остаётся по 25 px. Slice использует 2: рисунок становится 400 × 200, а по 50 px слева и справа выходят за окно. None использует оба исходных масштаба и превращает круг в эллипс.
Подробнее: системы координат в SVG 2. Для собственной геометрии откройте редактор пути, а для декоративных фонов — генератор волн.