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

# Imágenes SVG en nodos Cytoscape.js: ajuste y espacio

> Ajusta diseños SVG personalizados dentro de nodos Cytoscape.js con un ejemplo funcional. Compara el espacio vacío de origen, contain y cover, y revisa la carga y las etiquetas.

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

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

Usa la URL de una imagen SVG en el estilo `background-image` del nodo y elige el ajuste adecuado para el diseño que quieres mostrar. Si el emblema carga pero parece diminuto, revisa el espacio vacío en el viewport del SVG antes de ampliar el nodo del grafo. Si desaparecen sus extremos, compara las proporciones de la imagen con las del nodo y revisa el recorte.

Cytoscape.js [documenta los fondos SVG de los nodos](https://js.cytoscape.org/#style/background-image), incluidos los ajustes `contain`, `cover` y `none`. Esta guía usa un emblema original de un solo trazado para separar los límites del origen del estilo del grafo. Conserva el maestro editable del diseño junto a la configuración del grafo.

## Separa la imagen de origen del nodo del grafo

Debes revisar tres recuadros: los límites dibujados del diseño, el viewport de la imagen SVG y el cuerpo del nodo. El [`viewBox` de SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) define el rectángulo de coordenadas de origen que se asigna a su viewport. Puede incluir mucho más espacio que el dibujo visible.

Nuestro origen ajustado mide 120 × 60 y el emblema coral abarca de x=6 a x=114 y de y=6 a y=54. Su abertura central forma parte del mismo trazado:

```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 con margen solo cambia las dimensiones exteriores del SVG y el `viewBox`:

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

Conserva el mismo encabezado, trazado y etiqueta de cierre. Ambos archivos dibujan coordenadas de trazado idénticas. El segundo las rodea con más espacio de origen vacío. Ese espacio se escala con la imagen, así que cambiar el ajuste del fondo no sustituye de manera fiable a elegir límites de origen adecuados. La [guía del cuadro delimitador SVG](https://perfectvector.com/es/blog/svg-bounding-box) ayuda cuando el viewport del archivo y el diseño visible no coinciden.

## Ejecuta el ejemplo de cuatro casos

Probamos Cytoscape.js [3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3) con un paquete oficial de navegador de versión fija servido localmente. Guarda el [paquete de esa etiqueta de versión](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js) como `cytoscape-3.34.3.min.js` junto al `example.html` de abajo. Sirve la carpeta mediante HTTP local, por ejemplo con `python3 -m http.server 8000`, y abre `http://localhost:8000/example.html`.

El ejemplo codifica el SVG original en una URI de datos. [`encodeURIComponent()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) escapa caracteres de URI, incluido el `#` de nuestro color de relleno. La orientación sobre SVG de la biblioteca recomienda esta codificación en lugar de Base64, así como el encabezado XML que se muestra aquí. Es un emblema autónomo sin fuentes ni imágenes externas.

```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>
```

El bloque de estado informa de las dimensiones de las imágenes precargadas antes de inicializar el grafo. `naturalWidth` lee el ancho intrínseco de la imagen, corregido según la densidad, en píxeles CSS, como describe [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth). En este archivo de prueba, las imágenes ajustadas informaron 120 × 60 y las imágenes con margen, 200 × 140. Son dimensiones de imagen, no mediciones del trazado coral.

## Compara qué cambia con el mismo tamaño de nodo

Los cuatro nodos del modelo miden 120 × 80 y tienen un relleno interior de nodo de cero. Inspeccionamos el archivo de prueba original en Chrome con un zoom del grafo de 1 y 1.5. El estilo del nodo siguió en 120 × 80; sus dimensiones renderizadas informadas pasaron a 180 × 120 con 1.5. Fue una comparación estática en ese navegador, no una prueba de compatibilidad ni de rendimiento del zoom.

| Origen y ajuste     | Apariencia observada en este archivo de prueba                                       |
| ------------------- | ------------------------------------------------------------------------------------ |
| Ajustado, contain   | Emblema completo, con sus extremos puntiagudos visibles                              |
| Ajustado, cover     | Emblema más grande con las puntas izquierda y derecha recortadas por el nodo         |
| Con margen, contain | Emblema más pequeño rodeado de mucho espacio vacío                                   |
| Con margen, cover   | Algo mayor que con margen y contain, pero aún mucho menor que en los casos ajustados |

El origen ajustado tiene una relación de imagen de 2:1, mientras que el nodo es de 1.5:1. Encajar la imagen completa de 120 × 60 dentro de 120 × 80 deja espacio vertical. Cubrir ese nodo escala la imagen a 160 × 80 antes del recorte, por lo que sus extremos horizontales sobresalen del cuerpo.

Para el origen con margen, el rectángulo de imagen disponible incluye 40 unidades de espacio adicional a cada lado. Con contain, su escala queda limitada por 80/140 en lugar de 120/200. Por tanto, el emblema sin cambios de 108 unidades de ancho ocupa unas 62 unidades del modelo. Esa cifra es un cálculo a partir de las dimensiones declaradas, no una medición en píxeles de la captura.

**Límites de origen y ajuste**

![Ilustración de un emblema pequeño con mucho espacio vacío de origen, un emblema completo más grande dentro del marco de un nodo y un emblema cuyas puntas se recortan en un marco más estrecho.](https://perfectvector.com/blog/cytoscape-svg-node-artwork/source-bounds-fit.webp)

*Ilustración: el espacio vacío del origen y el ajuste pueden cambiar el diseño visible de forma independiente. Este diagrama conceptual no es una captura de Cytoscape ni un resultado de conversión.*

## Elige el ajuste después de revisar los límites del diseño

Empieza con el origen ajustado y contain cuando sea importante mostrar el emblema completo. Conserva suficiente margen de origen para cualquier trazo o efecto que deba seguir visible. Reducir demasiado un viewport puede recortar partes legítimas del diseño; no se trata de eliminar todos los márgenes.

Usa cover cuando el diseño admita recortar los bordes. En nuestro ejemplo oculta las puntas, así que es una mala opción si esas puntas identifican el emblema. Un nodo más ancho puede cambiar la proporción de ajuste y revelar las puntas, pero también cambia la distribución del grafo. Ampliar ambas dimensiones proporcionalmente conserva el mismo recorte. Decide qué restricción quieres cambiar.

Mantén `background-width` y `background-height` en `auto` para esta comparación. Los valores explícitos pueden sobrescribir las dimensiones de imagen utilizadas para el ajuste. El `padding` del nodo es otra entrada separada; la biblioteca documenta si el tamaño del fondo lo incluye o usa el cuerpo interior. Consulta la [referencia de background-image](https://js.cytoscape.org/#style/background-image) antes de añadir esos controles. Nuestro archivo de prueba sin relleno interior aísla primero el espacio vacío de origen.

Para las decisiones de meet, slice y alineación a nivel de SVG, continúa con la [guía de preserveAspectRatio](https://perfectvector.com/es/blog/svg-preserveaspectratio). Cambiar el ajuste interno de un SVG y cambiar el ajuste de fondo de Cytoscape son operaciones separadas.

## Diagnostica la carga antes del recorte

Si el estado informa de un fallo de carga, el siguiente paso no es cambiar contain por cover. Abre el recurso de imagen por separado, revisa su URL y sus dimensiones declaradas, y redúcelo después al emblema autónomo formado solo por trazados de arriba. Para una URI de datos, codifica toda la cadena SVG en lugar de concatenar marcado sin procesar o un valor de color sin escapar.

Un SVG usado como imagen tiene restricciones diferentes de uno abierto como documento. La [guía de SVG como imagen de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) describe las restricciones sobre scripts y recursos externos en contextos de imagen. Un archivo de diseño que dependa de una hoja de estilos o una fuente externa necesita una prueba de entrega separada. Este ejemplo evita esas dependencias y coloca las etiquetas del grafo fuera del SVG.

Si la imagen carga, revisa el ajuste y el recorte del nodo con una forma claramente ancha. Después prueba tu diseño real con el tamaño de nodo y los entornos de navegador que admite tu aplicación. La documentación de Cytoscape señala consideraciones de SVG específicas de cada navegador; esta observación en Chrome no las resuelve para Firefox ni para todos los demás motores.

## Mantén separadas las etiquetas y el diseño editable

El ejemplo usa `label: 'data(label)'` para las etiquetas del grafo y no contiene texto SVG. Puedes cambiar ese texto sin reconstruir el emblema. El trazado SVG permanece en su maestro de origen, mientras que el grafo gestiona la identidad, la posición y las relaciones de los nodos.

El archivo de prueba inspeccionado dibujaba sobre superficies Canvas. Ver ahí un fondo SVG no convierte sus trazados internos en elementos del grafo editables por separado. Conserva el maestro cuando necesites cambiar la abertura, la silueta o los colores. Exportar el grafo es un flujo separado que requiere su propio exportador elegido y una prueba de entrega; esta guía no promete que un grafo exportado conserve trazados editables del emblema. La [guía de diseños de Graphviz](https://perfectvector.com/es/blog/graphviz-svg-node-images) explora la entrega mediante referencias de imagen de otro renderizador de diagramas.

Si tu emblema personalizado solo existe como PNG o JPG, [convierte ese origen en un diseño vectorial](https://perfectvector.com/es/image-to-vector) y revisa después la silueta, la abertura y los detalles pequeños antes de definir sus límites SVG. PerfectVector puede ayudar a recuperar geometría de origen editable. El estilo del fondo, las etiquetas de los nodos y la exportación del grafo siguen siendo pasos separados. Un SVG adecuado que ya exista puede pasar directamente a las comprobaciones de ajuste.

## Preguntas frecuentes

**¿Por qué la imagen SVG de mi nodo es diminuta incluso con cover?**
La imagen de origen puede contener mucho espacio vacío de viewport alrededor del trazado. Compara una copia con límites ajustados en las mismas dimensiones de nodo antes de cambiar la distribución del grafo.

**¿Debo usar contain o cover para un emblema personalizado?**
Elige contain cuando importe mostrar el emblema completo. Elige cover solo si el recorte de bordes observado es aceptable para tu diseño y verifícalo con tu origen y forma de nodo.

**¿Un fondo de nodo SVG crea trazados editables del grafo?**
El archivo de prueba Canvas utiliza el SVG como imagen pintada. Conserva el maestro del diseño para editar los trazados; sus contornos internos no son nodos ni aristas separados del grafo en este ejemplo.

**¿Puedo poner etiquetas en el SVG?**
Este ejemplo conserva las etiquetas en los datos del grafo y usa un diseño formado solo por trazados. El texto SVG, las fuentes y las dependencias del contexto de imagen necesitan sus propias comprobaciones en navegador y de entrega.

## Fuentes

1. [Cytoscape.js — Imagen de fondo](https://js.cytoscape.org/#style/background-image) — Estilo con URL de imagen, ajuste, sobrescrituras de tamaño, referencias al relleno interior y consideraciones sobre SVG.
2. [Cytoscape.js — Versión v3.34.3](https://github.com/cytoscape/cytoscape.js/releases/tag/v3.34.3) — Versión fija utilizada en el archivo de prueba original.
3. [Cytoscape.js — Paquete de navegador v3.34.3](https://raw.githubusercontent.com/cytoscape/cytoscape.js/v3.34.3/dist/cytoscape.min.js) — Implementación oficial etiquetada servida localmente para la prueba del navegador.
4. [MDN — viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — Rectángulo de coordenadas de origen y asignación al viewport.
5. [MDN — encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — Escape del componente de URI de datos SVG.
6. [MDN — naturalWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) — Dimensiones de imagen cargada, distintas de los límites del trazado.
7. [MDN — SVG como imagen](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Restricciones del contexto de imagen y comprobaciones de dependencias.

Si tu emblema parte de un ráster, [crea un maestro SVG editable](https://perfectvector.com/es/image-to-vector), revisa sus contornos y límites de origen, y compara después contain y cover en la distribución de tus nodos.

## Explore

- [Read the HTML article](https://perfectvector.com/es/blog/cytoscape-svg-node-artwork)
- [Marcadores SVG de Leaflet: alinea la punta con iconAnchor](https://perfectvector.com/es/blog/leaflet-svg-marker-anchor.md)
- [Mide la longitud de trazados SVG sin confundir la escala](https://perfectvector.com/es/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)