Back to services

Online SVG Editor

Edit SVG code in your browser with live preview and direct download.

The file is processed locally in your browser • no server upload • download the finished SVG.

Preview

No file
Upload an SVG After upload, the image will appear here and update as you edit the code.
Size: — File: —

SVG code

Live update
0 characters Changes are applied automatically

About this tool — Online SVG Editor

Edit SVG code in your browser with live preview and direct download.

Upload an SVG file or paste XML code, change colors, dimensions, text, lines and other properties, preview the result instantly and save the finished SVG. The tool works directly from the DEVNEW.ORG web page and requires no separate software installation. It is useful for website owners, developers, SEO specialists, designers and anyone who needs a fast online utility. Use it free for work or personal tasks.

See also

JPG / PNG to SVG Converter

Convert raster JPG and PNG images to SVG for logos, icons and simple graphics.

Open tool

Image Compressor for JPG, PNG & WebP

Reduce JPG, PNG and WebP file size with quality control and batch processing.

Open tool

QR Code Generator

Create QR codes for links, text, phone numbers and other data, with PNG or SVG download.

Open tool
'; 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: 'The SVG code contains a syntax error.' }; } const root = doc.documentElement; if (!root || root.nodeName.toLowerCase() !== 'svg') { return { ok: false, error: 'The code must contain a root element.' }; } sanitizeSvg(root); return { ok: true, root: root, svg: new XMLSerializer().serializeToString(root) }; } catch (e) { return { ok: false, error: 'Could not parse the SVG code.' }; } } 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 = 'Size: ' + (width && height ? width + ' × ' + height : 'not specified'); 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 = ' No file'; dimensions.textContent = 'Size: —'; fileSize.textContent = 'File: —'; chars.textContent = code.value.length + ' characters'; hideError(); } function setStatusOk() { status.className = 'svg-status ok'; status.innerHTML = ' SVG is valid'; } 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) + ' MB'; } if (bytes >= 1024) { return (bytes / 1024).toFixed(2) + ' KB'; } 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('