Retour aux services

Éditeur SVG en ligne

Modifiez du code SVG dans le navigateur avec aperçu en direct et téléchargement.

Le fichier est traité localement dans le navigateur • aucun envoi au serveur • SVG final téléchargeable.

Aperçu

Aucun fichier
Importer un SVG Après l’import, l’image apparaîtra ici et se mettra à jour pendant la modification du code.
Taille: — Fichier : —

Code SVG

Живое обновление
0 caractères Les modifications sont appliquées automatiquement

À propos de cet outil — Éditeur SVG en ligne

Modifiez du code SVG dans le navigateur avec aperçu en direct et téléchargement.

Importez un fichier SVG ou collez le code XML, modifiez couleurs, dimensions, texte, lignes et autres paramètres, visualisez immédiatement le résultat puis enregistrez le SVG. L’outil fonctionne directement depuis la page web DEVNEW.ORG et ne nécessite aucun logiciel supplémentaire. Il convient aux propriétaires de sites, développeurs, spécialistes SEO, designers et à toute personne ayant besoin d’un utilitaire en ligne rapide. Utilisez-le gratuitement pour vos tâches professionnelles ou personnelles.

Voir aussi

'; 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: 'Le code SVG contient une erreur de syntaxe.' }; } const root = doc.documentElement; if (!root || root.nodeName.toLowerCase() !== 'svg') { return { ok: false, error: 'Le code doit contenir un élément racine .' }; } sanitizeSvg(root); return { ok: true, root: root, svg: new XMLSerializer().serializeToString(root) }; } catch (e) { return { ok: false, error: 'Impossible d’analyser le code 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 = 'Taille: ' + (width && height ? width + ' × ' + height : 'non indiqué'); 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 = ' Aucun fichier'; dimensions.textContent = 'Taille: —'; fileSize.textContent = 'Fichier : —'; chars.textContent = code.value.length + ' caractères'; hideError(); } function setStatusOk() { status.className = 'svg-status ok'; status.innerHTML = ' SVG valide'; } 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) + ' Mo'; } if (bytes >= 1024) { return (bytes / 1024).toFixed(2) + ' Ko'; } 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('