Cómo capturar un SVG con un clic derecho

Míralo — 15 segundos

Una entrada de menú, un archivo

tutorial · clic derecho

Mira el menú de la grabación: no hay ningún Guardar imagen como…, porque un <svg> en línea no es una imagen. La fila de la extensión es lo único ahí que puede guardar el vector.

Qué muestra la grabación

1. Quieres un icono, y lo quieres ya
2. Haz clic derecho y elige «Guardar esto como SVG»
3. Sin popup y sin escaneo: una entrada de menú, un archivo
4. Se ejecuta el mismo saneador, así que el archivo sigue abriendo en cualquier sitio

Cuándo usar cada uno

Clic derecho para uno, popup para decidir

Las dos vías acaban en el mismo archivo, producido por el mismo código. Se diferencian en lo que tienes que saber de antemano.

• Clic derecho cuando ya sabes exactamente qué gráfico quieres y lo estás mirando. Le apuntas: no hay lista, ni paginación, ni ambigüedad. Es la vía más rápida posible a un archivo suelto.
• El popup cuando todavía no lo sabes: cuando quieres ver la vista previa aislada, comparar dos iconos parecidos, elegir un nombre de archivo, convertir a PNG, copiar el marcado o llevarte la página entera de una vez. Es la vía con opciones.

Es notable que el clic derecho no necesita escaneo alguno. Nada recorre la página, nada se cuenta y no hay lista que construir: a la extensión se le entrega el elemento que pulsaste y trabaja sobre esa única cosa.

Capturar uno

Hay dos pasos y uno de ellos es «clic derecho».

1. Haz clic derecho en el gráfico. Apunta al icono, logotipo o ilustración que quieres y haz clic derecho. Funciona con vectores en línea, con imágenes y con gráficos pintados como fondos CSS.
2. Elige «Guardar esto como SVG». La entrada de la extensión está en su propio grupo, debajo de las de Chrome. Al elegirla encuentra el gráfico bajo tu cursor, lo resuelve, lo sanea y lo guarda: no se abre ningún popup en ningún momento.

Es el mismo archivo, no una versión rápida

El trabajo pesado ocurre en el mismo sitio en ambos casos. El service worker que hay tras la entrada de menú no tiene DOM propio, así que le pide al content script de la página un archivo terminado y saneado, y se lo pasa a la maquinaria de descargas del navegador. Ese es el mismo camino que toma una descarga desde el popup: la misma reparación del espacio de nombres y la misma eliminación de scripts y manejadores de eventos. No estás cambiando calidad por velocidad.

Dónde no aparecerá la entrada de menú

Está registrada solo para páginas web normales: http y https. No la verás en páginas chrome://, en la Chrome Web Store ni en otras galerías de extensiones, ni en PDF u otros documentos que no sean HTML. Los navegadores bloquean las extensiones en sus propias páginas de galería a propósito, y ninguna extensión puede sortearlo.

Si el icono viene de un sprite

Las referencias <use> de sprite que apuntan dentro del mismo documento se resuelven al instante. Una que apunte a un archivo de sprite aparte que la página no ha cargado hay que descargarla primero, así que puede tardar un momento más o, si ese archivo es inalcanzable, fallar. En ese caso abre el popup y llévatelo desde el escaneo, que tiene más margen para resolverlo.

Pasos

Dos. Clic derecho y luego elegir la entrada. Sin popup, sin escaneo.

Calidad

Idéntica a una descarga desde el popup: mismo saneador, misma reparación del espacio de nombres.

Funciona en

Vectores en línea, imágenes y gráficos de fondo CSS en cualquier página http(s).

Usa el popup para

Previsualizar, renombrar, convertir a PNG, copiar o llevarte la página entera de una vez.

Conviene saber

Preguntas frecuentes