Логотип, иконка, шрифтовая надпись — всё это плоские SVG-файлы. Но что если вам нужно превратить их в объёмные 3D-объекты — для сайта, презентации или даже 3D-печати? Раньше для этого требовался Blender и час ручной работы. Сегодня появилось целое поколение бесплатных open-source инструментов, которые делают это прямо в браузере за секунды.

В этой статье разберём, как устроены современные SVG-to-3D конвертеры, сравним лучшие из них и покажем, как технически работает превращение плоского вектора в объёмную геометрию.

Зачем конвертировать SVG в 3D

На первый взгляд задача нишевая. Но сценариев применения больше, чем кажется:

  • 3D-печать логотипов и вывесок. Экспортировать SVG-логотип в STL и отправить на принтер — самый прямой путь к физическому прототипу.
  • Интерактивные 3D-элементы на сайте. Вращающийся логотип или анимированная иконка на лендинге привлекают внимание.
  • Презентации и видео. Объёмный текст и иконки выглядят профессиональнее плоской графики.
  • WebAR и VR. 3D-модели из SVG можно встраивать в AR-сцены без сложного моделирования.
  • Геймдев и прототипирование. Быстрое создание 3D-ассетов из существующей векторной графики.
ℹ Почему именно SVG?
SVG хранит изображение как математические кривые (пути Безье), а не пиксели. Это делает его идеальным исходным форматом для 3D-экструзии — геометрия точно описана и масштабируется без потерь.

Как это работает: от плоского вектора к объёму

Процесс конвертации SVG в 3D-модель технически сводится к нескольким этапам. Все современные инструменты в основе используют библиотеку Three.js и её модуль SVGLoader.


graph TD
    A[SVG-файл] --> B[Парсинг путей SVGLoader]
    B --> C[Преобразование в Shape]
    C --> D[ExtrudeGeometry — экструзия]
    D --> E[Наложение материала]
    E --> F[Рендер в WebGL-сцене]
    F --> G[Экспорт: STL / OBJ / GLB / PNG / Video]

Этап 1: Парсинг SVG

SVGLoader из Three.js разбирает SVG-файл и извлекает из него пути — кривые Безье, линии, дуги. Каждый <path> элемент становится набором точек.

Этап 2: Преобразование в Shape

Извлечённые пути конвертируются в объекты THREE.Shape — замкнутые двумерные контуры, которые Three.js умеет обрабатывать. Важный нюанс: система координат SVG (начало в левом верхнем углу, Y направлен вниз) отличается от 3D-пространства (Y направлен вверх), поэтому инструменты инвертируют ось Y.

Этап 3: Экструзия

Ключевой шаг — ExtrudeGeometry. Плоский контур «вытягивается» вдоль оси Z на заданную глубину. Параметры экструзии включают:

const extrudeSettings = {
  depth: 10,           // глубина экструзии
  bevelEnabled: true,  // скругление краёв
  bevelThickness: 1,   // толщина фаски
  bevelSize: 0.5,      // размер фаски
  bevelSegments: 3     // детализация фаски
};

const geometry = new THREE.ExtrudeGeometry(shapes, extrudeSettings);

Этап 4: Материал и рендер

На полученную геометрию накладывается материал — MeshPhysicalMaterial позволяет имитировать металл, стекло, пластик, голографическую поверхность. Результат рендерится через WebGL прямо в браузере.

💡 Совет для 3D-печати
Если вы конвертируете SVG для 3D-печати, отключите bevel (фаску) и используйте экспорт в STL. Для многоцветной печати выбирайте формат 3MF — он сохраняет информацию о цветах и материалах отдельных слоёв.

Обзор лучших open-source инструментов

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

3DSVG — самый функциональный

Автор — Renato Costa (renatoworks). Проект, который вызвал волну обсуждений на Hacker News и Reddit. Это не просто конвертер, а полноценный редактор с анимациями и видео-экспортом.

Что умеет:

  • 4 способа ввода: загрузка SVG, текст (10 Google-шрифтов), пиксельный редактор, вставка SVG-кода
  • 10 пресетов материалов: пластик, металл, стекло, хром, золото, голографик и др.
  • 7 анимаций: вращение, парение, пульсация, раскачивание и комбинации
  • Экспорт в PNG (до 4K, с прозрачностью) и видео (MP4/WebM, 60fps)
  • Генерация JSX-сниппета для встраивания в React-проекты
  • npm-пакет 3dsvg для программного использования
import { SVG3D } from "3dsvg";

// Текст в 3D
<SVG3D text="Hello" animate="spin" material="gold" />

// SVG-файл в 3D
<SVG3D svg="/logo.svg" material="chrome" />

Стек: Next.js 16, React Three Fiber, Three.js, FFmpeg WASM (для видео), opentype.js (для шрифтов).

Сайт: 3dsvg.design | GitHub: renatoworks/3dsvg | Лицензия: MIT

Vecto3D — лучший для 3D-печати

Автор — Lakshay Bhushan. Проект набрал 1400+ звёзд на GitHub. Фокус на конвертации SVG-логотипов в модели для 3D-принтеров.

Что умеет:

  • Настраиваемая толщина и фаски экструзии
  • Материалы: стекло, металл, пластик
  • Превью в разных окружениях и с пользовательским фоном
  • Экспорт в STL, GLB, GLTF
  • Рендер в PNG (HD / 2K / 4K)
  • «Vibe Mode» — bloom-эффект и мягкие тени

Стек: Next.js, React Three Fiber, Three.js, shadcn/ui, Tailwind CSS.

Сайт: vecto3d.xyz | GitHub: lakshaybhushan/vecto3d | Лицензия: MIT

Bekuto3D — для многоцветной 3D-печати

Автор — LittleSound. Уникальная особенность — поддержка формата 3MF, который сохраняет цвета и материалы для многоцветных 3D-принтеров.

Что умеет:

  • Экспорт в STL, OBJ, GLTF и 3MF
  • Сохранение цветов и материалов из SVG
  • Оптимизация для 3D-печати

Стек: Vue, TypeScript, Three.js, Vite.

Сайт: bekuto3d.ayaka.io | GitHub: LittleSound/bekuto3d | Лицензия: MIT

Vextrude — для быстрого прототипирования

Коммерческий инструмент, но в данный момент полностью бесплатный. Дополнительно умеет конвертировать шрифты (TTF/OTF → Typeface JSON для Three.js).

Что умеет:

  • Экструзия с послойным управлением глубиной
  • Экспорт в STL, OBJ, GLB
  • Конвертация шрифтов для Three.js
  • Настройка кернинга и фасок для текста

Сайт: vextrude.com

Сравнение инструментов

Возможность3DSVGVecto3DBekuto3DVextrude
Open-sourceДа (MIT)Да (MIT)Да (MIT)Нет
npm-пакетДаНетНетНет
Текстовый вводДа (10 шрифтов)НетНетДа
Пиксельный редакторДаНетНетНет
Экспорт STLНетДаДаДа
Экспорт GLB/GLTFНетДаДаДа
Экспорт PNG/4KДаДаНетНет
Экспорт видеоДа (MP4/WebM)НетНетНет
Формат 3MFНетНетДаНет
Анимации7 типовНетНетНет
Материалы10 пресетов3 типаБазовыеБазовые
Лучше всего дляВеб / маркетинг3D-печатьМногоцвет. печатьШрифты / STL
📝 Какой инструмент выбрать?
Для сайта или презентации — 3DSVG: анимации, видео-экспорт, JSX-интеграция. Для 3D-печати одноцветной — Vecto3D: лучший контроль экструзии, экспорт в STL. Для многоцветной 3D-печати — Bekuto3D: уникальная поддержка формата 3MF с сохранением цветов. Для работы со шрифтами — Vextrude: конвертация TTF/OTF, тонкая настройка кернинга.

Общий стек: почему все строят на Three.js

Все рассмотренные инструменты используют Three.js как основу для 3D-рендеринга. Это не совпадение — Three.js предоставляет готовые компоненты для всей цепочки:

  • SVGLoader — парсинг SVG-путей
  • ExtrudeGeometry — экструзия контуров в 3D
  • MeshPhysicalMaterial — реалистичные материалы с PBR
  • WebGLRenderer — GPU-ускоренный рендеринг в браузере

React-обёртка React Three Fiber (R3F) делает работу с Three.js декларативной — 3D-сцены описываются как React-компоненты. Именно поэтому 3DSVG смог реализовать npm-пакет, который встраивается в любой React-проект одной строкой.

Three.js и React Three Fiber превратили браузер в полноценную платформу для 3D — то, что раньше требовало десктопных приложений, теперь работает во вкладке Chrome без единого серверного запроса.

Все вычисления выполняются на клиенте через WebGL. Файлы не покидают браузер. Для видео-экспорта 3DSVG использует FFmpeg, скомпилированный в WebAssembly, — даже кодирование MP4 происходит локально.

Ограничения и подводные камни

При всей простоте использования, у SVG-to-3D конвертации есть границы:

  1. Сложные SVG могут ломаться. Если SVG содержит пересекающиеся пути, маски, фильтры или градиенты — результат может быть непредсказуемым. Лучше всего работают «чистые» SVG с простыми замкнутыми контурами.

  2. Это экструзия, не моделирование. Инструменты вытягивают плоский контур в объём — получается «печенька». Для сложных 3D-форм (скульптуры, персонажи) нужен настоящий 3D-редактор.

  3. Производительность зависит от сложности SVG. Тысячи мелких путей создают тяжёлую геометрию — рендер может тормозить на слабых устройствах.

⚠ Перед конвертацией
Упростите SVG перед загрузкой: объедините пересекающиеся пути, удалите невидимые элементы, конвертируйте текст в кривые. Инструменты вроде SVGO или встроенный оптимизатор в Inkscape помогут подготовить файл.

Заключение

SVG-to-3D — это тот случай, когда open-source решения не просто не уступают коммерческим, а превосходят их. 3DSVG, Vecto3D и Bekuto3D покрывают все основные сценарии: от встраивания анимированных 3D-элементов на сайт до подготовки моделей для многоцветной 3D-печати.

Ключевые выводы:

  • Барьер входа исчез. Никаких Blender, Maya или подписок — откройте браузер, загрузите SVG, получите результат.
  • Всё работает локально. Файлы не покидают ваш компьютер. Приватность и скорость по умолчанию.
  • Three.js — общий фундамент. Понимание экструзии и React Three Fiber позволяет кастомизировать любой из этих инструментов или создать свой.
  • MIT-лицензия везде. Используйте в коммерческих проектах без ограничений.

Если вы дизайнер, фронтенд-разработчик или энтузиаст 3D-печати — попробуйте эти инструменты. Результат удивляет уже через 30 секунд после загрузки первого SVG.