Масштабирование под разные экраны

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

Использование viewBox и preserveAspectRatio

Главный инструмент для адаптивного масштабирования SVG — атрибут viewBox. Он задаёт координатную систему внутреннего SVG и определяет, какая область отображается в пределах контейнера.

const draw = SVG().addTo('body').size('100%', '100%');
draw.viewbox(0, 0, 800, 600);
  • Первые два параметра 0, 0 задают начальную точку координат.
  • Последние два — ширину и высоту внутреннего пространства.

Атрибут preserveAspectRatio управляет тем, как графика вписывается в контейнер при изменении его размеров:

  • xMidYMid meet — сохраняет пропорции, помещая SVG полностью внутрь контейнера.
  • xMinYMin slice — масштабирует так, чтобы заполнить контейнер, возможна обрезка.
draw.attr('preserveAspectRatio', 'xMidYMid meet');

Использование viewBox и preserveAspectRatio гарантирует, что все объекты внутри SVG будут масштабироваться пропорционально, независимо от размеров окна.

Масштабирование элементов вручную

SVG.js позволяет изменять размеры отдельных элементов через методы .scale() и .size().

Пример масштабирования по оси X и Y:

const rect = draw.rect(100, 50).fill('#3498db');
rect.scale(2, 1.5); // ширина увеличена в 2 раза, высота — в 1.5
  • .scale(sx, sy, cx, cy) — sx и sy — коэффициенты масштабирования, cx и cy — точка центра трансформации.
  • Без указания центра, масштабирование происходит относительно левого верхнего угла.

Для динамического масштабирования в зависимости от размеров окна можно использовать обработчик resize:

window.addEventListener('resize', () => {
  const scaleX = window.innerWidth / 800;
  const scaleY = window.innerHeight / 600;
  rect.scale(scaleX, scaleY);
});

Использование групп (<g>) для комплексной трансформации

Для управления масштабированием нескольких объектов одновременно удобно использовать группы.

const group = draw.group();
group.add(draw.circle(50).move(100, 100));
group.add(draw.rect(80, 40).move(50, 150));

// Масштабирование всей группы
group.scale(1.5);

Группы позволяют применять трансформации ко всем вложенным элементам одновременно, что упрощает адаптацию сложных схем под разные экраны.

Масштабирование с учётом плотности пикселей

Для устройств с высокой плотностью пикселей (retina и аналогичных) важно учитывать коэффициент масштабирования устройства (window.devicePixelRatio).

const scaleFactor = window.devicePixelRatio || 1;
draw.size(800 * scaleFactor, 600 * scaleFactor);
draw.viewbox(0, 0, 800, 600);

Такой подход обеспечивает чёткое отображение линий и текста на дисплеях с высоким разрешением.

Адаптивная типографика и линии

При масштабировании важно корректно задавать размеры шрифтов и толщину линий:

const text = draw.text('SVG.js').font({ size: 24 });
const line = draw.line(0, 0, 200, 0).stroke({ width: 2 });

const scale = window.innerWidth / 800;
text.font({ size: 24 * scale });
line.stroke({ width: 2 * scale });

Таким образом, при изменении размеров контейнера сохраняется визуальная пропорциональность всех элементов, включая текст и контуры.

Динамическое масштабирование с анимацией

SVG.js поддерживает анимацию трансформаций через метод .animate():

rect.animate(1000).scale(2).after(() => {
  rect.animate(1000).scale(0.5);
});

Для адаптивного интерфейса это позволяет плавно изменять размеры элементов при изменении окна, обеспечивая красивый визуальный эффект.

Практическая стратегия масштабирования

  1. Всегда задавать viewBox для SVG-контейнера.
  2. Использовать preserveAspectRatio для контроля поведения графики.
  3. Группировать объекты для удобного масштабирования.
  4. Масштабировать шрифты и линии пропорционально.
  5. Учитывать devicePixelRatio для высокой плотности пикселей.
  6. При необходимости добавлять анимацию для динамического изменения размеров.

Эта последовательность действий позволяет создавать графику, которая сохраняет правильные пропорции, остаётся чёткой и корректно отображается на любых устройствах и экранах.

Оглавление