Elysia Tools

Explore ferramentas, exemplos, explicações visuais e guias temáticos em um espaço claro.

Categorias populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegação

Design

Caminhante de comprimento de dados de caminho SVG

· Última atualização：2026-09-04

Percorra um caminho SVG comando a comando (M/L/H/V/C/S/Q/T/A/Z) — comprimentos de arco por segmento, distâncias cumulativas de stroke-dashoffset, caixas delimitadoras por subcaminho, vetores de controle cúbicos, resolução de flags de arco e alinhamento caminho-vs-viewBox.

Detalhes

O que esta ferramenta ajuda você a fazer

Cole qualquer atributo d de SVG e o caminhante tokeniza o fluxo completo de comandos — M m L l H h V v C c S s Q q T t A a Z z, repetições implícitas, flags de arco compactas como "0 1150 30" — e reconstrói cada segmento em coordenadas absolutas. Cada segmento recebe um comprimento de arco preciso: fórmulas exatas para retas, quadratura de Simpson adaptativa (tolerância relativa 1e-9) para as integrais de velocidade de Bézier cúbicas/quadráticas e arcos elípticos, e extremos analíticos (raízes da derivada) para caixas justas em vez de amostragem. A tabela de comandos mostra a distância inicial/final ao longo do caminho, então qualquer animação stroke-dasharray/stroke-dashoffset pode mirar na fronteira exata de um comando, com trechos prontos para copiar em unidades de usuário brutas e na forma normalizada pathLength="1". Comandos S e T resolvem seus controles refletidos, mostrando o campo vetorial real do renderizador; comandos A são resolvidos pela parametrização extremos→centro do SVG 2, relatando centro, θ1, Δθ e aplicando a regra de escalonamento de raios quando a corda excede 2·rx/2·ry. Um viewBox opcional recebe uma auditoria de alinhamento: transbordamento, margens, deslocamento de centralização e um viewBox justo sugerido.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

Escrito pela equipe Elysia Tools

Guia de uso da ferramenta

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Categoria
Design
Tipos de entrada
textarea, text, number
Tipo de saída
html
Cobertura de exemplos
4
API pronta
Sim

Visão geral

Analise e percorra qualquer atributo de caminho SVG (d) comando a comando para obter comprimentos de arco exatos, distâncias cumulativas de stroke-dashoffset, caixas delimitadoras analíticas e auditoria de alinhamento com viewBox.

Quando usar

  • Ao criar animações precisas de traçado SVG com stroke-dasharray e stroke-dashoffset em CSS ou JavaScript.
  • Ao inspecionar coordenadas absolutas, pontos de controle refletidos de curvas S/T e parametrização de arcos elípticos A.
  • Ao diagnosticar problemas de corte, transbordamento ou cálculo de bounding box em relação ao viewBox do SVG.

Como funciona

  1. 1Tokeniza a string do atributo d, normalizando comandos absolutos e relativos (M, L, H, V, C, S, Q, T, A, Z) e resolvendo flags compactas.
  2. 2Calcula o comprimento exato de cada segmento por integração numérica adaptativa de Simpson para curvas de Bézier/arcos e fórmulas diretas para retas.
  3. 3Determina extremos analíticos para gerar o bounding box exato e calcula as distâncias acumuladas do traçado.
  4. 4Compara as dimensões totais com o viewBox fornecido e simula a porcentagem de traçado desenhado na pré-visualização.

Casos de uso

  • Cálculo de pontos de parada (offsets) exatos para animações sequenciais de linha em infográficos ou ícones interativos.
  • Inspeção e depuração de arcos SVG complexos para verificar centro, ângulos (θ1, Δθ) e flags de raio.
  • Ajuste e otimização de viewBox para eliminar espaços vazios ao redor de ícones vetoriais.

Comparar alternativas

  • Analisa a marcacao SVG, remove elementos redundantes, reduz tamanho, compara antes e depois e exporta arquivos limpos

  • Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas

  • Gera QR artísticos com cores de marca, degradês, módulos arredondados ou em pontos e logotipo central — com a decomposição das penalidades de máscara ISO, me…

Para quem

Ideal para

  • Analisar dados de imagem no navegador.
  • O fluxo de trabalho «Cubic S-curve with a reflected S handle», em uma única passagem.
  • Tarefas repetíveis com dados de imagem e as mesmas configurações sempre.

Pouco adequado para

  • Trabalhos em lote totalmente automatizados — esta página foi feita para uso interativo; para scripts, use o endpoint da API.
  • Conteúdo em outros formatos — esta ferramenta espera dados de imagem.

Casos extremos e erros frequentes

  • Arquivos muito grandes

    Arquivos grandes demoram mais e podem atingir os limites de memória do navegador — tente primeiro com uma amostra menor.

  • Ignorar a verificação da saída

    Compare as primeiras linhas ou páginas da saída com a entrada antes de usá-la em produção.

  • Arquivos de exportadores incomuns

    Alguns arquivos usam variantes de formato que não convertem de forma limpa — se a saída parecer errada, salve o arquivo novamente no aplicativo que o criou e tente de novo.

Exemplos

1. Inspeção de curva Bézier cúbica com comando S

Desenvolvedor Front-end

Contexto

Criando uma animação de traçado contínuo em uma ilustração vetorial com curvas Bézier compostas.

Problema

Identificar o comprimento total exato e o ponto intermediário de transição entre o comando C e o comando S.

Como usar

Cole a string de dados do caminho no campo 'Dados do caminho', defina o viewBox como '0 0 200 200' e ajuste a fração desenhada para 50%.

pathData: "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
viewBox: "0 0 200 200"
drawPercent: 50

Resultado

Obtém o comprimento total de 282.0104 unidades, o ponto de transição exato na distância 141.0052 e os vetores de controle refletidos resolvidos.

2. Validação de arco elíptico e alinhamento de viewBox

Designer de Ícones / UI

Contexto

Exportando um ícone circular que utiliza comandos de arco compacto e fechamento z.

Problema

Verificar se o arco elíptico ultrapassa os limites do viewBox e confirmar a precisão das flags large-arc e sweep.

Como usar

Perguntas frequentes

Como a ferramenta calcula o comprimento de curvas de Bézier e arcos?

Utiliza quadratura adaptativa de Simpson com tolerância relativa de 1e-9 nas integrais de velocidade de curvas cúbicas, quadráticas e arcos elípticos.

A ferramenta aceita comandos SVG em formato relativo?

Sim, todos os comandos relativos (como m, l, c, a, h, v) são convertidos internamente para coordenadas absolutas mantendo o estado exato da caneta.

Como são calculados os pontos de controle de comandos S e T?

Os pontos de controle ausentes são calculados refletindo o último ponto de controle do comando cúbico ou quadrático anterior em relação ao ponto atual.

Para que serve o campo Fração desenhada (%)?

Ele simula visualmente a animação de stroke-dashoffset na pré-visualização, mostrando o traçado percorrido até a porcentagem escolhida.

O que a auditoria de viewBox verifica?

Avalia se o bounding box do caminho transborda o viewBox informado, calcula margens e sugere um viewBox justo e ajustado aos extremos.

Início
Ferramentas3201
Exemplos593
Visualizações465
Visualizadores de arquivos103
Temas233
Etiquetas333
Imagens, áudio e vídeo657

Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo

Matemática, datas e finanças644

Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças

Design e cor297

Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design

Texto e escrita209

Ferramentas de escrita, limpeza, formatação, extração e análise de texto

Desenvolvimento e Web193

Utilitários para desenvolvedores, rede, depuração web e automação

Conversão e codificação175

Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação

Triagem de fontes FLAC/WAV e entrega de evidências
Revisão e entrega de um componente de sorteio auto-hospedado
Revisão de lote de códigos Stripe e pré-verificação da importação
Revisão da seleção técnica de fotos e entrega de candidatas à edição
Estruturar uma captura de interface, revisar e entregar ao desenvolvimento

© 2026 Elysia Tools. Todos os direitos reservados.

DocumentaçãoPreçosSobreTermos de serviçoPolítica de privacidadeCookiesContato
Mídia

Exemplos SVG

Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG

Mídia

Amostras SVG

Gráficos vetoriais de amostra para o visualizador SVG

Visualização de dados

Exemplos D3.js Data Visualization

Exemplos abrangentes de visualização de dados D3.js incluindo gráficos, mapas, animações e visualizações interativas

Formatos de dados

Exemplos de XML

Exemplos de formato XML (eXtensible Markup Language) de estruturas simples a complexas

Design

Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)

Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis.

Media

Detector de progressão de acordes

Estima localmente os acordes de um áudio e reúne CSV, JSON, SVG e notas do método em um ZIP.

Media

Minificador e analisador SVG

Analisa a marcacao SVG, remove elementos redundantes, reduz tamanho, compara antes e depois e exporta arquivos limpos

Design

Prancha de desenho em perspectiva de um ponto

Desenhe prismas e linhas para um ponto de fuga móvel, aprenda por etapas e baixe PNG ou SVG localmente.

Insira o comando SVG no campo 'Dados do caminho' e preencha o campo 'ViewBox' com as dimensões de visualização pretendidas.

pathData: "M 100,100 h -50 a 50,50 0 1,1 50,-50 z"
viewBox: "0 0 100 100"
drawPercent: 75

Resultado

Gera a tabela detalhada com o segmento de arco de 235.6194 unidades, centro em (50,50) e confirmação de alinhamento perfeito com o viewBox.

Minificador e analisador SVG
Verificador de acessibilidade
Gerador de QR artístico com módulos estilizados e incorporação de logotipo