> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Images SVG dans Cytoscape.js : ajustement et marges

> Ajuste un dessin SVG dans les nœuds Cytoscape.js avec un exemple fonctionnel. Compare les espaces vides de la source, contain et cover, puis vérifie le chargement et les libellés.

Source: https://perfectvector.com/fr/blog/cytoscape-svg-node-artwork

Language: fr
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

Utilise une URL d’image SVG dans le style `background-image` du nœud, puis choisis l’ajustement adapté au dessin que tu veux montrer. Si l’emblème se charge mais paraît minuscule, examine l’espace vide de son viewport SVG avant d’agrandir le nœud du graphe. Si ses extrémités disparaissent, compare les proportions de l’image avec celles du nœud et vérifie le rognage.

Cytoscape.js [documente les arrière-plans SVG des nœuds](https://js.cytoscape.org/#style/background-image), notamment les ajustements `contain`, `cover` et `none`. Ce guide utilise un emblème original à un seul chemin pour distinguer les limites de la source du style du graphe. Garde le maître modifiable du dessin à côté de la configuration du graphe.

## Sépare l’image source du nœud du graphe

Il y a trois rectangles à examiner : les limites dessinées de l’illustration, le viewport de l’image SVG et le corps du nœud. Le [`viewBox` SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) définit le rectangle de coordonnées source projeté dans son viewport. Il peut inclure beaucoup plus d’espace que le dessin visible.

Notre source aux limites serrées mesure 120 × 60, avec un emblème corail allant de x=6 à x=114 et de y=6 à y=54. Son ouverture centrale fait partie du même chemin :

```svg
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg"
     width="120" height="60" viewBox="0 0 120 60">
  <path fill="#f36f59" fill-rule="evenodd"
    d="M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z"/>
</svg>
```

La variante avec marges ne change que les dimensions SVG extérieures et le `viewBox` :

```svg
<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="-40 -40 200 140">
```

Garde le même en-tête, le même chemin et la même balise de fermeture. Les deux fichiers dessinent des coordonnées de chemin identiques. Le second les entoure de davantage d’espace source vide. Cet espace est mis à l’échelle avec l’image : modifier l’ajustement de l’arrière-plan ne remplace donc pas de façon fiable le choix de limites source adaptées. Le [guide de la boîte englobante SVG](https://perfectvector.com/fr/blog/svg-bounding-box) aide lorsque le viewport du fichier et le dessin visible ne concordent pas.

## Exécute l’exemple à quatre cas

Nous avons testé Cytoscape.js [3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3) avec un bundle officiel pour navigateur, de version fixe, servi localement. Enregistre le [bundle de cette étiquette de version](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js) sous `cytoscape-3.34.3.min.js`, à côté de l’`example.html` ci-dessous. Sers le dossier en HTTP local, par exemple avec `python3 -m http.server 8000`, puis ouvre `http://localhost:8000/example.html`.

L’exemple encode le SVG original en URI de données. [`encodeURIComponent()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) échappe les caractères d’URI, y compris le `#` de notre couleur de fond. Les recommandations SVG de la bibliothèque préconisent cet encodage plutôt que Base64, ainsi que l’en-tête XML montré ici. Il s’agit d’un emblème autonome, sans police ni image externe.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG node fit comparison</title>
<style>
  body { font: 16px system-ui; margin: 20px; }
  #cy { width: 1100px; height: 250px; border: 1px solid #ddd; }
  #status { white-space: pre-wrap; }
</style>
<div id="cy"></div>
<pre id="status">Loading images</pre>
<script src="cytoscape-3.34.3.min.js"></script>
<script>
const header = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>';
const path = 'M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z';
function artwork(padded) {
  const width = padded ? 200 : 120;
  const height = padded ? 140 : 60;
  const viewBox = padded ? '-40 -40 200 140' : '0 0 120 60';
  return header + `<svg xmlns="http://www.w3.org/2000/svg"
    width="${width}" height="${height}" viewBox="${viewBox}">
    <path fill="#f36f59" fill-rule="evenodd" d="${path}"/></svg>`;
}
const cases = [
  ['tight contain', false, 'contain'],
  ['tight cover', false, 'cover'],
  ['padded contain', true, 'contain'],
  ['padded cover', true, 'cover']
].map(([label, padded, fit]) => ({
  label, fit,
  image: 'data:image/svg+xml;utf8,' + encodeURIComponent(artwork(padded))
}));
Promise.all(cases.map(item => new Promise((resolve, reject) => {
  const image = new Image();
  image.onload = () => resolve({
    label: item.label,
    width: image.naturalWidth,
    height: image.naturalHeight
  });
  image.onerror = () => reject(new Error(item.label + ' failed to load'));
  image.src = item.image;
}))).then(loaded => {
  cytoscape({
    container: document.getElementById('cy'),
    elements: cases.map((item, index) => ({
      data: { id: 'n' + index, ...item },
      position: { x: 110 + index * 260, y: 95 }
    })),
    style: [{ selector: 'node', style: {
      width: 120, height: 80, padding: 0, shape: 'rectangle',
      'background-color': '#f1f3f5',
      'background-image': 'data(image)',
      'background-fit': node => node.data('fit'),
      'background-width': 'auto', 'background-height': 'auto',
      'background-width-relative-to': 'inner',
      'background-height-relative-to': 'inner',
      'background-position-x': '50%', 'background-position-y': '50%',
      'background-repeat': 'no-repeat', 'background-clip': 'node',
      'border-width': 1, 'border-color': '#222',
      label: 'data(label)', 'text-valign': 'bottom',
      'text-halign': 'center', 'text-margin-y': 10, 'font-size': 12
    }}],
    layout: { name: 'preset', fit: false },
    zoom: 1, pan: { x: 0, y: 0 },
    userZoomingEnabled: false, userPanningEnabled: false,
    boxSelectionEnabled: false
  });
  document.getElementById('status').textContent =
    'Cytoscape ' + cytoscape.version + '\n' +
    JSON.stringify(loaded, null, 2);
}).catch(error => {
  document.getElementById('status').textContent = error.message;
});
</script>
</html>
```

Le bloc d’état indique les dimensions des images préchargées avant l’initialisation du graphe. `naturalWidth` lit la largeur intrinsèque de l’image, corrigée de la densité, en pixels CSS, comme le décrit [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth). Dans ce fichier de test, les images aux limites serrées indiquaient 120 × 60 et les images avec marges 200 × 140. Ce sont des dimensions d’image, pas des mesures du chemin corail.

## Compare les changements à taille de nœud identique

Les quatre nœuds du modèle mesurent 120 × 80 avec une marge interne de nœud nulle. Nous avons examiné le fichier de test original dans Chrome à un zoom du graphe de 1 et 1.5. Le style du nœud restait à 120 × 80 ; ses dimensions rendues rapportées devenaient 180 × 120 à 1.5. C’était une comparaison statique dans ce navigateur, pas un banc d’essai de compatibilité ni de performances du zoom.

| Source et ajustement     | Apparence observée dans ce fichier de test                                                                     |
| ------------------------ | -------------------------------------------------------------------------------------------------------------- |
| Limites serrées, contain | Emblème complet, avec ses extrémités pointues visibles                                                         |
| Limites serrées, cover   | Emblème plus grand dont les pointes gauche et droite sont rognées au niveau du nœud                            |
| Avec marges, contain     | Emblème plus petit entouré d’un espace vide important                                                          |
| Avec marges, cover       | Légèrement plus grand qu’avec marges et contain, mais toujours bien plus petit que les cas aux limites serrées |

La source aux limites serrées a un rapport d’image de 2:1, contre 1.5:1 pour le nœud. Ajuster l’image complète de 120 × 60 à l’intérieur de 120 × 80 laisse de l’espace vertical. Couvrir ce nœud agrandit l’image à 160 × 80 avant rognage : ses extrémités horizontales dépassent donc le corps.

Pour la source avec marges, le rectangle d’image disponible comprend 40 unités d’espace supplémentaire de chaque côté. Avec contain, son échelle est limitée par 80/140 plutôt que 120/200. L’emblème inchangé de 108 unités de large occupe donc environ 62 unités du modèle. Ce chiffre est un calcul à partir des dimensions déclarées, pas une mesure en pixels de la capture.

**Limites source et ajustement**

![Illustration d’un petit emblème avec de larges espaces vides dans la source, d’un emblème complet plus grand dans un cadre de nœud et d’un emblème dont les pointes sont rognées par un cadre plus étroit.](https://perfectvector.com/blog/cytoscape-svg-node-artwork/source-bounds-fit.webp)

*Illustration : les espaces vides de la source et l’ajustement peuvent changer le dessin visible indépendamment. Ce schéma conceptuel n’est ni une capture de Cytoscape ni un résultat de conversion.*

## Choisis l’ajustement après avoir examiné les limites du dessin

Commence avec la source aux limites serrées et contain lorsque l’emblème complet compte. Garde suffisamment de marge source pour tout contour ou effet qui doit rester visible. Resserrer excessivement un viewport peut rogner des parties légitimes du dessin ; ce n’est pas une consigne de supprimer toutes les marges.

Utilise cover lorsque le dessin autorise le rognage des bords. Dans notre exemple, il masque les pointes : c’est donc un mauvais choix si ces pointes permettent de reconnaître l’emblème. Un nœud plus large peut modifier le rapport d’ajustement et révéler les pointes, mais il change aussi la disposition du graphe. Agrandir proportionnellement les deux dimensions conserve le même rognage. Décide de la contrainte que tu veux modifier.

Garde `background-width` et `background-height` à `auto` pour cette comparaison. Des valeurs explicites peuvent remplacer les dimensions d’image utilisées pour l’ajustement. Le `padding` du nœud est une autre entrée distincte ; la bibliothèque documente si le dimensionnement de l’arrière-plan l’inclut ou utilise le corps intérieur. Consulte la [référence de background-image](https://js.cytoscape.org/#style/background-image) avant d’ajouter ces réglages. Notre fichier de test sans marge interne isole d’abord l’espace vide de la source.

Pour les décisions meet, slice et d’alignement au niveau SVG, poursuis avec le [guide de preserveAspectRatio](https://perfectvector.com/fr/blog/svg-preserveaspectratio). Modifier l’ajustement interne d’un SVG et modifier celui de l’arrière-plan dans Cytoscape sont des opérations distinctes.

## Diagnostique le chargement avant le rognage

Si l’état signale un échec du chargement, passer de contain à cover n’est pas l’étape suivante. Ouvre la ressource image seule, vérifie son URL et ses dimensions déclarées, puis réduis-la à l’emblème autonome uniquement composé de chemins ci-dessus. Pour une URI de données, encode toute la chaîne SVG au lieu de concaténer du balisage brut ou une valeur de couleur non échappée.

Un SVG utilisé comme image subit des restrictions différentes d’un SVG ouvert comme document. Le [guide de SVG en tant qu’image de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) décrit les restrictions sur les scripts et les ressources externes dans les contextes d’image. Un fichier graphique qui dépend d’une feuille de style ou d’une police externe nécessite un test de livraison distinct. Cet exemple évite ces dépendances et place les libellés du graphe hors du SVG.

Si l’image se charge, examine l’ajustement et le rognage du nœud avec une forme manifestement large. Teste ensuite ton dessin réel à la taille du nœud et dans les environnements de navigateur pris en charge par ton application. La documentation de Cytoscape signale des considérations SVG propres aux navigateurs ; cette observation dans Chrome ne les résout pas pour Firefox ni pour tous les autres moteurs.

## Garde les libellés et le dessin modifiable séparés

L’exemple utilise `label: 'data(label)'` pour les libellés du graphe et ne contient aucun texte SVG. Tu peux changer ce texte sans reconstruire l’emblème. Le chemin SVG reste dans son maître source, tandis que le graphe gère l’identité, la position et les relations des nœuds.

Le fichier de test examiné dessinait sur des surfaces Canvas. Y voir un arrière-plan SVG ne transforme pas ses chemins internes en éléments de graphe modifiables séparément. Garde le maître lorsque tu dois changer l’ouverture, la silhouette ou les couleurs. L’export du graphe est un processus distinct qui nécessite de choisir son exportateur et de tester la livraison ; ce guide ne promet pas qu’un graphe exporté conserve des chemins d’emblème modifiables. Le [guide des illustrations Graphviz](https://perfectvector.com/fr/blog/graphviz-svg-node-images) explore le transfert par référence d’image d’un autre moteur de diagrammes.

Si ton emblème personnalisé n’existe qu’en PNG ou JPG, [convertis cette source en illustration vectorielle](https://perfectvector.com/fr/image-to-vector), puis examine la silhouette, l’ouverture et les petits détails avant de définir ses limites SVG. PerfectVector peut aider à récupérer une géométrie source modifiable. Le style de l’arrière-plan, les libellés des nœuds et l’export du graphe restent des étapes distinctes. Un SVG existant adapté peut passer directement aux vérifications d’ajustement.

## Questions fréquentes

**Pourquoi l’image SVG de mon nœud est-elle minuscule même avec cover ?**
L’image source peut contenir beaucoup d’espace vide dans son viewport autour du chemin. Compare une copie aux limites serrées aux mêmes dimensions de nœud avant de modifier la disposition du graphe.

**Faut-il utiliser contain ou cover pour un emblème personnalisé ?**
Choisis contain lorsque l’emblème complet compte. Choisis cover uniquement si le rognage des bords observé convient à ton dessin, et vérifie-le avec ta propre source et la forme de ton nœud.

**Un arrière-plan de nœud SVG crée-t-il des chemins de graphe modifiables ?**
Le fichier de test Canvas utilise le SVG comme image de remplissage. Garde le maître graphique pour modifier les chemins ; ses contours internes ne sont pas des nœuds ou des arêtes distincts du graphe dans cet exemple.

**Puis-je mettre des libellés dans le SVG ?**
Cet exemple garde les libellés dans les données du graphe et utilise un dessin uniquement composé de chemins. Le texte SVG, les polices et les dépendances du contexte d’image nécessitent leurs propres vérifications de navigateur et de livraison.

## Sources

1. [Cytoscape.js — Image d’arrière-plan](https://js.cytoscape.org/#style/background-image) — Style par URL d’image, ajustement, remplacements de dimensionnement, références aux marges internes et considérations SVG.
2. [Cytoscape.js — Version v3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3) — Version fixe utilisée pour le fichier de test original.
3. [Cytoscape.js — Bundle navigateur v3.34.3](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js) — Implémentation officielle étiquetée servie localement pour le test du navigateur.
4. [MDN — viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — Rectangle de coordonnées source et projection dans le viewport.
5. [MDN — encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — Échappement du composant d’URI de données SVG.
6. [MDN — naturalWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) — Dimensions des images chargées, distinctes des limites du chemin.
7. [MDN — SVG en tant qu’image](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Restrictions du contexte d’image et vérification des dépendances.

Si ton emblème est au départ matriciel, [crée un maître SVG modifiable](https://perfectvector.com/fr/image-to-vector), examine ses contours et ses limites source, puis compare contain et cover dans ta propre disposition de nœuds.

## Explore

- [Read the HTML article](https://perfectvector.com/fr/blog/cytoscape-svg-node-artwork)
- [Marqueurs SVG Leaflet : aligne la pointe avec iconAnchor](https://perfectvector.com/fr/blog/leaflet-svg-marker-anchor.md)
- [Mesurer un tracé SVG sans confondre les échelles](https://perfectvector.com/fr/blog/measure-svg-path-length.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)