SVG Grabber обнаруживает каждый SVG на веб-странице — встроенные SVG-элементы, ссылки на внешние .svg-файлы, SVG-спрайты (паттерны use/symbol), а также SVG в формате data URI. Просматривайте каждый SVG в разных размерах, проверяйте прозрачность на светлом и тёмном фоне, копируйте исходный SVG-код или скачивайте оптимизированные SVG-файлы.
SVG встречаются повсюду на современных сайтах — логотипы, иконки, иллюстрации, декоративная графика, визуализации данных — однако извлечь их удивительно сложно. Встроенные SVG вставлены прямо в HTML и не сохраняются как изображение. SVG-спрайты используют ссылки use/symbol, которые не разрешаются в отдельные файлы. Внешние SVG, загруженные через img src или CSS, нельзя проверить без открытия вкладки сети. SVG Grabber автоматически обрабатывает все эти источники. Он сканирует DOM на наличие встроенных SVG, разрешает ссылки на спрайты до полных определений символов, находит внешние SVG URL и декодирует SVG data URI. Каждый SVG отображается в галерее с живым превью, а вы можете переключаться между светлым, тёмным фоном и клетчатым паттерном для проверки прозрачности. Скопируйте исходный SVG-код для встраивания в компоненты или скачайте SVG как файл, готовый к использованию в проекте.
Находит SVG из всех источников на странице: встроенные элементы <svg> в DOM, внешние .svg-файлы, загруженные через теги img или object, SVG в CSS background-image, ссылки спрайтов use/symbol (разрешённые до полных SVG), а также SVG в кодировке base64 data URI.
Просматривайте каждый SVG в разных размерах (оригинал, 2x, 4x) на трёх фонах: тёмном, светлом (белом) и клетчатом. Клетчатый фон позволяет выявить области прозрачности, которые могут быть незаметны на одноцветном фоне.
Нажмите «Copy SVG», чтобы получить полную SVG-разметку — viewBox, пути, группы и все атрибуты включены. Вставьте напрямую в ваш HTML, JSX, шаблон Vue или файл SVG-спрайта. Код чистый и правильно отформатированный.
Скачивайте отдельные SVG как .svg-файлы с правильными XML-объявлениями и кодировкой. Имена файлов основаны на ID SVG, имени класса или aria-label — а не на обобщённых названиях типа «download.svg».
Для каждого SVG отображается тип источника (встроенный, внешний, спрайт, data URI), размеры viewBox, размер файла и место в DOM, где он был найден. Помогает понять, как сайт реализует SVG-стратегию.
Когда страница использует SVG-спрайты со ссылками use href="#icon-name", SVG Grabber разрешает каждую ссылку до полного определения символа — предоставляя вам полноценный автономный SVG, а не только элемент use.
Посетите сайт с отличной системой иконок и захватите весь набор SVG-иконок. SVG Grabber находит иконки в спрайтах, встроенных SVG и внешних файлах — собирая полную библиотеку иконок вне зависимости от способа реализации.
Нужен SVG-логотип компании для партнёрской страницы, кейса или пресс-кита? Большинство логотипов на современных сайтах представлены в формате SVG. SVG Grabber находит и извлекает их в оригинальном векторном качестве — бесконечно масштабируемыми.
Изучайте, как продакшн-сайты реализуют сложные SVG-иллюстрации, анимации или визуализации данных. Скопируйте исходный SVG-код, чтобы изучить структуру путей, конфигурацию viewBox и применение CSS-анимаций.
Переходите на новую систему иконок? Захватите SVG с референсного сайта и добавьте их в ваш SVG-спрайт или компонентную систему иконок. Чистый SVG-код с правильными значениями viewBox, готовый к интеграции.
Проверьте, как SVG реализованы на вашем сайте — встроены ли они (удобно для манипуляций), загружаются внешне (удобно для кэширования) или используют спрайты (удобно для эффективности)? SVG Grabber показывает тип источника для каждого SVG, помогая оптимизировать вашу SVG-стратегию.
Откройте плавающую панель DevSuite Pro и нажмите на иконку SVG Grabber. Инструмент сканирует страницу на наличие всех источников SVG и формирует галерею.
Появляется сетка миниатюр SVG, отображающая все найденные SVG на странице. Каждый элемент показывает название SVG, тип источника и размеры viewBox.
Нажмите на любой SVG, чтобы открыть увеличенный предпросмотр. Переключайтесь между тёмным, светлым и клетчатым фоном. Измените размер превью, чтобы увидеть, как SVG масштабируется.
Нажмите «Copy SVG», чтобы получить исходную разметку для встраивания в код, или «Download», чтобы сохранить его как отдельный .svg-файл на вашем устройстве.
Вернитесь в галерею для изучения других SVG. Значок счётчика показывает общее количество найденных на странице SVG.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
