Cómo copiar un SVG de una web

Míralo — 19 segundos

Los dos portapapeles, de una pasada

tutorial · portapapeles

Fíjate en cómo cambia la línea de estado entre las dos pulsaciones: el popup te dice exactamente cuál de los dos portapapeles acabas de llenar.

Qué muestra la grabación

1. Abre el popup en la página que estás leyendo
2. Llega hasta el icono que quieres
3. Copiar código: el marcado, directo a tu portapapeles
4. Pégalo en un componente y funciona sin más
5. O Copiar imagen: un PNG, para documentos y chats
6. Dos portapapeles, un icono. Sin archivos en disco en ninguno de los dos casos.

Elige el correcto

Copiar código y Copiar imagen no son alternativas: son cosas distintas

Están uno al lado del otro en el popup y conviene tener claro qué pone cada uno en tu portapapeles, porque pegar el equivocado son cinco minutos de desconcierto.

• Copiar código pone el marcado en tu portapapeles como texto: <svg viewBox="0 0 24 24">…</svg>, saneado y con el espacio de nombres xmlns ya añadido. Pégalo en un componente de React, una plantilla de Vue, un archivo HTML o un editor de texto. Pégalo en Slack y verás un muro de signos de menor y mayor, porque es texto.
• Copiar imagen rasteriza el vector a un PNG y lo pone en tu portapapeles como imagen. Pégalo en Google Docs, Notion, Figma, Slack, un correo: donde sea que acepte una imagen pegada. Se dibuja a 2× como mínimo para que no llegue como una miniatura borrosa.

Regla práctica: si el destino es código, usa Copiar código. Si el destino es un documento, usa Copiar imagen.

Copiar un icono

Ambas vías comparten los dos primeros pasos.

1. Abre el popup y encuentra el icono. Pulsa el botón de la barra de herramientas y recórrelos con Ant. y Sig. hasta que la vista previa muestre el que quieres.
2. Para código, pulsa Copiar código. La línea de estado dice Código SVG copiado al portapapeles. Ya tienes marcado saneado, con espacio de nombres incluido, listo para pegar en un componente.
3. Para una imagen, pulsa Copiar imagen. La línea de estado dice Imagen PNG copiada al portapapeles. El vector se dibuja en tu equipo a 2× o mejor y se pone en el portapapeles como imagen.
4. Pégalo donde vaya. El marcado, en tu editor; el PNG, en tu documento, presentación o chat. En ninguno de los dos casos se ha escrito nada en disco.

Qué se le ha hecho ya al marcado copiado

Esta es la parte que lo hace mejor que copiar desde DevTools. Antes de llegar a tu portapapeles, el marcado pasa por el mismo saneador que usa cada descarga: se añade el espacio de nombres xmlns si faltaba, para que el fragmento se sostenga solo como documento válido, y se eliminan los elementos script, los atributos de manejadores de eventos y las referencias externas, así que no pegas el comportamiento de la página de otro en tu código. Lo que pegas son las formas, y solo las formas.

Pegarlo en un componente

Dos detalles pequeños te morderán en JSX. Atributos como stroke-width y fill-rule tienen que pasar a strokeWidth y fillRule; la mayoría de editores y codemods lo hacen por ti. Y si el icono usa currentColor —la mayoría lo hace—, tomará el color del texto que haya en su ámbito, que suele ser justo lo que quieres. Si se dibuja negro y esperabas un color, ese es el motivo: el color vivía en el CSS de la página, no en la forma.

Por qué el portapapeles no necesita permisos extra

Los dos botones escriben en el portapapeles desde dentro de un clic que has hecho tú, en una página de extensión con el foco. Esa es exactamente la condición bajo la que los navegadores permiten escribir en el portapapeles, así que la extensión no pide ningún permiso de portapapeles: simplemente aprovecha el gesto que ya le diste.

Copiar código

Marcado saneado, con xmlns incluido, para editores y componentes.

Copiar imagen

Un PNG a 2× o mejor, para documentos, presentaciones, chats y correo.

Saneado

Los scripts, los manejadores y las referencias externas se eliminan antes de cualquiera de las dos copias.

Permisos

No se pide permiso de portapapeles: aprovecha el clic que has hecho.

Conviene saber

Preguntas frecuentes