Logos SVG responsivos: troque a composição em telas menores

Um logo SVG responsivo pode alternar entre uma composição detalhada e uma marca compacta em vez de reduzir todas as partes juntas. Crie primeiro as duas composições e use uma origem de <picture> com condição de mídia para escolher entre elas. Confira o currentSrc da imagem nas larguras que pretende suportar.

Este exemplo usa uma composição original da marca fictícia Cove: um losango vazado com letras desenhadas e uma versão só com o símbolo. A troca depende da largura da viewport do documento. Um contêiner estreito em uma página larga não aciona a mesma troca.

Escala e direção de arte resolvem tarefas diferentes

A escala comum preserva toda a composição: símbolo, letras e espaçamento ficam menores juntos. A direção de arte seleciona outra composição criada. Remover letras ou reorganizar uma marca é uma decisão de design; um SVG não toma essa decisão automaticamente por ser escalável.

A referência de picture HTML descreve origens alternativas selecionadas por condições de mídia e o fallback img. Aqui oferecemos um SVG compacto a 599 pixels ou menos e um detalhado nos demais casos. O quadro da imagem mantém o tamanho enquanto seu conteúdo muda.

Reduza a composição ou escolha outra

Crie dois arquivos editáveis

Salve esta composição detalhada original como detailed.svg. As letras são caminhos desenhados, portanto este pequeno exemplo não precisa de fonte:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

Salve a versão compacta como compact.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

O caminho do losango é idêntico nos dois arquivos. O detalhado contém cinco caminhos; o compacto, um. Nenhum inclui elemento de imagem ou texto ativo. As duas larguras de viewBox diferem porque as composições diferem, não porque um arquivo foi escalado uniformemente.

Mantenha as duas versões de origem. Para sua marca, decida quais características precisam continuar reconhecíveis na composição compacta e examine abertura, margens e proporções. Nosso guia de formatos de arquivo de logo cobre o pacote mais amplo de origem e entrega; este exemplo acrescenta uma escolha de navegador entre duas versões aprovadas.

Execute o exemplo completo com picture

Salve como starter.html junto dos dois SVGs e sirva a pasta localmente. Com Python instalado, python3 -m http.server 8766 é uma opção; depois abra http://localhost:8766/starter.html em um navegador.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

A condição de mídia é (max-width: 599px). O recurso de mídia width do CSS avalia a largura da viewport. A 600 pixels, a condição é falsa, portanto este exemplo seleciona a origem detalhada do img. O número é um breakpoint de exemplo para este layout, não uma regra de design de marca.

O CSS reserva altura de imagem de 80 pixels e usa object-fit: contain para ajustar a imagem selecionada dentro da caixa do elemento. Isso mantém ambas as composições visíveis sem esticá-las para a mesma proporção. Aplique o estilo de ajuste ao img, que apresenta a origem escolhida.

alt="Cove" identifica a marca fictícia nos dois casos. Dê à sua imagem uma alternativa textual adequada, como descreve a referência de img HTML. Uma marca compacta não deve perder seu nome acessível quando as letras visíveis desaparecem.

O que o navegador selecionou em três larguras

Abrimos exatamente esse exemplo no Chrome com larguras de viewport do documento de 480, 600 e 960 pixels. Em cada largura, as três imagens terminaram de carregar. O contêiner principal continuou com 200 pixels e o controle estreito, com 120 pixels.

Conferimos a URL selecionada por HTMLImageElement.currentSrc, junto das dimensões carregadas. Só uma URL selecionada não é teste de carregamento bem-sucedido: examine também complete e as dimensões naturais. Nossa origem compacta informou 96×96; a detalhada, 300×96.

O elemento principal de imagem continuou 200×80 nas três larguras. O controle estreito ficou em 120×80. A 480 pixels, a marca compacta ficava centralizada em cada quadro, enquanto o controle de escala comum ainda exibia toda a composição. A 600 e 960 pixels, reduzir o contêiner para 120 pixels diminuiu a composição detalhada; não selecionou o arquivo compacto.

Essa distinção importa em uma barra lateral ou componente reutilizável. Esta condição de mídia HTML responde à viewport, não à largura medida do contêiner. Se a escolha do logo precisa depender da largura disponível do componente, planeje e teste esse mecanismo separado em vez de supor que o breakpoint observa o componente.

Os resultados cobrem os arquivos originais, um navegador e três larguras explícitas de viewport. Não estabelecem todos os navegadores, métodos de incorporação ou destinos de exportação. O exemplo também não testa regras de mídia dentro de um SVG externo.

Confira o quadro e a arte separadamente

Uma caixa de elemento não é igual aos limites pintados do logo. Os limites geométricos da origem detalhada no navegador eram x8, y8, width274, height80 dentro de um viewBox 300×96. Os da origem compacta eram x8, y8, width80, height80 dentro de um viewBox 96×96. Essas margens continuam fazendo parte do cálculo de ajuste da origem.

Se o logo selecionado parece pequeno demais, examine o espaço vazio da origem antes de aumentar as dimensões do elemento. Se parece esticado, examine a caixa da imagem e a regra de ajuste. O guia de preserveAspectRatio explica um cálculo relacionado de viewport SVG; mudar esse mapeamento não cria, por si só, uma segunda composição.

Este exemplo usa imagens SVG externas por img. Use o guia de SVG inline versus img quando precisar escolher outra incorporação. Um SVG baixado ou impresso não inclui esse invólucro HTML de seleção de origem: entregue a composição real de que o destinatário precisa e mantenha as versões editáveis.

Prepare versões a partir de um logo raster

Se sua única arte de marca é PNG ou JPG e você precisa de geometria editável, prepare um logo SVG com o PerfectVector, examine a silhueta e as aberturas internas e mantenha o original limpo. Depois crie as composições detalhada e compacta e teste sua seleção na página. A vetorização prepara a arte; não decide quais letras remover nem escolhe o breakpoint. Arte SVG limpa existente pode ir direto ao trabalho de composição. O guia de vetorização explica quando a conversão ajuda.

Perguntas frequentes

SVG simplifica automaticamente um logo em uma tela pequena? Este exemplo seleciona entre dois arquivos SVG criados. Redimensionar um arquivo mantém sua composição original; simplificar exige uma decisão separada de design.

Por que um contêiner estreito ainda mostra o logo detalhado? A condição de largura da origem picture verifica a viewport do documento. Nas viewports testadas de 600 e 960 pixels, até o contêiner de 120 pixels manteve a origem detalhada.

Como confirmo qual arquivo foi usado? Examine currentSrc, estado de carregamento e dimensões naturais da imagem. O exemplo imprime essas informações junto das dimensões do elemento e do contêiner.

A troca responsiva será incluída quando eu baixar um SVG? A regra de seleção de origem fica no invólucro HTML. Mantenha e entregue o SVG detalhado ou compacto necessário para o uso real do destinatário.

Fontes

1. Elemento HTML picture — origens alternativas, condições de mídia e fallback.
2. Recurso de mídia CSS width — condição de viewport do documento usada no exemplo.
3. Propriedade currentSrc da imagem — inspeção da URL de origem selecionada.
4. CSS object-fit — ajuste de cada composição selecionada dentro do quadro da imagem.
5. Elemento HTML img — apresentação de imagem e alternativas textuais.

Para seu próprio logo PNG ou JPG, prepare um original SVG editável, confira contorno e aberturas e mantenha-o junto das composições aprovadas. Depois verifique a origem selecionada e a composição visível nas larguras de viewport que sua página usará.