Comment télécharger les SVG d'une page web

À regarder — 17 secondes

Compter, vérifier, puis prendre

tutoriel · inventaire

Le compteur qui grimpe depuis zéro, c'est la page qui vous dit de quoi elle est vraiment faite — et c'est rarement le nombre qu'on devine.

Ce que montre l'enregistrement

1. Combien de vecteurs cette page contient-elle vraiment ?
2. Le compteur répond — 24 trouvés
3. Feuilletez pour voir ce que vous récupérez
4. Puis prenez le lot en un clic
5. Ce qui n'a pas pu être résolu est nommé, pas abandonné en silence

Pourquoi le nombre surprend

Une page affiche bien plus de vecteurs qu'il n'y paraît

Quand vous regardez une page, vous voyez le contenu. L'analyse voit tout ce que le navigateur a dessiné, et une page moderne dessine des vecteurs en permanence à des endroits qu'on ne compterait jamais.

• Le logo, presque toujours en <svg> en ligne aujourd'hui plutôt qu'en fichier image.
• L'habillage d'interface — la loupe de recherche, les barres de menu, les croix de fermeture, chaque chevron de chaque menu déroulant.
• Les marques sociales et de paiement en pied de page, souvent une douzaine.
• Les formes décoratives — séparateurs de section, fonds en taches, fragments d'illustration, dessinés en vecteurs de fond CSS.
• Les icônes de composants actuellement invisibles, comme un menu fermé déjà présent dans le DOM.

Voilà pourquoi compter avant de prendre vaut trente secondes : une page qui semble avoir six icônes en annonce souvent vingt-quatre, et savoir qui est qui avant de construire un ZIP vous évite de trier après coup.

Faire l'inventaire

L'ordre compte ici — le but est de savoir ce que vous avez avant de vous engager.

1. Mettez la page dans l'état que vous voulez capturer. Faites défiler les sections en chargement paresseux ; ouvrez le menu si les icônes voulues vivent dedans. L'analyse lit le DOM tel qu'il est : ce qui n'est pas encore affiché n'est pas encore là.
2. Ouvrez le popup et lisez le compteur. Il indique le nombre de vecteurs distincts trouvés, doublons déjà réduits. C'est votre inventaire.
3. Feuilletez les aperçus. Préc. et Suiv., avec la pagination qui montre votre position dans le jeu. C'est là que vous découvrez que huit des vingt-quatre sont des marques de paiement du pied de page.
4. Prenez ce que vous voulez. Soit vous nommez et téléchargez des vecteurs un à un au fil de la découverte, soit vous appuyez sur Tout télécharger en ZIP pour le lot. La ligne d'état indique ce qui a été enregistré et nomme ce qui n'a pas pu être résolu.

Relancez l'analyse après avoir modifié la page

L'analyse est un instantané, pas un flux en direct. Si vous ouvrez une fenêtre modale, changez d'onglet, dépliez un accordéon ou faites défiler une grille paresseuse après l'analyse, ces nouveaux vecteurs ne sont pas encore dans la liste. Le bouton de relance dans l'en-tête du popup relit la page telle qu'elle est maintenant. C'est de loin la raison la plus fréquente pour laquelle quelqu'un signale une icône « manquante » — elle n'était réellement pas dans le DOM au moment de l'analyse.

Ce que le compteur n'inclut pas

Les vecteurs dans des <iframe> cross-origin ne sont pas comptés, car la politique de même origine fait que la page elle-même ne peut pas les lire non plus — une carte intégrée ou un widget de paiement est un autre document sous d'autres règles. Ce qui est rendu dans un <canvas> n'est pas compté non plus : ce sont déjà des pixels, il n'y a plus de vecteur à extraire.

Le compteur

Vecteurs distincts après dédoublonnage — pas un décompte brut d'éléments.

Instantané

Lit le DOM tel qu'il est. Relancez l'analyse après avoir modifié la page.

Non comptés

Les iframes cross-origin et tout ce qui est déjà rastérisé dans un <canvas>.

À voir aussi

Prendre tout le jeu · La fonction ZIP

Bon à savoir

Questions fréquentes