Tutorial — marcas
Como extrair um logo SVG de um site
Um logo capturado por print de um cabeçalho tem 180 pixels de largura para sempre. O mesmo logo como vetor fica nítido num cartão de visita e na fachada de um prédio.
Assista — 19 segundos
A marca, em fidelidade total
svg-7.svg não ajuda ninguém daqui a seis meses.O passo de nomear importa mais em logos do que em qualquer outra coisa — uma pasta de marca cheia de arquivos numerados é uma pasta que ninguém usa.
O que a gravação mostra
- O logo do cabeçalho é um <svg> inline
- Escaneie a página e ele volta junto com o resto
- Percorra até a marca em si
- Nomeie direito para sua pasta de marca
- Salvo em fidelidade total — escala até um outdoor
- Cheque a licença antes de reutilizar a marca de alguém
Antes do como
Um logo é a marca registrada de alguém, e extrair não é permissão
Isso vale dois minutos porque errar sai caro. Conseguir salvar uma marca e ter direito de usá-la são perguntas diferentes, e a segunda não tem nada a ver com esta ferramenta.
Em linhas gerais, e isto não é aconselhamento jurídico: usar o logo de uma empresa para se referir àquela empresa — uma lista de clientes, uma fileira de “funciona com”, uma matéria de imprensa, uma tabela comparativa — costuma ser aceitável, e a maioria das empresas publica diretrizes de marca dizendo isso. Usá-lo de um jeito que sugira endosso, parceria ou autoria não é, e modificar uma marca e passá-la como sua também não.
O movimento prático: antes de usar, procure a página de marca ou de imprensa da empresa. A maioria das organizações grandes publica um kit oficial com o logo em vários formatos, regras de área de respiro, versões de cor aprovadas e uma licença curta. Esse kit é mais seguro e normalmente melhor preparado do que qualquer coisa que você extraia — extrair é o que você faz quando não há kit, ou quando precisa da marca agora para um mock-up.
Extraindo a marca
Logos costumam ser o vetor mais fácil de achar em qualquer página, por um motivo estrutural.
- Vá para a página inicial. O logo do cabeçalho quase sempre é
<svg>inline — os sites fazem isso para a marca ficar nítida em toda tela e poder ser recolorida no modo escuro. - Abra o popup e escaneie. O logo normalmente está entre os primeiros vetores encontrados, porque fica perto do topo do documento.
- Percorra até ele e confirme na prévia. A prévia isolada importa aqui: ela mostra se você tem o conjunto completo, só a marca tipográfica ou só o símbolo. As páginas muitas vezes contêm os três.
- Nomeie e baixe. Use um nome que você vá reconhecer depois —
acme-logo-completo,acme-simbolo. Então Baixar o atual.
Onde as variantes se escondem
Um site normalmente carrega mais de uma versão da própria marca, e a do cabeçalho pode não ser a que você quer. Confira o rodapé, que muitas vezes tem uma variante monocromática ou invertida. Confira o layout mobile com a janela estreita, que frequentemente troca o conjunto completo pelo símbolo sozinho. E teste qualquer botão de modo escuro, que pode trocar por uma versão clara sobre fundo escuro. Cada uma dessas é um vetor separado e cada uma vai aparecer na varredura.
Por que o logo saiu preto
Se a marca usa currentColor para se adaptar ao modo escuro, o arquivo extraído não tem cor própria e renderiza preto. Esse é o markup de origem verdadeiro. Recolora no Figma ou no Illustrator, ou use o atalho para o SVG Color Changer. Para uma marca especificamente, pegue o valor de cor oficial nas diretrizes de marca em vez de tirar a cor com o conta-gotas de um print — telas mentem sobre cor.
Se o logo for um PNG
Alguns sites ainda publicam um logo raster, e ferramenta nenhuma transforma isso de volta em vetor — os dados de curva se foram. Suas opções são o kit de marca da empresa, que normalmente tem o vetor, ou vetorizar, o que produz uma aproximação com curvas ligeiramente erradas que um designer vai notar. Peça o kit.
- Normalmente
- O logo do cabeçalho é
<svg>inline, então está entre os primeiros encontrados. - Variantes
- Confira o rodapé, o layout mobile e o modo escuro — muitas vezes três arquivos diferentes.
- Legalmente
- Extrair não é permissão. Procure primeiro o kit de marca da empresa.
- Se for um PNG
- Não dá para converter de volta em vetor. Peça o arquivo oficial.
Vale saber
Perguntas frequentes
É legal baixar o logo de uma empresa?
Baixar não é a questão — usar é. Referir-se a uma empresa com a marca dela costuma ser aceitável e a maioria publica diretrizes de marca dizendo isso, mas sugerir endosso ou parceria não é. Confira antes a página de marca ou de imprensa da empresa; isto não é aconselhamento jurídico.
Por que o logo está preto em vez da cor da marca?
Ele usa currentColor para poder se adaptar ao modo escuro, o que significa que a cor mora no CSS e não no arquivo. Recolora numa ferramenta de design, e pegue o valor de cor oficial nas diretrizes de marca, não de um print.
O logo do site é um PNG. Dá para conseguir um vetor?
Do PNG não — os dados de curva não existem num raster. Procure o kit de marca da empresa, que quase sempre inclui o vetor. Vetorizar produz uma aproximação com curvas visivelmente erradas.
Peguei o símbolo mas queria o conjunto completo.
Sites costumam carregar várias variantes. Confira o rodapé para uma versão monocromática, estreite a janela para ver o layout mobile e teste qualquer botão de modo escuro — cada variante aparece como um vetor separado na varredura.
O logo extraído vai imprimir direito?
Sim. É um vetor de verdade, então continua nítido em qualquer tamanho. Confirme os valores de cor com as diretrizes de marca antes de mandar qualquer coisa para impressão.
Pegue a marca, não um print dela
Nítida em qualquer tamanho, recolorível e pronta para impressão.