Comment copier un SVG depuis un site

Parfois vous ne voulez pas de fichier du tout — vous voulez le balisage dans votre éditeur, ou l'image dans un message Slack. Les deux tiennent en un clic, et ce ne sont pas les mêmes.

Installer l'extension Aller aux étapes ↓

À regarder — 19 secondes

Les deux presse-papiers, en une prise

tutoriel · presse-papiers

Copier le code vous donne du balisage. Copier l'image vous donne un PNG. La ligne d'état confirme chacun.

Regardez la ligne d'état changer entre les deux appuis — le popup vous dit exactement lequel des deux presse-papiers vous venez de remplir.

Ce que montre l'enregistrement

Ouvrez le popup sur la page que vous lisez
Arrivez sur l'icône voulue
Copier le code — le balisage, droit dans votre presse-papiers
Collez-le dans un composant et ça marche
Ou Copier l'image — un PNG, pour documents et chats
Deux presse-papiers, une icône. Aucun fichier sur disque dans les deux cas.

Choisissez le bon

Copier le code et Copier l'image ne sont pas des alternatives — ce sont deux choses différentes

Ils sont côte à côte dans le popup, et il vaut mieux savoir clairement ce que chacun met dans votre presse-papiers, car coller le mauvais coûte cinq minutes de confusion.

Copier le code met le balisage dans votre presse-papiers sous forme de texte : <svg viewBox="0 0 24 24">…</svg>, nettoyé, avec l'espace de noms xmlns déjà ajouté. Collez-le dans un composant React, un template Vue, un fichier HTML ou un éditeur de texte. Collez-le dans Slack et vous obtiendrez un mur de chevrons, parce que c'est du texte.
Copier l'image rastérise le vecteur en PNG et le met dans votre presse-papiers comme une image. Collez-le dans Google Docs, Notion, Figma, Slack, un e-mail — partout où une image collée est acceptée. Le rendu se fait à 2× minimum pour ne pas arriver en vignette floue.

Règle simple : si la destination est du code, utilisez Copier le code. Si c'est un document, utilisez Copier l'image.

Copier une icône

Les deux voies partagent les deux premières étapes.

Ouvrez le popup et trouvez l'icône. Cliquez sur le bouton de la barre d'outils et feuilletez avec Préc. et Suiv. jusqu'à ce que l'aperçu montre celle que vous voulez.
Pour du code, appuyez sur Copier le code. La ligne d'état affiche Code SVG copié dans le presse-papiers. Vous avez maintenant un balisage nettoyé, espace de noms inclus, prêt à coller dans un composant.
Pour une image, appuyez sur Copier l'image. La ligne d'état affiche Image PNG copiée dans le presse-papiers. Le vecteur est rendu sur votre machine à 2× ou mieux et mis dans le presse-papiers comme image.
Collez-le à destination. Le balisage dans votre éditeur ; le PNG dans votre document, votre présentation ou votre chat. Rien n'a été écrit sur disque dans les deux cas.

Ce qui a déjà été fait au balisage copié

C'est ce qui le rend meilleur qu'une copie depuis DevTools. Avant d'atteindre votre presse-papiers, le balisage passe par le même nettoyeur que chaque téléchargement : l'espace de noms xmlns est ajouté s'il manquait, pour que le fragment tienne debout comme document valide ; et les éléments script, les attributs gestionnaires d'événements et les références externes sont retirés, pour ne pas coller le comportement de la page de quelqu'un d'autre dans votre code. Ce que vous collez, ce sont les formes, et seulement les formes.

Coller dans un composant

Deux petites choses vous mordront en JSX. Des attributs comme stroke-width et fill-rule doivent devenir strokeWidth et fillRule ; la plupart des éditeurs et codemods le font pour vous. Et si l'icône utilise currentColor — la plupart le font — elle prendra la couleur du texte en vigueur, ce qui est en général exactement ce que vous voulez. Si elle s'affiche en noir alors que vous attendiez une couleur, voilà pourquoi : la couleur vivait dans le CSS de la page, pas dans la forme.

Pourquoi le presse-papiers n'exige aucune permission supplémentaire

Les deux boutons écrivent dans le presse-papiers depuis un clic que vous avez fait, dans une page d'extension au premier plan. C'est précisément la condition dans laquelle les navigateurs autorisent l'écriture, l'extension ne demande donc aucune permission de presse-papiers — elle profite du geste que vous lui avez déjà donné.

Copier le code: Un balisage nettoyé, xmlns inclus — pour les éditeurs et les composants.
Copier l'image: Un PNG à 2× ou mieux — pour documents, présentations, chats et e-mails.
Nettoyage: Scripts, gestionnaires et références externes sont retirés avant l'une comme l'autre copie.
Permissions: Aucune permission de presse-papiers demandée — elle profite du clic que vous avez fait.

Bon à savoir

Questions fréquentes

Quelle différence entre Copier le code et Copier l'image ?

Copier le code met le balisage SVG dans votre presse-papiers sous forme de texte, à coller dans un éditeur ou un composant. Copier l'image le rastérise en PNG et le met dans le presse-papiers comme image, à coller dans documents, présentations et chats.

J'ai collé dans Slack et j'ai eu un mur de code.

Vous avez utilisé Copier le code, qui est du texte. Prenez plutôt Copier l'image — cela met un PNG dans le presse-papiers, que Slack colle comme une image.

Le balisage copié est-il sûr à coller dans mon code ?

Il est d'abord nettoyé : les éléments script, les attributs gestionnaires d'événements et les références externes sont retirés, et l'espace de noms xmlns est ajouté. Vous collez des formes, pas le comportement de la page de quelqu'un d'autre.

Pourquoi l'icône collée est-elle noire dans mon app ?

Parce qu'elle utilise currentColor : elle hérite de la couleur du CSS au lieu de porter la sienne. Posez une couleur sur l'élément ou son parent et l'icône suivra.

Dois-je accorder une permission de presse-papiers ?

Non. Les deux boutons écrivent depuis un clic utilisateur dans une page d'extension au premier plan, ce que les navigateurs autorisent sans permission supplémentaire ; aucune n'est donc demandée.

Deux presse-papiers, aucun fichier

Le balisage pour l'éditeur, un PNG pour le document. Choisissez un bouton.

Installer l'extension Les 15 tutoriels →