SVG Spark propose dix outils client‑side de conversion et d’analyse

Présentation

SVG Spark regroupe dix utilitaires exécutés entièrement dans le navigateur. Chaque outil fonctionne sur une page unique, sans serveur ni suivi, ce qui garantit que les fichiers restent sur l’appareil de l’utilisateur. La suite couvre la conversion d’images vectorielles (SVG → PNG/WebP), la visualisation de regex, le redimensionnement d’images sociales, la fusion ou la division de PDF, la transformation JSON → CSV/Excel, le nettoyage de sous‑titres SRT, la génération d’UTM, le formatage SQL, le contrôle de contraste WCAG et la prévisualisation Markdown. Tous les traitements sont réalisés localement grâce à du JavaScript pur.

Architecture client‑side

Le projet s’appuie sur HTML5, Tailwind CSS pour le style et du JavaScript exécuté dans le contexte du navigateur. Les API natives – FileReader pour lire les fichiers, Blob et URL.createObjectURL pour générer des téléchargements temporaires, et Canvas pour rasteriser les SVG – constituent le socle technique. Par exemple, la conversion SVG → PNG/WebP charge le texte SVG dans un Blob, le transforme en ImageBitmap, le dessine sur un canvas puis exporte le résultat via canvas.toBlob(). Le même principe alimente le redimensionneur d’images sociales, qui superpose des guides de zone sûre avant d’exporter le raster. Les outils de texte (JSON → CSV, SRT cleaner, Markdown previewer) exploitent les capacités de manipulation de chaînes du moteur JavaScript, tandis que le formatteur SQL utilise un parseur léger intégré. Aucun appel réseau n’est effectué ; les scripts sont chargés une fois depuis le serveur de déploiement (Vercel) puis restent en mémoire.

async function svgToPng(svgText, mime="image/png") {
  const blob = new Blob([svgText], {type:"image/svg+xml"});
  const img = await createImageBitmap(blob);
  const canvas = document.createElement("canvas");
  canvas.width = img.width; canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  return new Promise(resolve => canvas.toBlob(resolve, mime));
}

Analyse des implications de confidentialité

Le caractère purement local élimine le risque de fuite de données vers un serveur distant, ce qui est crucial pour les fichiers sensibles (PDF confidentiels, listes d’UTM, sous‑titres non publiés). La sandbox du navigateur isole chaque script, limitant l’accès aux ressources système aux seules API autorisées. Cependant, la lecture de fichiers via FileReader expose le code à des contenus potentiellement malveillants : un PDF corrompu ou un SVG contenant du JavaScript peut déclencher des comportements inattendus dans le moteur de rendu. Le projet ne propose pas de validation de contenu, ce qui laisse la responsabilité à l’utilisateur.

Limites et perspectives

Les performances dépendent fortement du moteur JavaScript et du GPU du client. La rasterisation d’images volumineuses ou la fusion de PDF multi‑pages peut saturer la mémoire disponible, entraînant des blocages ou des échecs de conversion. La compatibilité est limitée aux navigateurs supportant les API utilisées (Chrome, Edge, Firefox récents) ; les versions mobiles plus anciennes peuvent ne pas offrir createImageBitmap ou canvas.toBlob. L’ajout de traitements plus lourds (ex. OCR, rendu 3D) nécessiterait soit des Web Workers pour éviter le blocage du fil principal, soit un recours à des services cloud, ce qui irait à l’encontre du principe de confidentialité actuel. En l’état, SVG Spark constitue une boîte à outils robuste pour les développeurs et créateurs qui privilégient la confidentialité et la rapidité d’exécution côté client.