SVG в 3D онлайн

Готов

Перетащите SVG сюда

или нажмите «Загрузить SVG». Контуры станут объёмными фигурами со студийным светом.

Как превратить SVG в 3D онлайн

Инструмент выдавливает плоский векторный контур в объёмную фигуру с фаской и студийным светом. Он подходит для логотипов, иконок и простых знаков: сделать 3D-логотип для сайта, обложку, превью для соцсетей или презентации. Сцена рендерится в браузере на Three.js (WebGL), без установки программ.

Как пользоваться

Нажмите «Загрузить SVG» или перетащите файл в окно. Чтобы сначала посмотреть, как это выглядит, нажмите «Посмотреть на демо».
Выберите материал: студия, стекло, пластик, металл или хром.
Задайте цвет модели и цвет фона.
Настройте мощность света и глубину 3D (от 0 до 200%). Водите курсором по сцене: фигура наклоняется за мышью, так подбираются ракурс и блик.
Сохраните результат: «4K скриншот» даёт PNG шириной 3840 px, «Экспорт HTML» — код сцены для вставки на сайт.

Как подготовить SVG

Объём получают только фигуры с заливкой. Линии без заливки (обводка, stroke) пропускаются. Переведите обводку в контур: в Figma — Outline stroke, в Illustrator — Object → Path → Outline Stroke.
Текст переведите в кривые, иначе буквы не появятся.
Чем проще контур, тем чище фаска. Лишние точки и мелкие детали дают артефакты.
Вся фигура окрашивается в один цвет, исходные цвета SVG не сохраняются.

Экспорт HTML

Код содержит ваш SVG и выбранные настройки. Вставьте его в блок HTML-кода на любой странице: сцена займёт блок 16:10 и будет реагировать на мышь так же, как здесь. Three.js при этом загружается с CDN, поэтому странице нужен интернет.

Ограничения

Скачать 3D-модель (GLB, OBJ, STL) нельзя. Результат — картинка или интерактивная сцена, для 3D-печати и Blender он не подходит.
Принимаются только SVG. Растровые PNG и JPG не подойдут.
Наклон работает от мыши. На телефоне фигура остаётся в исходном ракурсе.
Стекло и хром сильнее нагружают видеокарту, и на слабых устройствах сцена может подтормаживать.

Приватность

SVG читается и рендерится в вашем браузере, на сервер файл не отправляется. Библиотека Three.js загружается с CDN cdnjs и jsDelivr. Сайт ведёт статистику посещений: Cloudflare Web Analytics без cookie, а Яндекс Метрика и Google Analytics подключаются, только если вы согласились на cookie. Подробнее — в политике конфиденциальности.

Нужна идея для знака — посмотрите промпты для логотипов. Скриншот 4K в PNG весит много: перед публикацией его удобно сжать онлайн. Объём из обычного фото даёт карта глубины онлайн.

Частые вопросы об SVG в 3D

Можно ли скачать 3D-модель для печати?

Нет. Инструмент сохраняет PNG-скриншот 3840 px и HTML-код сцены. Файлов GLB, OBJ и STL нет.

Почему SVG не превращается в объём?

Скорее всего, в файле только обводки или текст. Переведите обводку и шрифт в кривые с заливкой и загрузите файл снова.

Как вставить 3D-логотип на сайт?

Нажмите «Экспорт HTML», затем «Копировать» и вставьте код в блок HTML-кода вашего конструктора сайта или в шаблон страницы.

Это бесплатно?

Да, без регистрации. Водяных знаков на скриншоте нет.