1. Accueil
  2. Tutoriels
  3. En prendre un vite

Tutoriel — la voie la plus rapide

Comment attraper un SVG en un clic droit

Quand vous voulez une icône précise et tout de suite, ouvrir un popup et feuilleter jusqu'à elle fait trois étapes de trop. Il existe une voie en une étape.

À regarder — 15 secondes

Une entrée de menu, un fichier

tutoriel · clic droit
Le menu est celui de Chrome. La dernière entrée est celle de l'extension. Voilà toute l'interaction.

Regardez le menu dans l'enregistrement : il n'y a pas d'Enregistrer l'image sous…, parce qu'un <svg> en ligne n'est pas une image. La ligne de l'extension est la seule chose là qui puisse enregistrer le vecteur.

Ce que montre l'enregistrement

  1. Vous voulez une icône, et tout de suite
  2. Clic droit dessus et prenez Enregistrer ceci en SVG
  3. Pas de popup, pas d'analyse — une entrée de menu, un fichier
  4. Le même nettoyeur tourne, donc le fichier s'ouvre toujours partout

Quand utiliser quoi

Clic droit pour une, le popup pour décider

Les deux voies aboutissent au même fichier, produit par le même code. Elles diffèrent par ce qu'il faut savoir d'avance.

  • Le clic droit quand vous savez déjà exactement quel graphique vous voulez et que vous le regardez. Vous le pointez ; pas de liste, pas de feuilletage, pas d'ambiguïté. C'est la voie la plus rapide possible vers un fichier isolé.
  • Le popup quand vous ne savez pas encore — quand vous voulez voir l'aperçu isolé, comparer deux icônes semblables, choisir un nom de fichier, convertir en PNG, copier le balisage, ou prendre toute la page d'un coup. C'est la voie avec des options.

À noter : le clic droit n'exige aucune analyse. Rien ne parcourt la page, rien n'est compté, et il n'y a pas de liste à construire — on remet à l'extension l'élément que vous avez cliqué et elle travaille sur cette seule chose.

En attraper une

Il y a deux étapes et l'une d'elles est « clic droit ».

  1. Clic droit sur le graphique. Visez l'icône, le logo ou l'illustration voulue et faites un clic droit. Cela marche sur les vecteurs en ligne, sur les images, et sur les graphiques peints en fonds CSS.
  2. Choisissez « Enregistrer ceci en SVG ». L'entrée de l'extension est dans son propre groupe, sous les entrées de Chrome. La choisir trouve le graphique sous votre curseur, le résout, le nettoie et l'enregistre — aucun popup ne s'ouvre à aucun moment.

C'est le même fichier, pas une version au rabais

Le gros du travail se passe au même endroit dans les deux cas. Le service worker derrière l'entrée de menu n'a pas de DOM propre : il demande donc au script de contenu de la page un fichier fini et nettoyé, et le confie à la machinerie de téléchargement du navigateur. C'est exactement le chemin d'un téléchargement depuis le popup — même réparation d'espace de noms, même retrait des scripts et gestionnaires d'événements. Vous n'échangez pas de la qualité contre de la vitesse.

Où l'entrée de menu n'apparaîtra pas

Elle est enregistrée pour les pages web ordinaires seulement — http et https. Vous ne la verrez pas sur les pages chrome://, sur le Chrome Web Store ou d'autres galeries d'extensions, ni sur les PDF et autres documents non HTML. Les navigateurs bloquent délibérément les extensions sur leurs propres pages de galerie, et aucune extension ne contourne cela.

Si l'icône vient d'un sprite

Les références <use> de sprite pointant dans le même document se résolvent immédiatement. Une qui vise un fichier de sprite séparé que la page n'a pas chargé doit d'abord être récupérée : cela peut prendre un instant de plus — ou échouer si ce fichier est inaccessible. Dans ce cas, ouvrez le popup et prenez-la depuis l'analyse, qui a plus de marge pour la résoudre.

Étapes
Deux. Clic droit, puis choisir l'entrée. Pas de popup, pas d'analyse.
Qualité
Identique à un téléchargement depuis le popup — même nettoyeur, même réparation d'espace de noms.
Fonctionne sur
Vecteurs en ligne, images et graphiques de fond CSS sur toute page http(s).
Prenez le popup pour
Prévisualiser, renommer, convertir en PNG, copier, ou prendre toute la page d'un coup.

Bon à savoir

Questions fréquentes

Où est l'entrée de menu « Enregistrer ceci en SVG » ?

Dans le menu contextuel de n'importe quelle page web ordinaire, dans son propre groupe sous les entrées de Chrome. Les entrées apportées par des extensions se placent toujours sous les entrées natives.

Le fichier diffère-t-il d'un téléchargement depuis le popup ?

Non. Les deux passent par le même nettoyeur et la même réparation d'espace de noms — la voie du clic droit saute simplement l'analyse et l'aperçu.

L'entrée de menu est absente sur cette page.

Elle est enregistrée pour les pages http et https uniquement. Les pages internes du navigateur, le Chrome Web Store, les autres galeries d'extensions et les PDF sont interdits aux extensions par conception.

Puis-je faire un clic droit sur une image de fond CSS ?

Oui. L'entrée est proposée aussi bien sur les cibles image que sur les cibles de page générales : vecteurs en ligne et fonds CSS sont tous deux atteignables.

Rien ne s'est téléchargé quand j'ai cliqué dessus.

Le plus souvent, le graphique sous le curseur était une référence de sprite visant un fichier séparé que la page n'a jamais chargé : il n'y avait rien à résoudre. Ouvrez le popup et prenez-le depuis l'analyse.


Une icône, un clic droit

La voie la plus rapide qui soit — et le fichier est exactement le même.