Вернуться к сервисам

SVG-редактор онлайн

Редактируйте SVG-код в браузере с живым предпросмотром и скачиванием результата.

Файл обрабатывается локально в браузере • загрузка на сервер не требуется • готовый SVG можно скачать.

Предпросмотр

Нет файла
Загрузите SVG После загрузки изображение появится здесь и будет обновляться при изменении кода.
Размер: — Файл: —

Код SVG

Живое обновление
0 символов Изменения применяются автоматически

Подробнее об инструменте — SVG-редактор онлайн

Редактируйте SVG-код в браузере с живым предпросмотром и скачиванием результата.

Загрузите SVG-файл или вставьте XML-код, меняйте цвета, размеры, текст, линии и другие параметры, сразу проверяйте результат и сохраняйте готовый SVG. Сервис работает прямо через веб-страницу DEVNEW.ORG и не требует установки отдельной программы. Он подходит владельцам сайтов, разработчикам, SEO-специалистам, дизайнерам и всем, кому нужен быстрый онлайн-инструмент. Используйте его бесплатно для рабочих и личных задач.

Смотрите также

Векторизация JPG / PNG в SVG

Преобразуйте растровые JPG и PNG в SVG для логотипов, иконок и простой графики.

Перейти к инструменту

Сжатие изображений JPG, PNG и WebP

Уменьшайте размер JPG, PNG и WebP с настройкой качества и пакетной обработкой.

Перейти к инструменту

Генератор QR-кодов

Создавайте QR-коды для ссылок, текста, телефонов и других данных с загрузкой PNG или SVG.

Перейти к инструменту
'; empty.style.display = 'none'; frame.style.display = 'block'; setStatusOk(); updateMeta(result.root, source); } function parseAndSanitize(source) { try { const parser = new DOMParser(); const doc = parser.parseFromString(source, 'image/svg+xml'); const parseError = doc.querySelector('parsererror'); if (parseError) { return { ok: false, error: 'В SVG-коде есть синтаксическая ошибка.' }; } const root = doc.documentElement; if (!root || root.nodeName.toLowerCase() !== 'svg') { return { ok: false, error: 'Код должен содержать корневой элемент .' }; } sanitizeSvg(root); return { ok: true, root: root, svg: new XMLSerializer().serializeToString(root) }; } catch (e) { return { ok: false, error: 'Не удалось разобрать SVG-код.' }; } } function sanitizeSvg(root) { const blockedTags = [ 'script', 'foreignObject', 'iframe', 'object', 'embed', 'audio', 'video' ]; blockedTags.forEach(function (tag) { root.querySelectorAll(tag).forEach(function (node) { node.remove(); }); }); root.querySelectorAll('*').forEach(function (node) { Array.from(node.attributes).forEach(function (attr) { const name = attr.name.toLowerCase(); const value = String(attr.value || '').trim().toLowerCase(); if (name.startsWith('on')) { node.removeAttribute(attr.name); return; } if ( (name === 'href' || name === 'xlink:href') && ( value.startsWith('javascript:') || value.startsWith('http://') || value.startsWith('https://') || value.startsWith('//') ) ) { node.removeAttribute(attr.name); } }); }); } function updateMeta(root, source) { let width = root.getAttribute('width') || ''; let height = root.getAttribute('height') || ''; const viewBox = root.getAttribute('viewBox') || ''; if ((!width || !height) && viewBox) { const values = viewBox.trim().split(/\s+/); if (values.length === 4) { if (!width) width = values[2]; if (!height) height = values[3]; } } dimensions.textContent = 'Размер: ' + (width && height ? width + ' × ' + height : 'не указан'); const bytes = new Blob([source]).size; fileSize.textContent = 'Файл: ' + formatBytes(bytes); } function clearPreview() { frame.srcdoc = ''; frame.style.display = 'none'; empty.style.display = 'block'; status.className = 'svg-status'; status.innerHTML = ' Нет файла'; dimensions.textContent = 'Размер: —'; fileSize.textContent = 'Файл: —'; chars.textContent = code.value.length + ' символов'; hideError(); } function setStatusOk() { status.className = 'svg-status ok'; status.innerHTML = ' SVG корректный'; } function setStatusError() { status.className = 'svg-status error'; status.innerHTML = ' Ошибка кода'; } function showError(message) { errorBox.textContent = message; errorBox.style.display = 'block'; } function hideError() { errorBox.textContent = ''; errorBox.style.display = 'none'; } function formatBytes(bytes) { if (bytes >= 1024 * 1024) { return (bytes / 1024 / 1024).toFixed(2) + ' МБ'; } if (bytes >= 1024) { return (bytes / 1024).toFixed(2) + ' КБ'; } return bytes + ' Б'; } function prettyXml(xml) { xml = xml.replace(/>\s*<'); const nodes = xml.replace(//.test(trimmed)) { pad = Math.max(0, pad - 1); } out += ' '.repeat(pad) + trimmed + '\n'; if ( /^<[^!?/][^>]*[^/]?>$/.test(trimmed) && !/^<(path|circle|rect|line|polyline|polygon|ellipse|use|image|stop|br)\b/i.test(trimmed) && !trimmed.includes('