The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.
```
Sirve la carpeta mediante HTTP, por ejemplo con `python -m http.server 8000`, y abre `http://localhost:8000/index.html`. Los dos archivos comparten así el mismo origen. Una URL de archivo local no es la configuración de carga probada aquí.
Cambia `class="sample narrow contour"` por `class="sample narrow"` para comparar el ajuste rectangular normal alrededor de un flotante. Cambia `narrow` por `wide` para probar la columna de 520 píxeles. El párrafo y la imagen permanecen sin cambios.
La [referencia de display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) describe `flow-root` como un valor que establece un contexto de formato de bloque. Aquí contiene la imagen flotante dentro de su muestra. No posiciona las palabras; eso lo hace la distribución en línea del navegador.
*Cuatro distribuciones HTML reales usan el mismo SVG original y el mismo párrafo. Las variantes de contorno añaden shape-outside y un margen de forma de 10px; no se coloca ninguna palabra manualmente.*
## 3. Comprueba las filas renderizadas a más de un ancho
Ejecutamos cuatro muestras visibles en Chromium 155 con Arial a 16px y una altura de línea de 24px. La imagen se mantuvo en 150 × 180px mientras las columnas tenían anchos de contenido fijos de 360px y 520px. Ambas muestras de contorno usaron `shape-margin: 10px` y `shape-image-threshold: 0.5`.
| Muestra real | Filas de texto renderizadas | Inicio de la primera fila | Altura del texto |
| ---------------- | --------------------------- | ------------------------- | ---------------- |
| rectangle-narrow | 18 | 150px | 432px |
| rectangle-wide | 13 | 150px | 312px |
| contour-narrow | 18 | 115.5px | 432px |
| contour-wide | 12 | 115.5px | 288px |
El contorno estrecho cambió el ajuste sin reducir el número total de filas. Al ancho mayor, la muestra de contorno usó una fila menos que su control rectangular.
Medimos los rectángulos nativos de DOM Range de cada palabra y los agrupamos por posición vertical. Son mediciones de filas de texto renderizadas, no acceso a los objetos internos de caja de línea del navegador. También comprobamos los ajustes calculados de flotante y forma, las dimensiones de la imagen cargada y las muestras alfa de la imagen SVG real.
En ambos anchos, algunas filas de contorno empezaban a la izquierda del borde de exclusión de 150px del flotante rectangular. El texto también volvía a ocupar toda la columna después de la imagen. Estas observaciones muestran que el contorno probado afectó a la distribución real, en lugar de cambiar únicamente el aspecto de una captura.
Las filas y coordenadas exactas dependen de la fuente, el navegador, el párrafo, la imagen y el ancho. Sustituir una oración o cargar otra fuente puede cambiarlas. Prueba tu contenido real a tamaños estrechos y anchos en lugar de conservar estos números como constantes de diseño.
## 4. Trata por separado el margen, el alfa y la carga de la forma
[`shape-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) amplía la forma de ajuste para dejar espacio entre ella y el texto. El valor de 10px de aquí es una elección de distribución, no un espacio mínimo medido entre cada glifo visible y cada punto de la ilustración.
La [especificación CSS Shapes](https://www.w3.org/TR/css-shapes-1/) conserva el modelo de caja normal y recorta el efecto de la forma a la caja de margen del flotante. Un margen de forma grande no da a la imagen una caja CSS más grande. Si tu diseño necesita más espacio, inspecciona también las dimensiones y los márgenes normales del flotante.
[`shape-image-threshold`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) elige el umbral alfa usado para extraer la forma de la imagen. El recurso original tiene un exterior completamente transparente y un diseño central opaco. Las sombras suaves o los bordes translúcidos necesitan una elección deliberada del umbral y una revisión visual; cambiar el umbral no puede volver transparente un fondo opaco.
La URL de imagen también debe ser apta para la carga de formas. CSS Shapes especifica una solicitud CORS para las URL de imagen y vuelve a una forma sin personalizar cuando falla la carga. Servir el SVG junto a la página evita una dependencia entre orígenes en este ejemplo. Si lo aloja una CDN, configura la respuesta CORS de ese servidor e inspecciona la solicitud y la distribución. Ver la imagen en un elemento `img` no demuestra por sí solo que la solicitud de forma se haya completado correctamente.
## 5. Conserva el orden del texto y comprueba la página final
Los cuatro párrafos probados conservaron exactamente el mismo texto en un solo nodo de texto, sin elementos `br` ni posicionamiento palabra por palabra. El CSS cambió los saltos de línea visuales sin reescribir el orden del párrafo en el DOM. No ejecutamos una sesión con lector de pantalla ni afirmamos haber hecho una auditoría de accesibilidad a partir de esa comprobación del código.
Mantén el párrafo legible cuando la imagen no esté disponible o cambie la distribución. En columnas muy estrechas, una disposición más sencilla con la imagen encima del párrafo puede ser más fácil de leer que una tira fina de texto al lado. Comprueba tu punto de cambio y contenido en lugar de reducir el texto para forzar el efecto de contorno.
El flotante sigue reservando una caja CSS. El ajuste por forma no lo convierte en un obstáculo general que el texto rodee por todos los lados. En este ejemplo con flotante izquierdo, el texto adyacente fluye por la derecha y después continúa debajo.
## Corrige el síntoma en su origen
| Síntoma | Comprobación y recuperación |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| El texto sigue un rectángulo | Confirma que el flotante esté activo, las dimensiones estén definidas, la URL de forma se haya cargado y la fuente tenga un entorno transparente. |
| El texto se superpone a la ilustración visible | Compara el SVG mostrado y la URL de forma, sus dimensiones y sus relaciones de aspecto. Inspecciona el umbral alfa y el margen de forma. |
| Aparece la imagen, pero no el contorno | Inspecciona la solicitud de imagen de forma y el comportamiento CORS por separado de la solicitud de img. Prueba el ejemplo del mismo origen antes de añadir una CDN. |
| Un hijo de flex o grid no flota como se espera | Mantén el flotante y el párrafo en un contenedor de flujo normal, como en este ejemplo, en lugar de convertir la propia imagen flotante en un elemento flex o grid. |
| Un párrafo estrecho resulta difícil de leer | Reduce la imagen o muévela encima del texto en un punto de cambio adecuado y vuelve a probar el párrafo real. |
| Las etiquetas SVG aún no se ajustan | Usa el flujo de texto dentro de SVG de la tabla anterior. Shape-outside cambia el flujo HTML adyacente, no la distribución del texto SVG. |
Si una ilustración plana adecuada solo se conserva como imagen ráster y necesitas una silueta editable, el [flujo de clipart a SVG](https://perfectvector.com/es/clipart-to-svg) de PerfectVector puede ayudar a recuperar una candidata. Compara su contorno y el entorno transparente con la fuente y prueba después la URL SVG real en tu página. Una imagen ráster transparente también puede proporcionar una forma CSS basada en imagen; SVG no es obligatorio solo para activar el ajuste por alfa.
Conserva un SVG existente limpio cuando lo tengas. La vectorización no construye la distribución HTML circundante, ni conserva por ti la semántica del párrafo, ni garantiza el resultado de ajuste de un navegador concreto.
## Preguntas frecuentes
**¿shape-outside ajusta texto dentro de un SVG?**
No. Este ejemplo cambia el flujo en línea HTML junto a una imagen flotante. Las etiquetas SVG, el HTML incrustado dentro de SVG y el texto que sigue un trazado son tareas de distribución distintas.
**¿Por qué mi SVG de aspecto transparente aún ajusta el texto como un rectángulo?**
Busca un fondo opaco en el archivo, una solicitud de imagen de forma fallida, un tamaño de flotante ausente o un contexto de distribución donde el flotante esté inactivo. Los píxeles blancos no son lo mismo que los transparentes.
**¿Tengo que convertir primero un PNG en SVG?**
No solo para ajustar por alfa. Una imagen ráster transparente adecuada también puede proporcionar la forma. Usa SVG cuando la edición del diseño u otros requisitos vectoriales lo justifiquen.
**¿Los saltos de línea serán iguales en todos los tamaños de pantalla?**
No. El ancho disponible, las métricas de la fuente, el texto, el tamaño de imagen y la distribución del navegador afectan a las filas. Prueba el contenido real a más de un ancho.
## Fuentes
1. [MDN shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — documenta áreas flotantes y formas de imagen derivadas del alfa.
2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — define el espacio añadido alrededor de la forma de ajuste.
3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — define el umbral alfa usado para las formas de imagen.
4. [CSS Shapes Module Level 1](https://www.w3.org/TR/css-shapes-1/) — especifica límites de caja flotante, carga de imágenes y comportamiento CORS.
5. [MDN display y flow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — explica el contexto de formato usado para contener el flotante.
Si falta un diseño editable, [prepara un SVG candidato de clipart](https://perfectvector.com/es/clipart-to-svg), inspecciona su silueta y transparencia y verifica la distribución real del párrafo en tu página a los anchos que piensas admitir.
## Explore
- [Read the HTML article](https://perfectvector.com/es/blog/css-text-around-svg-shape)
- [SVG textLength: ajusta una etiqueta sin deformar las letras](https://perfectvector.com/es/blog/svg-textlength-fit.md)
- [Alineación vertical de texto SVG: centra una etiqueta](https://perfectvector.com/es/blog/svg-text-vertical-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)