Enregistrez le vrai SVG.

Pas une capture de celui-ci.

01 — Le problème

Le navigateur ne vous le donnera pas comme ça

Un SVG, c'est du texte — quelques centaines d'octets de coordonnées. La seule chose que vous voulez est celle que la page rend la plus difficile à obtenir.

Un <svg> en ligne n'a pas de menu contextuel à lui. Un jeu d'icônes derrière un background-image CSS ne se glisse pas. Une planche de sprites cache quarante glyphes dans un fichier. Alors on capture l'icône et on la retrace, ou on fouille DevTools pour le nœud — et on finit avec un raster d'un vecteur, flou dès qu'on le redimensionne.

02 — Comment ça marche

Quatre gestes, un popup

Tout se passe dans un panneau de 360 px qui descend de la barre d'outils. Ce sont les quatre temps de la démo ci-dessus, un par un — chaque enregistrement montre la vraie extension sur la même page en direct.

1. 01

   Ouvrez-le, et il compte ce qu'il trouve

   Cliquez sur l'icône sur n'importe quelle page et le panneau analyse le DOM en s'ouvrant — <svg> en ligne, vecteurs <img>, background-image CSS et références <use> de sprite compris. Le compteur monte jusqu'à ce qu'il trouve : 0 → 24 SVG trouvés.

   01 · détection

2. 02

   Prévisualisez chacun, et feuilletez

   Chaque vecteur détecté reçoit un aperçu propre et isolé — seul, hors de la page chargée — pour voir exactement ce que vous allez enregistrer. Précédent et Suivant parcourent tout le jeu : loupe, cœur, étoile, et les vingt et un derrière.

   02 · aperçu

3. 03

   Téléchargez l'original, en un clic

   Nommez-le si vous voulez, appuyez sur Télécharger le SVG courant, et le vrai fichier atterrit dans vos téléchargements — le balisage réel prélevé sur la page, avec un xmlns manquant réparé pour qu'il s'ouvre partout. Une coche Enregistré star.svg le confirme.

   03 · téléchargement

4. 04

   Ou prenez la page entière en ZIP

   Tout télécharger en ZIP réunit les SVG trouvés — les vingt-quatre ici — dans une archive, dédoublonnés et numérotés à partir de svg-1.svg avec un préfixe modifiable. Ce qui n'a pas pu être récupéré est nommé dans la ligne d'état plutôt que silencieusement ignoré. Tout un jeu d'icônes, en un clic.

   04 · empaquetage

terminé Les vecteurs étaient toujours dans la page. Ils sont maintenant dans vos téléchargements.

03 — Les détails

Ce qu'il attrape, et ce qu'il garde

Quatre affirmations sur son comportement — le genre de chose qu'on ne remarque que lorsqu'un outil plus simple se trompe.

Toutes les sources

En ligne, image, fond, sprite

Quatre façons pour une page de porter un vecteur, et il lit les quatre — URI de données, <object>, fonds CSS et références <use> de sprite que la plupart des extracteurs manquent entièrement.

Fidélité

Le balisage d'origine, pas un rendu recalculé

Ce qui s'enregistre est le SVG qui était dans la page — ses tracés, son viewBox, sa précision. Net à toute taille, et toujours du texte modifiable que vous pouvez recolorer.

À l'échelle

Un seul, ou tous d'un coup

Nommez et enregistrez une icône isolée, ou prenez la page entière en ZIP dédoublonné. Récupérer un jeu de quarante icônes coûte le même clic qu'en récupérer une.

Sur l'appareil

Pas de serveur, pas de compte, pas d'envoi

Tout tourne dans votre navigateur, sur la page devant vous. Rien n'est envoyé nulle part — il n'y a nulle part où l'envoyer. Besoin de recolorer d'abord ? Un lien passe la main au SVG Color Changer.

04 — Comment cette page est faite

Chaque image ici est du Remotion

Rien sur cette page n'est une capture d'écran vidéo. La vidéo d'accueil, les quatre clips, chaque affiche et chaque capture pour le store sont rendus depuis un seul projet React.

Un petit kit dans motion/src/kit reconstruit le popup, l'habillage du navigateur et un curseur au geste humain sous forme de composants, tous puisant dans un même thème — la palette monochrome que livre la vraie extension. Une composition promo de 24 secondes chorégraphie tout le déroulé ; les clips ci-dessus sont des plages d'images découpées directement dedans, et les images fixes sont des images uniques de compositions dédiées. Changez un mot et tous les assets se re-rendent ensemble, d'une seule commande.

05 — Confidentialité

Il n'y a pas de serveur

Pas de backend, pas d'analytique, pas de compte, pas d'envoi. L'extension lit la page où vous êtes, uniquement quand vous l'ouvrez, et écrit des fichiers sur votre propre machine.

Un SVG n'a jamais besoin de quitter votre navigateur pour être enregistré — il y est déjà, et vous aussi. Voilà tout le modèle de confiance : il n'y a rien au milieu, parce qu'il n'y a pas de milieu. Le seul lien sortant est facultatif et c'est vous qui cliquez : un passage vers le SVG Color Changer quand vous voulez restyler avant d'enregistrer.