ForHosting KIT · Monitorar sites

Calcular a caixa delimitadora de um caminho SVG

Esta calculadora lê os comandos de coordenadas de um caminho SVG e retorna os valores mínimos e máximos de x e y, além da largura e da altura.

● BetaGrátis · no seu navegador

Executar grátis Ver a API

Use pelo WebAPIE-mailTelegramApp em breve

Ela processa segmentos retos, curvas de Bézier, arcos elípticos, comandos relativos, controles suaves e subcaminhos fechados. Como curvas podem ultrapassar seus pontos finais e os pontos de controle nem sempre pertencem à curva, o cálculo avalia os extremos geométricos em vez de apenas coletar os números do código-fonte.

Calcule os limites somente com os dados do caminho

Cole no campo o valor do atributo <code>d</code> de um caminho SVG. A calculadora aceita os comandos padrão de movimento, linha, horizontal, vertical, Bézier cúbica e quadrática, variantes suaves, arco elíptico e fechamento, em formas absolutas e relativas. O resultado traz <code>min_x</code>, <code>min_y</code>, <code>max_x</code>, <code>max_y</code>, largura e altura no sistema de coordenadas do próprio caminho. Transformações do elemento ou de grupos não são aplicadas, e o resultado não é ampliado por traços, terminações, junções, marcadores, filtros ou recortes. Portanto, a ferramenta mede a geometria central codificada. Um caminho vazio gera erro; um único ponto de movimento produz legitimamente largura e altura iguais a zero.

Por que curvas exigem extremos analíticos

Uma caixa confiável não pode considerar apenas as extremidades dos segmentos. Uma curva de Bézier pode atingir seu menor ou maior valor entre o início e o fim, enquanto um ponto de controle pode ficar fora sem ser tocado. A calculadora resolve a derivada de cada coordenada e avalia as raízes internas. Nos arcos, converte a forma SVG para a representação pelo centro, considera ajuste dos raios e rotação, deriva os ângulos extremos e inclui somente os que pertencem à varredura escolhida. Comandos suaves refletem o controle anterior, coordenadas relativas usam o ponto atual e o fechamento inclui a linha de retorno. Esse método calcula limites geométricos sem amostragem, evitando que um pico estreito desapareça entre posições arbitrárias.

Use o resultado em layouts e ferramentas SVG

A caixa retornada ajuda a criar um viewBox, centralizar arte, normalizar ícones, comparar extensões, posicionar anotações ou validar geometria gerada. Para montar um viewBox, use <code>min_x min_y width height</code> nessa ordem. Se houver traço visível, acrescente depois a margem exigida pela espessura e pelas junções; trate transformações com o procedimento matricial apropriado. O analisador aceita vírgulas ou espaços, sinais adjacentes, decimais e notação científica. Ele rejeita comandos desconhecidos, grupos incompletos, texto malformado, flags de arco inválidas e raios negativos. O resultado é determinístico, não usa rede nem renderizador externo e compartilha o mesmo cálculo puro entre navegador e API.

Casos de uso

Gere um viewBox ajustado

Transforme coordenadas mínimas, largura e altura em um viewBox que enquadre a geometria.

Normalize uma coleção de ícones

Meça os caminhos de forma consistente antes de mover ou dimensionar ícones em um sistema comum.

Valide geometria SVG gerada

Confira se curvas e arcos produzidos por código permanecem dentro da tela planejada.

Perguntas frequentes

A caixa inclui curvas e arcos com precisão?

Sim. A ferramenta avalia extremos analíticos de curvas de Bézier e arcos elípticos rotacionados.

A espessura do traço está incluída?

Não. O resultado cobre somente a geometria, sem traço, terminações, junções, marcadores, filtros ou efeitos.

As transformações SVG são aplicadas?

Não. As coordenadas são medidas no sistema do caminho; transformações do elemento e dos ancestrais ficam fora da entrada.

O que acontece com um caminho vazio?

A solicitação falha como entrada inválida, pois dados vazios não possuem caixa delimitadora.

Quanto custa a solicitação pela API?

Cada solicitação pela API custa US$ 0,002. A versão do navegador é executada localmente de forma gratuita.

Para desenvolvedores — acesso via API

Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.

Endpoint

POSThttps://api.kit.forhosting.com/web/svg-path-bounding-box

Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.

Chame do seu código

curl -X POST https://api.kit.forhosting.com/web/svg-path-bounding-box \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"path":"M10 20 C30 0 50 40 70 20 L90 60"}'

const res = await fetch("https://api.kit.forhosting.com/web/svg-path-bounding-box", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "path": "M10 20 C30 0 50 40 70 20 L90 60"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/svg-path-bounding-box",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "path": "M10 20 C30 0 50 40 70 20 L90 60"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-path-bounding-box", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"path":"M10 20 C30 0 50 40 70 20 L90 60"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"path":"M10 20 C30 0 50 40 70 20 L90 60"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-path-bounding-box", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Exemplo de requisição

{
  "path": "M10 20 C30 0 50 40 70 20 L90 60"
}

Exemplo de resposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.svg_path_bounding_box",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.

Preço

por chamadaUS$ 0,002

Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.

Limites

`timeout_sec`	30
`max_crawl_pages`	25

Erros

HTTP	Código	O que significa
`401`	`unauthorized`	Token ausente ou inválido. Confira o header Authorization.
`402`	`insufficient_balance`	Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo.
`404`	`unknown_type`	Esse tipo de tarefa não existe. Confira o campo type no catálogo.
`429`	`rate_limited`	Muitas requisições em pouco tempo. Espere um instante e tente de novo.

Ver a documentação completa do KIT →