- Inicio
- Tutoriales
- Extraer un logotipo
Tutorial — marcas
Cómo extraer un logotipo SVG de una web
Un logotipo capturado de una cabecera mide 180 píxeles de ancho para siempre. Ese mismo logotipo como vector se ve nítido en una tarjeta de visita y en la fachada de un edificio.
Míralo — 19 segundos
La marca, con fidelidad completa
svg-7.svg no ayuda a nadie dentro de seis meses.El paso de ponerle nombre importa más con los logotipos que con nada: una carpeta de marca llena de archivos numerados es una carpeta de marca que nadie usa.
Qué muestra la grabación
- El logotipo de la cabecera es un <svg> en línea
- Escanea la página y vuelve con los demás
- Avanza hasta la marca en sí
- Ponle un nombre decente para tu carpeta de marca
- Guardado con fidelidad completa: escala hasta una valla publicitaria
- Comprueba la licencia antes de reutilizar la marca de otro
Antes del cómo
Un logotipo es la marca registrada de alguien, y extraerlo no es permiso
Esto merece dos minutos porque equivocarse sale caro. Poder guardar una marca y tener permiso para usarla son cuestiones distintas, y la segunda no tiene nada que ver con esta herramienta.
A grandes rasgos, y esto no es asesoramiento legal: usar el logotipo de una empresa para referirse a esa empresa —una lista de clientes, una fila de «compatible con», una nota de prensa, una tabla comparativa— suele ser aceptable, y la mayoría de empresas publican directrices de marca que lo dicen. Usarlo de un modo que implique respaldo, alianza o autoría no lo es, y modificar una marca y hacerla pasar por propia tampoco.
El movimiento práctico: antes de usarlo, busca la página de marca o de prensa de la empresa. La mayoría de las organizaciones grandes publican un kit oficial con el logotipo en varios formatos, reglas de espacio libre, gamas de color aprobadas y una licencia breve. Ese kit es más seguro y suele estar mejor preparado que cualquier cosa que extraigas: la extracción es lo que haces cuando no hay kit, o cuando necesitas la marca ahora mismo para una maqueta.
Extraer la marca
Los logotipos suelen ser el vector más fácil de encontrar en cualquier página, por un motivo estructural.
- Ve a la página de inicio. El logotipo de la cabecera casi siempre es
<svg>en línea: los sitios lo hacen para que la marca se vea nítida en todas las pantallas y pueda recolorearse para el modo oscuro. - Abre el popup y escanea. El logotipo suele estar entre los primeros vectores encontrados, porque está cerca del principio del documento.
- Avanza hasta él y confírmalo en la vista previa. Aquí la vista previa aislada importa: te muestra si tienes el bloque completo, solo el logotipo tipográfico o solo el símbolo. Las páginas suelen contener los tres.
- Ponle nombre y descárgalo. Usa un nombre que reconozcas más adelante:
acme-logo-completo,acme-simbolo. Luego, Descargar el actual.
Dónde se esconden las variantes
Un sitio suele llevar más de una versión de su propia marca, y la de la cabecera puede no ser la que quieres. Mira el pie, que a menudo tiene una variante monocroma o invertida. Mira el diseño móvil con la ventana estrecha, que con frecuencia cambia el bloque completo por el símbolo solo. Y prueba cualquier interruptor de modo oscuro, que puede meter una versión clara sobre fondo oscuro. Cada una es un vector distinto y cada una aparecerá en el escaneo.
Por qué el logotipo ha salido negro
Si la marca usa currentColor para adaptarse al modo oscuro, el archivo extraído no tiene color propio y se dibuja en negro. Ese es el marcado de origen real. Recolóralo en Figma o Illustrator, o usa el salto al SVG Color Changer. Para una marca en concreto, consulta las directrices de marca para el valor de color oficial en vez de sacarlo con el cuentagotas de una captura: las pantallas mienten sobre el color.
Si el logotipo es un PNG
Algunos sitios todavía publican un logotipo rasterizado, y ninguna herramienta puede convertir eso de vuelta en vector: los datos de las curvas ya no están. Tus opciones son el kit de marca de la empresa, que normalmente tendrá el vector, o vectorizarlo, lo que produce una aproximación con curvas ligeramente equivocadas que un diseñador notará. Pide el kit.
- Normalmente
- El logotipo de la cabecera es
<svg>en línea, así que está entre los primeros que se encuentran. - Variantes
- Mira el pie, el diseño móvil y el modo oscuro: a menudo son tres archivos distintos.
- Legalmente
- Extraer no es permiso. Busca primero el kit de marca de la empresa.
- Si es un PNG
- No se puede convertir de vuelta a vector. Pide el archivo oficial.
Conviene saber
Preguntas frecuentes
¿Es legal descargar el logotipo de una empresa?
Descargarlo no es la cuestión: usarlo sí. Referirse a una empresa con su marca suele ser aceptable y la mayoría publica directrices de marca que lo dicen, pero implicar respaldo o alianza no lo es. Consulta antes la página de marca o de prensa de la empresa; esto no es asesoramiento legal.
¿Por qué el logotipo sale negro en vez de con el color de marca?
Usa currentColor para poder adaptarse al modo oscuro, lo que significa que el color vive en el CSS y no en el archivo. Recolóralo en una herramienta de diseño y toma el valor de color oficial de las directrices de marca, no de una captura.
El logotipo del sitio es un PNG. ¿Puedo conseguir un vector?
Del PNG no: los datos de las curvas no existen en un mapa de bits. Busca el kit de marca de la empresa, que casi siempre incluye el vector. Vectorizar produce una aproximación con curvas visiblemente equivocadas.
Me he llevado el símbolo, pero quería el bloque completo.
Los sitios suelen llevar varias variantes. Mira el pie para una versión monocroma, estrecha la ventana para ver el diseño móvil y prueba cualquier interruptor de modo oscuro: cada variante aparece como un vector distinto en el escaneo.
¿El logotipo extraído se imprimirá bien?
Sí. Es un vector real, así que se mantiene nítido a cualquier tamaño. Confirma los valores de color con las directrices de marca antes de mandar nada a imprenta.
Consigue la marca, no una captura de ella
Nítida a cualquier tamaño, recoloreable y lista para imprenta.