search

Found

info Visão geral

Converte o atributo d do SVG em arrays de coordenadas equiespaçadas como JSON. Visualize como as curvas se decompõem em pontos e entregue coordenadas a ambientes sem API DOM SVG (Arduino, plotters, Excel, firmware embarcado) ou use como material de entrada para tarefas com LLM.

📘 Como usar

  1. Abra seu SVG em um editor de texto, copie o atributo d do elemento path e cole no campo de entrada.
  2. Ajuste a quantidade de pontos de amostragem (2-1000) e a precisão decimal (0-6) para gerar o JSON.
  3. Verifique as posições de amostragem na pré-visualização e copie o JSON para usar no ambiente de destino.

Amostrador de Coordenadas de Caminho SVG

100
2
Insira o caminho SVG
Copiado!

grid_view Relacionados

Article

Amostrador de Coordenadas de Caminho SVG | Decomponha Curvas em Arrays JSON de Pontos

Converte o atributo d de um elemento <path> SVG em pontos de coordenadas amostrados uniformemente e exporta o resultado como JSON. A amostragem é renderizada visualmente para que você veja exatamente como as curvas se decompõem em pontos — projetado para aprender a geometria de caminhos SVG e para passar coordenadas a ambientes sem acesso à API DOM SVG.

💡 Visão Geral da Ferramenta

  • Amostragem visual: Os pontos de amostragem aparecem na pré-visualização em tempo real, mostrando como a densidade varia entre trechos retos e curvas fechadas.
  • Dois formatos JSON: Escolha entre array [x, y] ou objeto {x, y} conforme a API receptora.
  • Quantidade de pontos ajustável: De 2 a 1000 pontos. Mais pontos resultam em maior fidelidade da curva; menos pontos comprimem os dados.
  • Controle de precisão decimal: Defina 0 a 6 casas decimais no JSON de saída para atender requisitos de precisão a jusante ou reduzir o tamanho do arquivo (a pré-visualização não é afetada — variações sub-pixel são invisíveis).
  • Apenas no navegador: Os dados do caminho nunca saem do seu navegador. Nada é enviado a nenhum servidor.

🧐 Perguntas Frequentes

Q. Desenvolvedores JavaScript realmente precisam desta ferramenta?

A. Na maioria dos ambientes JS basta chamar SVGPathElement.getPointAtLength() diretamente em cinco linhas de código e dispensar a ferramenta. Este conversor foi feito para situações em que a API DOM SVG não está disponível: firmware embarcado, sketches Arduino, geradores G-code para plotters, fluxos do Excel/Power Automate, scripts Python, e como apoio didático para visualizar como um caminho SVG se decompõe em pontos discretos.

Q. Posso usar para preparar entrada para LLMs/IA?

A. Sim. Ao pedir ao ChatGPT ou Claude para animar ou analisar uma curva, entregar ao modelo um array JSON de coordenadas (em vez da string crua do caminho) elimina o esforço de interpretar a gramática do path e torna a requisição mais confiável.

Q. De onde vem o atributo d do SVG?

A. Exporte qualquer forma vetorial do Adobe Illustrator, Figma ou Inkscape como SVG e abra o arquivo em um editor de texto. Você encontrará um elemento <path d="M10 10..." /> — copie o conteúdo de d="..." e cole nesta ferramenta.

📚 Como Funciona a Amostragem de Caminhos SVG

Esta ferramenta utiliza os métodos SVGPathElement.getTotalLength() e getPointAtLength(distance) da API DOM SVG do navegador. O primeiro retorna o comprimento total do caminho; o segundo retorna as coordenadas X/Y em qualquer distância ao longo do caminho. Juntos permitem amostrar qualquer ponto de um traçado, incluindo curvas de Bézier complexas, sem resolver as equações paramétricas manualmente.