Comment extraire chaque SVG d'un site

À regarder — 17 secondes

Une analyse, un ZIP

tutoriel · en masse

Le feuilletage au milieu n'est pas du remplissage — c'est l'étape que la plupart sautent puis regrettent, car c'est votre seule occasion de voir ce que vous allez prendre.

Ce que montre l'enregistrement

1. Une analyse trouve chaque vecteur que la page affiche
2. Vérifiez le jeu avant de le prendre
3. Préc. et Suiv. parcourent toute la liste
4. Tout télécharger en ZIP — le jeu entier d'un coup
5. Dédoublonné, numéroté, et nommé dans la ligne d'état

Ce qu'une passe collecte réellement

Quatre sources, résolues dans un seul dossier

L'analyse ne cherche pas des fichiers .svg. Elle lit la page affichée et résout chaque vecteur atteignable en balisage autonome, d'où un compte en général plus élevé que le nombre d'icônes visibles à l'écran.

• Les éléments <svg> en ligne — l'essentiel de tout jeu d'icônes moderne, plus le logo et la majeure partie de l'habillage d'interface.
• Les vecteurs en background-image CSS, y compris les URI data: encastrés lus dans la feuille de style.
• Les références <use> de sprite du même document, résolues jusqu'au symbole visé pour que chacune devienne un vrai fichier autonome.
• Les sources <img> et <object>, récupérées et intégrées.

Les doublons sont réduits avant la construction du ZIP. Une page qui affiche le même chevron à dix-neuf endroits vous donne un chevron, pas dix-neuf — c'est la différence entre un dossier utilisable et un fouillis.

Prendre le jeu

Quatre étapes, et la troisième est celle qu'il vaut mieux ne pas sauter.

1. Ouvrez le popup sur la page. Cliquez sur le bouton de la barre d'outils. Le compteur indique combien de vecteurs distincts la page affiche.
2. Relancez l'analyse si la page a changé. Si vous avez depuis ouvert un menu, changé d'onglet ou fait défiler une grille paresseuse, appuyez sur le bouton de relance dans l'en-tête pour inclure les nouvelles icônes.
3. Feuilletez pour vérifier le jeu. Parcourez-le avec Préc. et Suiv.. Trente secondes ici vous disent si vous allez récupérer le jeu d'icônes voulu ou ce jeu plus toutes les fioritures décoratives de la page.
4. Appuyez sur Tout télécharger en ZIP. Tout le jeu est réuni, dédoublonné et numéroté. La ligne d'état indique combien ont été enregistrés — et nomme ce qui n'a pas pu être extrait de façon autonome plutôt que de l'abandonner en silence.

Lisez la ligne d'état

Quand tout se résout, vous obtenez un simple 24 SVG téléchargés en ZIP. Sinon, vous obtenez le nombre de réussites et les noms des échecs — car un outil en masse qui abandonne discrètement des fichiers est pire qu'un qui échoue bruyamment. Les raisons habituelles pour lesquelles un vecteur ne peut pas être extrait de façon autonome : une référence de sprite pointant vers un autre document que la page n'a jamais chargé, ou une source d'image sur un domaine qui refuse les lectures cross-origin.

Pages très grandes

Analyser toutes les feuilles de style d'une page comptant des milliers de règles coûte cher : l'analyse des fonds CSS est donc bornée. Si cette borne est atteinte vous verrez Cette page est trop grande pour analyser les fonds CSS — les autres SVG ont quand même été trouvés, ce qui signifie que les éléments en ligne, les sprites et les sources d'image ont bien été collectés. En pratique les vecteurs en fond CSS sont les plus rares des quatre : c'est une petite perte sur une page où l'alternative est un onglet figé.

Nommer ce qui sort

Les fichiers du ZIP sont numérotés à partir d'un préfixe modifiable dans les réglages de l'extension, tout comme le nom du ZIP lui-même. Si vous tirez régulièrement des jeux de sites différents, définir un préfixe par projet est plus rapide que renommer vingt fichiers après coup.

Une passe

En ligne, fond CSS, <use> de sprite et sources d'image — ensemble.

Dédoublonné

La même icône affichée dix-neuf fois arrive une fois.

Honnête

Tout ce qui n'a pas pu être résolu est nommé dans la ligne d'état.

À voir aussi

La fonction en masse · Inventaire de page

Bon à savoir

Questions fréquentes