Дайджесты новостей
Студийный натюрморт современных инструментов векторной графики: адаптивные графики Chartist 2.0, диаграммы Pele и экспорт плоского SVG в 3D с 3dsvg.
Тематическая сводка3 новостиРазработкаФронтендJavaScriptUI
IT: разработка · 22.10.2026

Векторная графика в браузере: Chartist 2.0, диаграммы Pele и экспорт в 3D с 3dsvg

Frontend FocusChartist.js GitHub RepositoryW3C Scalable Vector Graphics (SVG) Specifications
12

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

Однако долгие годы экосистема векторных библиотек бросалась в крайности: либо тяжеловесный монстр D3.js с крутой кривой обучения, либо закрытые проприетарные плееры виджетов.

В сегодняшнем обзоре мы препарируем три великолепных легковесных инструмента недели: обновленную библиотеку графиков Chartist 2.0, генератор диаграмм Pele и утилиту трансформации 3dsvg.

Давай разберем, как эти проекты упрощают работу с вектором.

Chartist 2.0

Культовая библиотека Chartist вернулась с мажорным релизом 2.0. Это не просто обновление номеров версий, а полное переосмысление кодовой базы:

  • Код полностью переписан на современный TypeScript.
  • Вес библиотеки составляет всего 12 КБ без сторонних зависимостей.
  • Разделение разметки и стилизации: в отличие от других библиотек графиков, Chartist не прописывает инлайн-цвета линий и шрифты в SVG-атрибутах. Все линии, сетки и точки получают семантические классы и стилизуются через обычные CSS-правила!
import { LineChart } from 'chartist';
import 'chartist/dist/index.css';

// Инициализация адаптивного линейного графика
new LineChart(
  '#traffic-chart',
  {
    labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
    series: [
      [12000, 15000, 18500, 17200, 22000, 26000, 31000],
      [8000, 9500, 11000, 10500, 14000, 17500, 19000],
    ],
  },
  {
    fullWidth: true,
    chartPadding: { right: 40 },
  }
);

Благодаря чистому SVG анимации появления линий настраиваются через стандартное свойство stroke-dashoffset в CSS. О том, как стилизовать сложную графику, мы также рассказывали в руководстве один SVG, девять тем: стилизация через CSS.

Pele

Текстовый формат описания диаграмм Mermaid завоевал мир документации и баз знаний. Но официальный рантайм mermaid.js весит более мегабайта и тащит за собой тяжелые парсеры.

Проект Pele предлагает радикальную альтернативу:

  • Сверхлегкий рендерер диаграмм Mermaid напрямую в темуемый, чистый SVG.
  • Нулевой оверхед по зависимостям.
  • Поддержка темного и светлого режима через CSS-переменные currentColor.
import { renderMermaidToSvg } from 'pele';

const diagramText = `
graph TD
  A[Клиентский запрос] --> B[Балансировщик Nginx]
  B --> C[Node.js Бэкенд]
  C --> D[(PostgreSQL)]
`;

const svgString = renderMermaidToSvg(diagramText, { theme: 'neutral' });
document.getElementById('diagram-container').innerHTML = svgString;

3dsvg

Инструмент 3dsvg стирает грань между двумерной векторной графикой и трехмерным пространством:

  • Загружаешь плоский SVG-логотип или иконку.
  • Алгоритм на лету триангулирует кривые Безье, выдавливает объем (Extrusion) и генерирует готовую 3D-модель в формате glTF/GLB.
  • Модель можно сразу вставить в веб-страницу через <model-viewer> или Three.js.

Векторный вывод

Векторная графика в вебе окончательно повзрослела: благодаря Chartist 2.0, Pele и 3dsvg мы получаем легкие, адаптивные и потрясающе четкие графические интерфейсы без лишнего кода.