O que é e como criar uma imagem de porcentagem
Imagem de porcentagem nada mais é do que um gráfico visual que mostra uma parte de um todo em termos percentuais. Pode ser um círculo segmentado, uma barra horizontal ou qualquer representação gráfica que comunique um valor numérico entre 0 e 100%. O uso mais comum no dia a dia profissional é em dashboards, relatórios e interfaces que precisam apresentar métricas de forma rápida e clara.
imagem de porcentagem: guia prático
A forma mais eficiente de construir uma imagem de porcentagem hoje em dia é usando SVG com a técnica de stroke-dasharray em círculos. Isso dá controle total sobre o valor, cores e animações sem depender de bibliotecas externas pesadas. Um círculo simples com circunferência calculada e um arco traçado proporcionalmente ao valor que você quer exibir resolve 90% dos casos. Pegue um círculo com raio 54. A circunferência é 2 * * 54, que dá aproximadamente 339.292. Para mostrar 75%, você divide 75 por 100 e multiplica por 339.292, obtendo cerca de 254.469. Isso vira o valor do stroke-dasharray. O stroke-dashoffset fica na diferença, cerca de 84.823, e aí o círculo já está desenhado com a porcentagem correta.
Eu montei um sistema completo assim para um cliente há alguns anos e me deparei com um problema específico: quando o valor era exatamente 0% ou 100%, o browser renderizava o círculo de forma inconsistente. Em alguns navegadores o anel simplesmente desaparecia no 0%, e no 100% às vezes aparecia um fragmento indesejado. A solução foi adicionar um tratamento condicional no código — quando o valor é menor que 0.5%, eu zero o dasharray e mostro um círculo vazio; quando é maior que 99.5%, eu coloco o dasharray como o valor completo da circunferência. Isso elimina a ambiguidade de arredondamento que certos motores de renderização têm. O fallback para quando SVG não é viável é o canvas 2D. Você desenha o arco manualmente com arc() e fill(), calculando o ângulo final a partir do percentual. A vantagem do canvas é que funciona em contexts mais restritos, como emails HTML ou imagens geradas dinamicamente pelo servidor. A desvantagem é que perde interatividade e acessibilidade — leitores de tela não conseguem extrair o valor numérico de um canvas.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Alternativas e limitações
Se você precisa de algo rápido e não quer mexer com SVG ou canvas, existem bibliotecas como Chart.js e D3.js. Elas resolvem o problema com poucas linhas, mas importam um pacote de 100KB a 200KB dependendo da configuração. Para uma única imagem de porcentagem num site interno, esse peso não compensa. Use apenas se já houver um gráfico maior no mesmo projeto. Outro ponto que poucos mencionam: animação de entrada. Um stroke-dasharray animado com CSS transition é suave e leve, mas em dispositivos mais antigos ou em contextos com muitas métricas na mesma tela, o GPU começa a sofrer. Eu vi dashboards com mais de 30 percentuais animados simultaneamente travarem em tablets antigos. A solução prática é desativar a animação quando o usuário tem prefers-reduced-motion ativo ou simplesmente remover a animação em telas com menos de 1200px de largura.
Para gerar a imagem como arquivo estático — PNG, JPEG ou SVG puro — a abordagem mais direta é transformar o SVG em base64 e disparar um download. Se precisar de resolução maior, use o método toDataURL() do elemento SVG com um canvas intermediário. O resultado em PNG tende a perder nitidez nos bordes do arco, então SVG mesmo é preferível sempre que possível. A parte mais negligenciada é a acessibilidade. Todo componente de porcentagem precisa ter um atributo aria-label ou aria-valuetime explicitando o valor numérico. Sem isso, quem usa screen reader não tem como saber que ali está 73% de algo. Um span com a classe visually-hidden e o texto "73 por cento" resolve isso em segundos.
Se o seu caso envolve porcentagens dinâmicas que mudam com frequência, considere um pequeno script em vanilla JavaScript que leia um atributo data-percent do elemento e recalcula o dasharray em tempo real. Isso evita precisar reconstruir todo o SVG a cada atualização e mantém o desempenho estável mesmo com valores variáveis.
