Comment télécharger un SVG depuis une URL

Une URL n'est pas un fichier. Parfois elle vise directement un vecteur, parfois une page qui en dessine un, et les deux demandent un traitement complètement différent — d'où les outils « collez une URL » qui marchent une fois sur deux.

Installer l'extension Aller aux étapes ↓

À regarder — 22 secondes

De la barre d'adresse au fichier enregistré

tutoriel · depuis une url

La barre d'adresse indique vectorly.io/icons — aucune extension de fichier nulle part. Le vecteur sort quand même.

Regardez ce que dit la barre d'adresse dans l'enregistrement. Il n'y a pas de .svg dedans, et il n'en faut pas : l'analyse lit ce que la page a affiché, pas ce que l'URL promet.

Ce que montre l'enregistrement

Ouvrez l'URL qui contient le vecteur
Cliquez sur le bouton de la barre d'outils — il lit la page en direct
La barre d'adresse ne contient aucun .svg. Elle n'en a pas besoin.
Feuilletez jusqu'au vecteur que vous êtes venu chercher
Nommez le fichier avant de l'enregistrer
Télécharger le courant — le vrai balisage, depuis cette URL
Enregistré en star.svg. Net à toute taille.

La distinction qui compte

Deux choses complètement différentes s'appellent « une URL de SVG »

Avant tout, déterminez laquelle vous avez réellement — la bonne méthode diffère, et c'est là que la plupart des gens bloquent.

Une URL directe vers un fichier vectoriel, se terminant par .svg, souvent sur un CDN. Ouvrez-la dans un onglet et vous voyez le graphique sur un fond blanc, sans rien d'autre. Celle-là, votre navigateur peut l'enregistrer tout seul — Ctrl/Cmd+S marche très bien, même s'il l'enregistre parfois sous un nom peu utile.
Une URL vers une page qui dessine des vecteurs. Presque toutes les vraies URL sont de ce type. L'adresse se termine par /icons, par /tarifs ou par rien du tout, et les graphiques voulus sont du balisage en ligne dans le HTML que la page renvoie. Il n'y a de fichier à aucune adresse : il n'y a donc rien à enregistrer directement.

Les sites convertisseurs « collez une URL » ne gèrent jamais que le premier cas, d'où leurs erreurs fréquentes ou le HTML de la page renommé en .svg. Ils récupèrent l'adresse ; ils ne l'affichent pas.

Enregistrer depuis l'URL d'une page

C'est le second cas — le courant. L'astuce est d'arrêter de traiter l'URL comme un fichier et de laisser la page s'afficher d'abord.

Ouvrez l'URL dans un onglet. Laissez la page finir de charger. Cela compte plus qu'il n'y paraît : les icônes injectées par JavaScript après le chargement sont quand même trouvées, car l'analyse lit le DOM tel qu'il est au moment du clic, pas le HTML envoyé initialement par le serveur.
Cliquez sur le bouton de la barre d'outils. Le popup s'ouvre sur l'onglet où vous êtes. Rien à coller, rien à configurer.
Lisez le compteur. Il indique combien de vecteurs cette URL affiche réellement. Ce nombre est en général plus élevé qu'on ne l'imagine, car il inclut le logo, l'habillage d'interface et les icônes du pied de page.
Feuilletez jusqu'à celui que vous cherchez. Utilisez Préc. et Suiv.. L'aperçu montre chacun isolé, ce qui est la façon la plus rapide de distinguer deux icônes semblables.
Nommez-le et téléchargez. Tapez un nom de fichier et appuyez sur Télécharger le courant. Vous obtenez le balisage d'origine de cette URL, avec l'espace de noms xmlns réparé pour que le fichier s'ouvre partout.

Si votre URL se termine vraiment par .svg

Alors vous avez le cas facile, et plusieurs options. L'ouvrir et appuyer sur Ctrl/Cmd+S l'enregistrera. L'extension aussi, avec en plus la possibilité de nommer correctement le fichier et de réparer l'espace de noms si la source est mal formée — utile pour tout ce que vous allez committer.

Une réserve sur les URL directes : beaucoup de liens CDN servent le fichier avec un Content-Type text/plain, auquel cas votre navigateur vous montre le balisage comme du texte au lieu de l'afficher. Le fichier va bien ; c'est l'en-tête qui est faux. L'enregistrer vous donne quand même un SVG fonctionnel.

Les URL que l'extension ne peut pas atteindre

Elle tourne sur les pages que vous pouvez ouvrir : ce que vous ne pouvez pas ouvrir, elle ne peut pas le lire non plus. En pratique cela veut dire chrome:// et les autres pages internes du navigateur, le Chrome Web Store et les galeries de modules (les navigateurs y bloquent les extensions exprès), les pages locales file:// sauf si vous accordez l'accès aux fichiers, et tout ce qui est derrière une connexion que vous n'avez pas. Si vous êtes connecté en revanche, elle fonctionne normalement — ce qu'aucun outil en ligne ne peut faire avec une URL collée.

Entrée: N'importe quelle URL de page que vous pouvez ouvrir — aucune extension .svg requise.
Gère: Les icônes rendues par JavaScript, les pages nécessitant une connexion, et le balisage en ligne sans aucune adresse derrière.
Résultat: Le vecteur d'origine, espace de noms réparé, nommé comme vous voulez.
À voir aussi: Depuis un lien · Pourquoi les extracteurs en ligne ratent ça

Bon à savoir

Questions fréquentes

Puis-je simplement coller une URL dans un téléchargeur de SVG en ligne ?

Seulement si l'URL vise directement un fichier .svg. Un outil en ligne récupère l'adresse mais n'affiche jamais la page : tout vecteur dessiné en balisage en ligne — c'est-à-dire la plupart — lui est invisible. Une extension tourne dans la page une fois affichée, c'est pourquoi elle les voit.

L'URL ne contient pas .svg. Est-ce un problème ?

Non. L'analyse lit ce que la page a affiché, pas ce que l'adresse promettait. Une URL finissant par /icons ou /tarifs marche exactement comme une finissant par .svg.

Pourquoi l'ouverture de l'URL .svg me montre-t-elle du code au lieu d'une image ?

Le serveur l'envoie avec un type de contenu text/plain au lieu d'image/svg+xml : le navigateur l'affiche donc au lieu de le rendre. Le fichier lui-même va bien — l'enregistrer vous donne un SVG fonctionnel.

Marche-t-il sur une page où j'ai dû me connecter ?

Oui. Il tourne dans votre navigateur sur la page que vous regardez déjà : votre session s'applique normalement. C'est la principale chose qu'un service « collez une URL » ne peut pas faire.

Et une URL qui redirige ?

Suivez-la d'abord dans l'onglet. La page où vous atterrissez est celle qui est analysée, ce qui est presque toujours celle que vous vouliez.

Pointez-le sur une URL et prenez le vecteur

Rien à coller, rien à envoyer, et ça marche sur les pages qui exigent d'être connecté.

Installer l'extension Les 15 tutoriels →