1. Accueil
  2. Docs
  3. Utilisation

Docs — utilisation

Piloter le popup

Chaque tâche a la même forme : ouvrez le popup, regardez ce qu'il a trouvé, enregistrez ce que vous voulez. Un SVG ou la page entière — les commandes ne changent pas.

Pas à pas

De la page au fichier

  1. Ouvrez le popup. Allez sur la page qui contient le SVG et cliquez sur le bouton SVG Downloader. C'est seulement là qu'il lit l'onglet : il analyse le DOM courant à l'ouverture, laissez donc la page finir de charger d'abord.
  2. Lisez le compte. Le popup indique combien de SVG il a trouvés. Ce nombre couvre les quatre sources : <svg> en ligne, vecteurs en <img> et <object> y compris les URI data:, SVG en background-image CSS et références <use> vers un sprite du même document.
  3. Feuilletez les aperçus. Chaque SVG est rendu isolément, sorti de la page chargée pour que vous puissiez vraiment le voir. Utilisez Précédent et Suivant pour les parcourir et tomber sur celui que vous voulez.
  4. Choisissez un nom de fichier (facultatif). Tapez un nom pour le SVG courant et il sera enregistré exactement ainsi. Laissez vide et il retombe sur un svg-1.svg numéroté, avec le préfixe défini dans les options de l'extension.
  5. Téléchargez le SVG courant. Cliquez sur Télécharger le SVG courant pour n'enregistrer que celui à l'écran. Le fichier est le balisage d'origine avec un xmlns réparé : il s'ouvre dans Figma, Illustrator, VS Code et tous les navigateurs.
  6. Ou téléchargez tout en ZIP. Cliquez sur Tout télécharger en ZIP pour réunir d'un coup tous les SVG détectés, numérotés à partir de svg-1.svg dans l'ordre de la page. L'archive est dédoublonnée, et ce qui n'a pas pu être récupéré est nommé dans la ligne d'état du popup — Téléchargés 8 SVG sur 10. Ignorés : 3, 7. — plutôt que discrètement abandonné.

Ce que le popup garantit

  • Le vecteur d'origine, pas une capture. Chaque téléchargement est le SVG qui était dans la page — ses tracés, son viewBox, sa précision — il reste donc net à toute taille et reste du texte modifiable.
  • Un espace de noms réparé. Le SVG en ligne omet souvent xmlns parce que le navigateur le fournit. Enregistré dans un fichier nu, il ne s'ouvrirait pas ; SVG Downloader le remet automatiquement.
  • Rien ne quitte votre machine. Détection, aperçu et téléchargement tournent sur l'appareil. Pas d'envoi, pas de compte, aucun appel d'analytique — voyez la politique de confidentialité.
  • Les manques sont affichés, pas avalés. La ligne d'état nomme tout ce qui a été ignoré : le compte que vous lisez est donc exploitable.

Ce qu'il n'attrape pas

Trois limites méritent d'être connues, et le popup vous prévient quand elles mordent. Un <use> qui pointe vers un fichier de sprite externe<use href="/sprite.svg#cart"> — n'est pas résolu, et ce <svg> est ignoré ; seules les références du même document sont suivies, sur un niveau. Au-delà de 10 000 éléments, l'analyse des background-image CSS est sautée pour la vitesse : vous ne verrez que les trois autres sources. Et la collecte plafonne à 2 000 SVG en ligne, en laissant de côté tout SVG dont le balisage dépasse environ 2 Mo.

Recolorer après l'enregistrement

Beaucoup d'icônes héritent leur couleur du CSS via currentColor : un fichier enregistré peut donc paraître noir tout seul. Si vous voulez figer une couleur précise, utilisez le passage facultatif vers le SVG Color Changer — le seul lien sortant de l'extension, et uniquement si vous cliquez. Recolorez là-bas, puis enregistrez le résultat.

Où aller ensuite

Pour une tâche précise, les guides sont plus directs : télécharger un SVG depuis n'importe quel site, tout récupérer en ZIP, ou en extraire un d'un fond CSS. Un accroc ? La FAQ couvre l'icône noire, le fichier qui ne s'ouvre pas et le reste.


Ouvrez le popup, enregistrez le SVG

Gratuit, sous licence MIT, sur l'appareil. Chrome 88+, Edge et Brave.