← Назад в «Блог»
1 520
Обновлено: 8 апреля 2025

★ Как копировать SVG из браузера в Фигму

Я написал бота, который упрощает все до пары кликов
https://t.me/getsvg_bot

Часто нужно скопировать, но обычный вариант с кликом правой кнопкой мыши и «Сохранить как» не работает. У SVG такого нет.

Сейчас расскажу, как это можно сделать. Если коротко — скопировать код svg и вставить в фигму.

Откройте страницу

Откройте страницу с SVG.

Мне нужно для одного из проектов такой знак. Переходя из википедии по ссылке, открывается страница SVG-файла.

★ Как копировать SVG из браузера в Фигму 1

Перейдите в консоль разработчика

Чтобы открыть консоль, нажмите Ctrl+Shift+I или кликните правой кнопкой мыши и выберите «открыть консоль разработчика».

Выглядеть будет так

★ Как копировать SVG из браузера в Фигму 2

Найдите тег <svg>

Чтобы найти код SVG, найдите вкладку «Элементы/Elements». Там надо найти код, который начинается с <svg.

★ Как копировать SVG из браузера в Фигму 3

Скопируйте

Кликните по этой строчке правой кнопкой мыши и выберите «Копировать → Копировать outerHTML».

★ Как копировать SVG из браузера в Фигму 4

Вставье

Переходим в фигму, нажимаем Ctrl+V, готово.

★ Как копировать SVG из браузера в Фигму 5

Если SVG уже встроен где-то на странице

Нажимайте правой кнопкой мыши и дальше «просмотреть код»

★ Как копировать SVG из браузера в Фигму 6

После этого снизу у вас отроектся панель кода. Скорее всего у вас выделится элемент path. Path — это часть всего SVG. Нам надо прокрутить выше и найти SVG.

★ Как копировать SVG из браузера в Фигму 7

Кникнуть по нему правой кнопкой мыши, нажать Copy → Copy OuterHTML. На русском Копировать → Копировать OuterHTML

Полезно
4
1
Непонятно
1
Поделиться
Отправить
Линкануть
Вотсапнуть

Канал Дани в телеграме

В канале показываю, как разрабатываю продукты: нейронки, боты, пет-проекты, бизнес. Делюсь фишками о разработке и дизайне. Без рекламы.

Подписаться
← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Контакты