CodeKitHubO que é esta ferramenta?
Alguns pipelines de renderização — certos geradores de fontes de ícones, alguns motores de jogos, exportadores de PDF mais antigos e ferramentas que só compõem preenchimentos — não lidam bem com traçados SVG, ou não lidam de jeito nenhum. Converter um traçado em uma forma preenchida com a mesma largura contorna esse problema por completo: o resultado visual é idêntico, mas é expresso como um único caminho preenchido em vez de uma linha com traçado.
Esta ferramenta funciona amostrando muitos pontos ao longo do contorno de cada forma (usando a própria API de comprimento de caminho do navegador, o mesmo mecanismo usado pela animação SVG) e construindo duas linhas paralelas deslocadas em metade da largura do traçado de cada lado, fechando-as depois em um único polígono preenchido.
Por que usar?
- Funciona com elementos path, line, polyline, polygon, rect, circle e ellipse — não apenas <path> — usando um único método de amostragem unificado.
- Preserva o preenchimento próprio da forma (se houver) como uma camada separada abaixo do novo preenchimento do traçado, então formas preenchidas e com traçado ao mesmo tempo são convertidas corretamente.
- Pré-visualização lado a lado de antes/depois para confirmar visualmente a conversão antes de copiar o resultado.
- Roda inteiramente no seu navegador — o SVG que você cola nunca é enviado a lugar nenhum.
- Gratuito, instantâneo, sem limite de tamanho de arquivo além do que o seu navegador consegue renderizar.
Como usar
- Cole o código do seu SVG na caixa de texto (um exemplo funcional já vem preenchido).
- Clique em "Convert strokes to fills".
- Compare a pré-visualização de antes/depois para confirmar que o resultado está correto.
- Clique em "Copy SVG" para copiar o código convertido, sem traçado.
Exemplo
Entrada
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Resultado
Um único <path fill="#3B82F6"> cujo contorno traça os dois lados da curva original, com 12 unidades de distância, sem nenhum atributo stroke.A forma da curva é preservada porque a ferramenta amostra pontos continuamente ao longo do caminho realmente renderizado, não apenas dos seus pontos de controle.
Perguntas frequentes
Por que os cantos afiados ficam arredondados em vez de pontiagudos (mitered)?
Essa é uma simplificação conhecida e deliberada do método de amostragem: a amostragem densa de pontos ao longo de um caminho naturalmente produz junções e extremidades arredondadas, independentemente do valor original de stroke-linejoin ou stroke-linecap. Reconstruir junções exatas em esquadria (miter) ou chanfro (bevel) exige um algoritmo diferente e mais complexo (interseção de segmentos de linha em cada vértice) que esta ferramenta não implementa. Para a maioria dos casos de ícones e ilustrações a diferença visual é mínima, mas se você precisa de junções em esquadria exatas, o recurso "contornar traçado" de um editor vetorial dedicado será mais preciso.
A ferramenta lida com traçados tracejados (stroke-dasharray)?
Não — a ferramenta trata todo traçado como sólido e ignora stroke-dasharray/stroke-dashoffset. Um traçado tracejado será convertido como se fosse sólido, o que muda sua aparência. Se o seu SVG usa traçados tracejados, esta ferramenta não é a mais indicada para essas formas específicas.
Por que nada foi convertido?
A ferramenta só converte elementos que têm ao mesmo tempo uma cor de traçado (diferente de "none") e um stroke-width positivo, definidos como atributos ou no style próprio do elemento. Se o seu SVG define o traçado via uma classe CSS externa que o navegador não consegue resolver dentro da pré-visualização isolada desta ferramenta, ou via um bloco <style> que referencia classes, o estilo computado pode não ser resolvido corretamente — tente definir stroke e stroke-width como atributos diretos na forma.
Quando devo converter traçados em preenchimentos, e quando devo manter os traçados?
Se você ainda está no processo de design, mantenha os traçados — stroke-width continua sendo um único número editável, o que se perde após a conversão. Se você vai exportar para um pipeline que lida mal com traçados (geradores de fontes de ícones, certos motores de jogos ou exportadores de PDF), converta como etapa final da exportação e mantenha o arquivo original com traçado como sua fonte editável, já que a conversão é de mão única.
Converter deixa o arquivo SVG maior?
Normalmente sim — uma curva com traçado definida por poucos pontos de controle vira um contorno preenchido feito de centenas de segmentos de linha amostrados, então os dados do caminho crescem substancialmente. Para ícones isso raramente importa na prática, mas se o tamanho for uma preocupação, passe a saída convertida por um otimizador de SVG depois para reduzir a precisão das coordenadas.
O stroke-opacity é transferido para o preenchimento convertido?
Não — o caminho convertido usa a cor do traçado como seu preenchimento, mas com opacidade total; um valor de stroke-opacity na forma original é descartado. Se precisar manter a transparência, adicione fill-opacity com o mesmo valor manualmente ao caminho convertido depois de copiar o resultado.