Calcolare il riquadro di delimitazione di un tracciato SVG
Incolli il tracciato M10 20 C30 0 50 40 70 20 L90 60 e ottenga il riquadro reale: x da 10 a 90, y da 14.226497308104 a 60, quindi 80 di larghezza. Viene trovato il vero punto più basso della curva. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Percorso
- M10 20 C30 0 50 40 70 20 L90 60
- Min x
- 10
- Min y
- 14,2264973081
- Max x
- 90
- Max y
- 60
Questo calcolatore legge i comandi di coordinate di un tracciato SVG e restituisce i valori minimi e massimi di x e y, oltre a larghezza e altezza. Gestisce segmenti, curve di Bézier, archi ellittici, comandi relativi, controlli raccordati e sottotracciati chiusi. Poiché una curva può superare i propri estremi e i punti di controllo non giacciono necessariamente su di essa, il calcolo determina gli estremi geometrici anziché raccogliere soltanto i numeri presenti nel sorgente.
Calcoli i limiti dai soli dati del tracciato
Incolli nel campo il valore dell’attributo <code>d</code> di un tracciato SVG. Il calcolatore accetta i comandi standard di spostamento, linea, orizzontale, verticale, Bézier cubica e quadratica, varianti raccordate, arco ellittico e chiusura, sia assoluti sia relativi. Non applica trasformazioni dell’elemento o dei gruppi e non amplia il risultato per tratto, estremità, giunzioni, marcatori, filtri o ritagli.
Misura quindi esattamente la geometria centrale codificata. Un tracciato vuoto genera un errore, mentre un solo punto di spostamento produce correttamente larghezza e altezza pari a zero.
Perché le curve richiedono estremi analitici
Un riquadro affidabile non si ottiene considerando solo le estremità dei segmenti. Una Bézier può raggiungere il minimo o il massimo tra inizio e fine, mentre un punto di controllo esterno può non essere mai toccato. Il calcolatore risolve la derivata di ogni coordinata e valuta le radici interne.
Per gli archi converte la forma SVG nella rappresentazione tramite centro, considera ridimensionamento dei raggi e rotazione, ricava gli angoli estremi e include solo quelli compresi nella scansione scelta. I comandi raccordati riflettono il controllo precedente, le coordinate relative usano il punto corrente e la chiusura include la linea di ritorno. Il metodo fornisce limiti geometrici senza campionamento, evitando di perdere picchi stretti fra posizioni arbitrarie.
Usi il risultato in layout e strumenti SVG
Il rettangolo restituito aiuta a creare una viewBox, centrare grafica, normalizzare icone, confrontare estensioni, collocare annotazioni o verificare geometria generata. Se è visibile un tratto, aggiunga poi il margine richiesto da spessore e giunzioni; gestisca le trasformazioni con il procedimento matriciale appropriato. Il parser accetta virgole o spazi, segni adiacenti, decimali e notazione scientifica.
Rifiuta comandi sconosciuti, gruppi incompleti, testo malformato, flag d’arco non validi e raggi negativi.
Casi d'uso
Generi una viewBox aderente
Converta coordinate minime, larghezza e altezza in una viewBox che incornici la geometria.
Normalizzi una raccolta di icone
Misuri i tracciati in modo uniforme prima di traslare o scalare le icone in un sistema comune.
Convalidi geometria SVG generata
Verifichi che curve e archi prodotti via codice restino entro l’area prevista.
Domande frequenti
Curve e archi sono inclusi con precisione?
Sì. Il calcolo valuta gli estremi analitici delle Bézier e degli archi ellittici ruotati, senza campionamento.
È incluso lo spessore del tratto?
No. Il risultato copre solo la geometria, senza tratto, estremità, giunzioni, marcatori, filtri o effetti.
Vengono applicate le trasformazioni SVG?
No. Le coordinate sono misurate nel sistema del tracciato; le trasformazioni esterne non fanno parte dell’input.
Che cosa accade con un tracciato vuoto?
La richiesta fallisce per input non valido, poiché un tracciato vuoto non possiede un riquadro.
Perché non basta prendere il numero più grande e il più piccolo scritti nel tracciato?
Perché una curva può spingersi oltre i suoi punti di inizio e fine, e un punto di controllo può stare fuori dalla curva senza mai essere toccato. Il calcolatore trova dove ogni curva cambia davvero direzione, così il riquadro coincide con la forma disegnata.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
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)Esempio di richiesta
{
"path": "M10 20 C30 0 50 40 70 20 L90 60"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_path_bounding_box",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
timeout_sec | 30 |
max_crawl_pages | 25 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Calcoli i limiti dai soli dati del tracciato
Restituisce <code>min_x</code>, <code>min_y</code>, <code>max_x</code>, <code>max_y</code>, larghezza e altezza nel sistema di coordinate del tracciato.
Usi il risultato in layout e strumenti SVG
Per creare una viewBox corrispondente, usi <code>min_x min_y width height</code> in quest’ordine. Il risultato è deterministico, non richiede rete o renderer esterni e browser e API condividono lo stesso calcolo puro.
Domande tecniche
Quanto costa una richiesta API?
Ogni richiesta API costa $0.002. La versione per browser viene eseguita localmente senza costi.