> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

> Escolha um logo SVG detalhado ou compacto com condições de mídia em picture. Teste a origem selecionada em três larguras e separe direção de arte de escala.

Source: https://perfectvector.com/pt-BR/blog/responsive-svg-logo-lockup

Language: pt-BR
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) 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**

![Comparação conceitual de uma composição detalhada com losango vazado, sua cópia reduzida e uma marca compacta sem letras](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*Ilustração: uma composição reduzida mantém seus detalhes, enquanto uma versão compacta criada pode omitir letras. A seleção real de origem e os limites dos elementos abaixo vêm do exemplo Cove independente, não deste diagrama gerado.*

## 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
<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
<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](https://perfectvector.com/pt-BR/blog/logo-file-formats) 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.

```html
<!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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img). 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.

| Viewport do documento | Imagem dirigida, contêiner de 200 pixels | Escala comum, contêiner de 200 pixels | Imagem dirigida, contêiner de 120 pixels |
| --------------------- | ---------------------------------------- | ------------------------------------- | ---------------------------------------- |
| 480 pixels            | compact.svg                              | detailed.svg                          | compact.svg                              |
| 600 pixels            | detailed.svg                             | detailed.svg                          | detailed.svg                             |
| 960 pixels            | detailed.svg                             | detailed.svg                          | detailed.svg                             |

Conferimos a URL selecionada por [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://perfectvector.com/pt-BR/blog/svg-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](https://perfectvector.com/pt-BR/blog/inline-svg-vs-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](https://perfectvector.com/pt-BR/vectorize-logo), 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](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) — origens alternativas, condições de mídia e fallback.
2. [Recurso de mídia CSS width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) — condição de viewport do documento usada no exemplo.
3. [Propriedade currentSrc da imagem](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) — inspeção da URL de origem selecionada.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) — ajuste de cada composição selecionada dentro do quadro da imagem.
5. [Elemento HTML img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — apresentação de imagem e alternativas textuais.

***

Para seu próprio logo PNG ou JPG, [prepare um original SVG editável](https://perfectvector.com/pt-BR/vectorize-logo), 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á.

## Explore

- [Read the HTML article](https://perfectvector.com/pt-BR/blog/responsive-svg-logo-lockup)
- [Área de proteção do logo: calcule e preserve a margem](https://perfectvector.com/pt-BR/blog/logo-clear-space-calculation.md)
- [Como vetorizar um logo: autotraçado vs. redesenho (e como identificar um vetor falso)](https://perfectvector.com/pt-BR/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)