Texto HTML ao redor de uma forma SVG com float CSS

Para fazer o texto HTML contornar uma silhueta SVG, aplique float à imagem, defina suas dimensões explicitamente e configure shape-outside com a URL do SVG transparente. Adicione shape-margin para deixar espaço ao redor do contorno. O parágrafo continua sendo HTML comum; o SVG fornece a imagem usada para calcular o limite que o texto contorna.

Isso funciona fora do SVG. Não faz um elemento SVG text quebrar linhas nem curva letras ao longo de um caminho. O exemplo abaixo usa uma silhueta transparente original e um parágrafo completo, sem palavras posicionadas manualmente ou quebras de linha inseridas.

Escolha o layout de texto de que você precisa

O arquivo SVG não carrega o layout do parágrafo ao redor. Copiar a imagem para outro documento não transfere essa relação entre HTML e CSS.

1. Defina o tamanho do float e use uma imagem transparente

A referência de shape-outside da MDN descreve a propriedade como uma forma de mudar a área do float que o conteúdo inline adjacente contorna. Com o valor padrão, essa área segue a caixa de margem do float. Uma URL de imagem, por sua vez, deriva a forma do alfa da imagem, isto é, da transparência.

A cor visível não sinaliza o limite. Um fundo branco opaco também tem alfa e pode fazer a ilustração se comportar como um retângulo. Confira o próprio arquivo, não apenas a aparência de uma arte branca sobre uma página branca. Preserve a transparência fora da silhueta.

Salve esta arte original como silhouette.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>

Seu tamanho intrínseco é 150 × 180, e o CSS usa a mesma largura e altura. Manter a proporção consistente facilita a inspeção da relação entre a arte exibida e a imagem da forma.

A imagem deste exemplo é decorativa, por isso tem um atributo alt vazio. Ofereça uma alternativa textual adequada para uma imagem significativa da sua página; fazer o texto contorná-la não comunica seu significado automaticamente.

2. Execute o exemplo HTML completo

Salve isto como index.html ao lado de silhouette.svg:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>

Sirva a pasta por HTTP, por exemplo com python -m http.server 8000, e abra http://localhost:8000/index.html. Assim, os dois arquivos compartilham a mesma origem. Uma URL de arquivo local não é a configuração de carregamento testada aqui.

Troque class="sample narrow contour" por class="sample narrow" para comparar o contorno retangular normal do float. Troque narrow por wide para testar a coluna de 520 pixels. O parágrafo e a imagem permanecem iguais.

A referência de display descreve flow-root como a criação de um contexto de formatação de bloco. Aqui, ele contém a imagem flutuante dentro da respectiva amostra. Não posiciona as palavras; o layout inline do navegador faz isso.

3. Confira as linhas renderizadas em mais de uma largura

Executamos quatro amostras visíveis no Chromium 155 com Arial de 16px e altura de linha de 24px. A imagem permaneceu em 150 × 180px, enquanto as colunas tinham larguras fixas de conteúdo de 360px e 520px. As duas amostras de contorno usaram shape-margin: 10px e shape-image-threshold: 0.5.

O contorno estreito mudou as quebras sem reduzir o total de linhas. Na largura maior, a amostra de contorno usou uma linha a menos que seu controle retangular.

Medimos os retângulos nativos de DOM Range de cada palavra e os agrupamos por posição vertical. São medidas das linhas de texto renderizadas, não acesso aos objetos internos de caixa de linha do navegador. Também verificamos as configurações calculadas de float e forma, as dimensões da imagem carregada e amostras de alfa na imagem SVG real.

Nas duas larguras, algumas linhas do contorno começaram à esquerda do limite de exclusão de 150px do float retangular. O texto também voltou à largura total da coluna após a imagem. Essas observações mostram que o contorno testado afetou o layout real, em vez de apenas mudar a aparência de uma captura de tela.

As linhas e coordenadas exatas dependem da fonte, do navegador, do parágrafo, da imagem e da largura. Substituir uma frase ou carregar outra fonte pode mudá-las. Teste seu conteúdo real em tamanhos estreitos e largos, em vez de preservar esses números como constantes de design.

4. Trate margem da forma, alfa e carregamento separadamente

shape-margin expande a forma contornada para criar espaço entre ela e o texto. O valor de 10px aqui é uma escolha de layout, não uma distância mínima medida entre cada glifo visível e cada ponto da ilustração.

A especificação CSS Shapes mantém o modelo normal de caixas e limita o efeito da forma à caixa de margem do float. Uma margem de forma grande não dá à imagem uma caixa CSS maior. Se o design precisa de mais espaço, inspecione também as dimensões e margens comuns do float.

shape-image-threshold escolhe o limiar alfa usado para extrair a forma da imagem. A amostra original tem exterior totalmente transparente e arte central opaca. Sombras suaves ou bordas translúcidas exigem uma escolha deliberada do limiar e revisão visual; mudar o limiar não torna transparente um fundo opaco.

A URL da imagem também precisa ser elegível para o carregamento da forma. CSS Shapes especifica uma solicitação CORS para URLs de imagem e volta ao comportamento sem forma personalizada quando o carregamento falha. Servir o SVG ao lado da página evita uma dependência entre origens neste exemplo. Se uma CDN o hospedar, configure a resposta CORS desse servidor e inspecione a solicitação e o layout. Ver a imagem em um elemento img não comprova, por si só, que a solicitação da forma funcionou.

5. Preserve a ordem do texto e confira a página pronta

Os quatro parágrafos testados mantiveram exatamente o mesmo texto em um único nó de texto, sem elementos br ou posicionamento por palavra. O CSS mudou as quebras visuais sem reescrever a ordem do DOM do parágrafo. Não realizamos uma sessão com leitor de tela nem afirmamos uma auditoria de acessibilidade com base nessa verificação do código-fonte.

Mantenha o parágrafo legível quando a imagem não estiver disponível ou o layout mudar. Em colunas muito estreitas, uma organização mais simples com a imagem acima do parágrafo pode ser mais fácil de ler que uma faixa fina de texto ao lado. Confira seu próprio breakpoint e conteúdo em vez de reduzir o texto para forçar um efeito de contorno.

O float ainda reserva uma caixa CSS. O contorno pela forma não o transforma em um obstáculo geral que o texto contorna por todos os lados. Neste exemplo com float à esquerda, o texto adjacente flui à direita e depois continua abaixo.

Corrija o sintoma na origem

Se uma ilustração plana adequada existir apenas como imagem raster e você precisar de uma silhueta editável, o fluxo de clipart para SVG do PerfectVector pode ajudar a recuperar uma candidata. Compare seu contorno e a transparência ao redor com o original e depois teste a URL SVG real na página. Uma imagem raster transparente também pode fornecer uma forma CSS baseada em imagem; SVG não é necessário apenas para ativar o contorno por alfa.

Preserve um SVG existente e limpo quando você já tiver um. A vetorização não constrói o layout HTML ao redor, não preserva por você a semântica do parágrafo nem garante um resultado específico de contorno em um navegador.

Perguntas frequentes

shape-outside faz o texto dentro de um SVG quebrar linhas? Não. Este exemplo muda o fluxo inline HTML ao lado de uma imagem com float. Rótulos SVG, HTML incorporado em SVG e texto que segue um caminho são tarefas de layout diferentes.

Por que meu SVG aparentemente transparente ainda faz o texto contornar um retângulo? Confira se há um fundo opaco no arquivo, falha na solicitação da imagem da forma, dimensões ausentes no float ou um contexto de layout em que o float não está ativo. Pixels brancos não são pixels transparentes.

Preciso converter um PNG em SVG primeiro? Não apenas para o contorno baseado em alfa. Uma imagem raster transparente adequada também pode fornecer a forma. Use SVG quando a edição da arte ou outros requisitos vetoriais justificarem.

As quebras de linha serão iguais em todos os tamanhos de tela? Não. Largura disponível, métricas da fonte, texto, tamanho da imagem e layout do navegador afetam as linhas. Teste o conteúdo real em mais de uma largura.

Fontes

1. MDN shape-outside — Documenta áreas de float e formas de imagem derivadas do alfa.
2. MDN shape-margin — Define o espaçamento adicionado ao redor da forma contornada.
3. MDN shape-image-threshold — Define o limiar alfa usado para formas de imagem.
4. CSS Shapes Module Level 1 — Especifica limites da caixa do float, carregamento de imagens e comportamento CORS.
5. MDN display e flow-root — Explica o contexto de formatação usado para conter o float.

Se faltar arte editável, prepare uma candidata SVG de clipart, inspecione sua silhueta e transparência e verifique o layout real do parágrafo na página nas larguras que você pretende oferecer.