ForHosting KIT · Veille et lecture de sites web

Calculer la boîte englobante d’un chemin SVG

Ce calculateur lit les commandes de coordonnées d’un chemin SVG et renvoie les valeurs x et y minimales et maximales, ainsi que la largeur et la hauteur.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Il traite les segments, les courbes de Bézier, les arcs elliptiques, les commandes relatives, les contrôles lissés et les sous-chemins fermés. Une courbe pouvant dépasser ses extrémités et ses points de contrôle ne se trouvant pas nécessairement sur elle, le calcul recherche les extrema géométriques au lieu de relever simplement les nombres de la source.

Calculez les limites à partir du seul chemin

Collez dans le champ la valeur de l’attribut <code>d</code> d’un chemin SVG. Le calculateur accepte les commandes standard de déplacement, ligne, horizontale, verticale, Bézier cubique et quadratique, variantes lissées, arc elliptique et fermeture, en formes absolues ou relatives. Il renvoie <code>min_x</code>, <code>min_y</code>, <code>max_x</code>, <code>max_y</code>, la largeur et la hauteur dans le repère propre au chemin. Il n’applique pas les transformations de l’élément ou de ses groupes et n’ajoute aucune marge pour le trait, les extrémités, les jointures, marqueurs, filtres ou découpages. La géométrie médiane encodée est donc mesurée exactement. Un chemin vide est refusé, tandis qu’un unique point de déplacement donne légitimement une largeur et une hauteur nulles.

Pourquoi les courbes exigent un calcul analytique

Une boîte fiable ne peut pas provenir des seules extrémités. Une Bézier peut atteindre son minimum ou son maximum entre son départ et son arrivée, tandis qu’un point de contrôle extérieur peut ne jamais être touché. Le calculateur résout la dérivée de chaque coordonnée et évalue les racines intérieures. Pour les arcs, il convertit la notation SVG en représentation centrale, tient compte du redimensionnement des rayons et de la rotation, détermine les angles extrêmes et ne retient que ceux du balayage choisi. Les commandes lissées réfléchissent le contrôle précédent, les coordonnées relatives partent du point courant et la fermeture ajoute le segment de retour. Cette méthode fournit des limites géométriques sans échantillonnage et ne manque aucun pic étroit.

Exploitez le résultat dans vos outils SVG

Le rectangle obtenu permet de créer une viewBox, centrer une illustration, normaliser des icônes, comparer des étendues, placer des annotations ou contrôler une géométrie générée. Pour une viewBox correspondante, utilisez <code>min_x min_y width height</code> dans cet ordre. Ajoutez ensuite la marge nécessaire si un trait est visible et traitez les transformations avec une méthode matricielle adaptée. L’analyseur accepte virgules ou espaces, signes adjacents, décimales et notation scientifique. Il refuse les commandes inconnues, groupes incomplets, textes mal formés, indicateurs d’arc incorrects et rayons négatifs. Le résultat est déterministe, sans réseau ni moteur de rendu externe, et le navigateur comme l’API utilisent le même calcul pur.

Cas d’usage

Créez une viewBox ajustée

Transformez les coordonnées minimales, la largeur et la hauteur en une viewBox ajustée à la géométrie.

Normalisez une collection d’icônes

Mesurez les chemins uniformément avant de déplacer ou redimensionner les icônes dans un repère commun.

Validez une géométrie SVG générée

Vérifiez que les courbes et les arcs produits par code restent dans le canevas prévu.

Questions fréquentes

Les courbes et les arcs sont-ils calculés précisément ?

Oui. Les extrema analytiques des Bézier et des arcs elliptiques tournés sont évalués sans échantillonnage.

La largeur du trait est-elle incluse ?

Non. Le résultat couvre uniquement la géométrie, sans trait, extrémités, jointures, marqueurs, filtres ou effets.

Les transformations SVG sont-elles appliquées ?

Non. Les coordonnées sont mesurées dans le repère du chemin; les transformations externes ne font pas partie de l’entrée.

Que se passe-t-il avec un chemin vide ?

La requête échoue pour entrée incorrecte, car un chemin vide ne possède aucune boîte englobante.

Quel est le prix d’une requête API ?

Chaque requête API coûte $0.002. La version pour navigateur s’exécute localement sans frais.

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

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

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre 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)

Exemple de requête

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

Exemple de réponse

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

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

`timeout_sec`	30
`max_crawl_pages`	25

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Consulter la documentation complète du KIT →