A maioria das imagens faz parte do conteúdo, mas os ícones fazem parte da interface do usuário. Eles precisam ser dimensionados e se adaptar da mesma forma que o texto da sua interface é dimensionado e se adapta.
Elementos gráficos vetoriais escaláveis
Quando se trata de imagens fotográficas, há muitas opções de formato de imagem: JPG, WebP e AVIF. Para imagens não fotográficas, é possível escolher entre o formato Portable Network Graphics (PNG) e o formato Scalable Vector Graphics (SVG).
PNGs e SVGs são bons para lidar com áreas de cor lisa e permitem que suas imagens tenham fundos transparentes.
Se você usar um PNG, provavelmente precisará criar várias versões da sua imagem em tamanhos diferentes e usar o atributo srcset no elemento img para tornar a imagem responsiva. Se você usar um SVG, ele será responsivo por padrão.
PNGs (e JPGs, WebP e AVIF) são imagens bitmap. As imagens em bitmap armazenam informações como pixels. Em um SVG, as informações são armazenadas como instruções de desenho. Quando o navegador lê o arquivo SVG, as instruções são convertidas em pixels. E o melhor de tudo, estas instruções são relativas. Independentemente das dimensões usadas para descrever linhas e formas, tudo é renderizado com a nitidez correta. Em vez de criar vários SVGs de tamanhos diferentes, é possível fazer um SVG que funcione em todos os tamanhos. Não é necessário usar o atributo srcset.
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
O XML é usado para escrever as instruções em um arquivo SVG. Essa é uma linguagem de marcação, como HTML.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
Você pode até mesmo colocar SVG dentro de HTML.
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
Se você incorporar um SVG como esse, o navegador precisará fazer uma solicitação a menos. Não há como esperar o download da imagem porque ela chega com o HTML ... no HTML. Além disso, como você logo descobrirá, a incorporação de SVGs como essa proporciona mais controle sobre o estilo deles.
Ícones e texto
As imagens de ícones geralmente apresentam formas simples em um plano de fundo transparente. O SVG é ideal para ícones.
Se você tiver um botão ou um link com texto e um ícone dentro dele, o ícone é de apresentação. O texto que importa. Ao usar um elemento img, um atributo alt vazio indica que a imagem é de apresentação.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
Como CSS é para apresentação, você pode colocar o ícone em seu CSS como uma imagem de plano de fundo.
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
Se você colocar o SVG no HTML, use o atributo aria-hidden para ocultá-lo da tecnologia adaptativa.
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
Ícones independentes
Use texto dentro dos botões e links se quiser que o propósito seja claro. Você pode usar um ícone sem texto, mas não presuma que todos entendem o significado de um ícone específico. Em caso de dúvida, teste com usuários reais.
Se você decidir usar um ícone sem nenhum texto de acompanhamento, o ícone não será mais de apresentação. Uma imagem de plano de fundo no CSS não é uma maneira apropriada de exibir o ícone. O ícone precisa receber um nome acessível em HTML.
Se você usar um elemento img, o ícone receberá o nome acessível do atributo alt.
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
Outra opção é colocar o nome acessível no link ou botão em si e declarar que a imagem é de apresentação. Use o atributo aria-label para fornecer o nome acessível.
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
Se você colocar o SVG dentro do seu HTML, use o atributo aria-label no link ou botão para dar um nome acessível a ele e use o atributo aria-hidden no ícone.
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
Como definir o estilo de ícones
Se você incorporar os ícones SVG diretamente no seu HTML, poderá estilizar partes deles como qualquer outro elemento da sua página. Não é possível fazer isso se você usa um elemento img para mostrar os ícones.
No exemplo a seguir, os elementos rect dentro do SVG têm um valor fill de blue para corresponder aos estilos do texto do botão.
button {
color: blue;
}
button rect {
fill: blue;
}
Também é possível aplicar os estilos hover e focus.
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
Recursos
- Se você precisar definir o estilo de SVGs que são imagens de plano de fundo no seu CSS, leia o artigo da Una sobre como colorir planos de fundo do SVG.
- Sara Soueidan escreveu sobre botões de ícone de acessibilidade.
- Scott O'Hara escreveu sobre marcação contextual de imagens e SVGs acessíveis.
- Se você estiver usando uma ferramenta de design gráfico para exportar SVGs, use SVGOMG para otimizar a saída.
Os ícones são uma parte importante da marca do seu site. A seguir, você descobrirá como tornar outros aspectos do seu branding responsivos com o poder dos temas.
Teste seu conhecimento
Teste seus conhecimentos sobre ícones
O SVG pode lidar com qualquer densidade de pixel com um único arquivo ou bloco de código <svg>.
.png ou .jpg, o SVG não precisa de srcset nem de um elemento <picture>.O código SVG diretamente no HTML tem quais vantagens?