Comment télécharger des fichiers SVG depuis un site

À regarder — 19 secondes

Tout le processus, en une fois

tutoriel · bases

Tout ce qui suit reprend ces cinq étapes par écrit, avec les raisons derrière. Si vous ne vouliez que l'enregistrement, vous avez déjà ce pour quoi vous êtes venu.

Ce que montre l'enregistrement

1. Un SVG est du texte vectoriel, pas une photo de vecteur
2. Étape un — ouvrez le popup sur la page
3. Étape deux — laissez-le analyser. Il lit la page, pas le réseau.
4. Étape trois — prévisualisez et choisissez
5. Étape quatre — nommez le fichier
6. Étape cinq — téléchargez. Voilà tout le travail.

D'abord, ce que personne n'explique

Un SVG n'est pas une image — ce sont des instructions pour en dessiner une

Un PNG est une grille de points colorés. Un SVG est un court document texte qui dit trace une ligne d'ici à là, puis courbe jusque-là. Cette différence est toute la raison pour laquelle cela vaut la peine : parce que le fichier décrit des formes plutôt que des pixels, il reste parfaitement net que vous l'utilisiez en favicon de 16 px ou l'imprimiez sur deux mètres, et vous pouvez l'ouvrir dans un éditeur de texte et changer sa couleur en modifiant un mot.

C'est aussi la raison pour laquelle votre navigateur est peu serviable quand il s'agit de les enregistrer. Il ne propose Enregistrer l'image sous… que pour ce qu'il classe comme image avec une adresse récupérable. La plupart des SVG d'une page moderne n'ont aucune adresse — les instructions de dessin sont écrites directement dans le HTML de la page. Il n'y a rien que le menu d'enregistrement puisse viser, l'entrée n'apparaît donc simplement pas.

Lire le DOM de la page contourne tout cela. L'extension demande à la page ce qu'elle a réellement affiché, récupère le vrai balisage et l'écrit dans un fichier.

Les cinq étapes

La première fois prend environ deux minutes parce qu'il faut installer quelque chose. Chaque fois suivante prend environ cinq secondes.

1. Installez l'extension. Ajoutez SVG Downloader à Chrome, Edge ou Brave — tout ce qui tourne sous Chrome 88 ou plus récent. C'est gratuit et sous licence MIT, et cela ne demande que activeTab, ce qui veut dire qu'elle peut voir une page quand vous cliquez sur son bouton et à aucun autre moment.
2. Ouvrez le popup sur la page. Allez sur la page contenant le vecteur voulu, puis cliquez sur le bouton de la barre d'outils. Si vous ne le voyez pas, cliquez sur l'icône en pièce de puzzle et épinglez-le — vous le voudrez là.
3. Laissez-le analyser. Il parcourt la page et collecte chaque vecteur qu'il peut résoudre : éléments en ligne, images de fond CSS, références de sprite du même document, et sources <img> ou <object> y compris les URI data:. Le compteur vous dit combien il en a trouvé.
4. Prévisualisez et choisissez. Chacun reçoit un aperçu isolé, hors de la page chargée, pour confirmer que vous avez la bonne chose. Préc. et Suiv. parcourent la liste, et la pagination montre où vous êtes.
5. Nommez-le et téléchargez. Tapez un nom de fichier si son nom vous importe — laissez vide et vous obtenez un svg-1.svg numéroté. Puis appuyez sur Télécharger le courant. Le fichier atterrit dans votre dossier de téléchargements comme n'importe quel autre.

Deux surprises, toutes deux normales

Presque tout le monde en rencontre une au premier fichier, et aucune n'est un défaut.

• L'icône est noire. La plupart des systèmes d'icônes colorent depuis le CSS via currentColor, ce qui veut dire que la couleur vit dans la feuille de style, pas dans la forme. Sortie seule, le fichier n'a pas de couleur propre et s'affiche en noir. C'est le balisage source véritable. Pour figer une couleur dans le fichier, passez par le SVG Color Changer, recolorez, puis enregistrez.
• Il s'ouvre maintenant, alors que le copier-coller n'a jamais marché. Le SVG en ligne omet en général l'espace de noms xmlns="http://www.w3.org/2000/svg", parce que l'analyseur HTML le fournit gratuitement. Copiez ce balisage à la main dans un fichier .svg nu et rien ne l'ouvrira. SVG Downloader répare l'espace de noms manquant à la sortie, d'où des fichiers qui s'ouvrent dans Figma, Illustrator, Inkscape, VS Code et tous les navigateurs.

Ouvrir le fichier une fois obtenu

Double-cliquer un SVG l'ouvre en général dans votre navigateur, qui l'affiche mais ne vous laisse pas l'éditer. Pour vraiment travailler dessus : glissez-le dans Figma et il arrive en calques vectoriels modifiables ; ouvrez-le dans Illustrator ou Inkscape pour des outils de dessin complets ; ou ouvrez-le dans un éditeur de texte pour voir — et changer — le balisage directement. S'il vous faut plutôt un PNG, le popup le convertit avant l'enregistrement.

Fonctionne sur

Chrome 88+, Edge et Brave. Toute page que vous pouvez y ouvrir.

Vous obtenez

Le balisage vectoriel d'origine, espace de noms réparé — pas une capture.

Confidentialité

100 % sur l'appareil. Pas de serveur, pas de compte, pas d'envoi, pas d'analytique.

Ensuite

Besoin de tout le jeu ? Extraire chaque SVG. Juste le code ? Copiez-le.

Bon à savoir

Questions fréquentes