> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Evita saltos del logo SVG reservando su espacio > Reserva espacio para logos SVG con ancho y altura o una proporción CSS. Compara desplazamientos reales en navegador y revisa la imagen y la composición adaptable. Source: https://perfectvector.com/es/blog/svg-logo-layout-reservation Language: es Author: Irene Kim Published: 2026-10-23T08:00:00+09:00 Un logo SVG puede seguir nítido y aun así desplazar el contenido cercano cuando aparece. Para un SVG externo cargado mediante un elemento de imagen HTML, da al navegador suficiente información de tamaño para reservar su caja antes de disponer de las dimensiones intrínsecas del archivo. Unos atributos `width` y `height` correspondientes son un punto de partida útil; después el CSS puede hacer que esa caja se adapte. Esto corrige un problema de disposición de página. No cambia los trazados del logo ni elimina espacio vacío dentro de su lienzo. Conserva un vector original utilizable. Si la única fuente es PNG o JPG, recupera el diseño editable por separado y da después al SVG entregado un lugar previsto en la página. ## Separa el dibujo de su caja reservada Hay tres dimensiones relacionadas que comprobar: | Elemento | Qué describe | Dónde inspeccionarlo | | ------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------- | | Diseño SVG y viewBox | Rectángulo de coordenadas fuente y dibujo dentro de él | Fuente SVG o editor vectorial | | Dimensiones o proporción naturales de la imagen cargada | Información que obtiene el navegador de la imagen | Elemento de imagen cargado | | Caja de disposición HTML | Espacio que la página asigna a la imagen | Estilos calculados y límites del elemento | Un `viewBox="0 0 300 100"` describe un rectángulo fuente 3:1. En un archivo externo, esa información está dentro del recurso que la página debe obtener. Es distinto de colocar una proporción coincidente en el HTML circundante antes de disponer del recurso. La [referencia de MDN del elemento de imagen](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) recomienda usar tanto el atributo de ancho como el de altura para reservar espacio antes de cargar una imagen. Las [indicaciones de Google sobre desplazamientos de diseño](https://web.dev/articles/optimize-cls) también identifican las dimensiones ausentes como causa frecuente de movimiento y describen reservar espacio mediante dimensiones o una proporción CSS. Si el problema es cómo encaja el dibujo en un viewport ya establecido, consulta la [guía de ajuste de proporción SVG](https://perfectvector.com/es/blog/svg-preserveaspectratio). Reservar la caja y encajar el diseño en ella son comprobaciones diferentes. ## Empieza por atributos de ancho y altura correspondientes Para una marca 3:1, una entrega sencilla puede ser así: ```html ``` ```css .brand-logo { display: block; width: 300px; max-width: 100%; height: auto; } ``` Los atributos aportan la proporción prevista. El CSS fija el ancho mostrado y permite reducirlo proporcionalmente cuando el contenedor se estrecha. No exigen que el logo ocupe 300 píxeles físicos de pantalla en todos los dispositivos. Usa las dimensiones del lienzo real de imagen, incluido cualquier espacio libre intencional. No introduzcas los límites de las letras visibles si el SVG entregado tiene un rectángulo fuente más ancho. Esa discrepancia hace que la reserva inicial no coincida con el recurso cargado. La correspondencia de valores importa porque la proporción natural de una imagen puede tomar el control cuando está disponible. Una proporción inicial incorrecta todavía puede provocar una corrección posterior de tamaño. Vuelve a revisar tanto el marcado como el archivo entregado al reemplazar un logo, en lugar de suponer que conservar el nombre mantiene su geometría. ## Usa una proporción CSS cuando el componente define el espacio Una proporción CSS resulta útil si un componente define una forma concreta de caja. Para una imagen proporcional 3:1: ```css .brand-logo { display: block; width: 300px; max-width: 100%; height: auto; aspect-ratio: 3 / 1; } ``` La [referencia de aspect-ratio de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) explica que la propiedad participa en el dimensionado automático. Al menos una dimensión debe permanecer automática para que la proporción preferida afecte a esos cálculos. Si fijas tanto el ancho como la altura, esas dimensiones explícitas son lo primero que debes inspeccionar. Elige el comportamiento previsto cuando la proporción fuente difiera. Un espacio de forma permanente puede necesitar su propio contenedor y una regla deliberada de ajuste de imagen. Un logo proporcional debería usar normalmente la proporción fuente correcta. Evita forzar un logo cuadrado a la geometría 3:1 del logotipo anterior solo para conservar el CSS antiguo. La forma `auto 3 / 1` tiene otro significado: puede aportar una proporción provisional para un elemento reemplazado y usar después su proporción natural cuando esté disponible. Resulta útil si las proporciones provisional y final coinciden; no garantiza que unas dimensiones contradictorias nunca provoquen movimiento. ## Qué mostró nuestro ejemplo controlado en navegador Creamos un SVG original de `300 × 100` con una marca en F, un punto y una flecha. Tres elementos de imagen HTML no tenían inicialmente URL fuente. Un botón asignó después el mismo SVG local a los tres tras la primera composición de página. Así pudimos observar el antes y después sin pretender medir una red lenta. Los tres usaban un ancho CSS de 300px y altura automática. Uno no tenía proporción reservada, otro tenía `width="300" height="100"` y otro `aspect-ratio: 3 / 1`. | Caso | Altura de imagen antes | Altura de imagen después | Desplazamiento del texto siguiente | | --------------------------------- | ---------------------- | ------------------------ | ---------------------------------- | | Sin proporción reservada | 0px | 100px | 100px hacia abajo | | Dimensiones HTML correspondientes | 100px | 100px | 0px | | Proporción CSS correspondiente | 100px | 100px | 0px | ![Comparación en navegador del contenido que baja 100 píxeles cuando aparece un SVG sin proporción reservada, mientras las dimensiones HTML y la proporción CSS coincidentes lo mantienen en su sitio](https://perfectvector.com/blog/svg-logo-layout-reservation/reserved-space.webp) *Las marcas discontinuas registran la posición anterior del texto. Los tres SVG cargados tienen cajas idénticas de 300 por 100 píxeles; sus reservas iniciales de espacio difieren.* La coordenada superior del texto cambió de `358.1875` a `458.1875` en el caso sin reserva. Se mantuvo en `458.1875` en los dos casos con reserva. Cada imagen cargada indicó dimensiones naturales de `300 × 100`, y su ancho y altura mostrados también permanecieron en `300 × 100`. Son medidas reales de posiciones de elementos de una página controlada en un navegador. El experimento usó una asignación manual de URL. No registró una traza con limitación de red, una puntuación Core Web Vitals ni el comportamiento entre navegadores. En particular, un movimiento de 100px es una distancia, no una puntuación CLS. ## Comprueba el componente entregado, además del archivo Usa la ubicación real del logo al verificar la corrección: 1. **Confirma la fuente.** Abre el SVG entregado y comprueba la proporción de su lienzo. Conserva un maestro sin modificar para comparar. 2. **Inspecciona el tamaño inicial.** Comprueba que el HTML o CSS aporte la caja prevista antes de disponer de las dimensiones de imagen. 3. **Compara posiciones de elementos.** Observa un encabezado o elemento de navegación cercano, no solo la nitidez del logo. 4. **Comprueba después de cargar.** Verifica el ancho, altura y proporciones finales respecto de la reserva. 5. **Prueba contenedores estrechos y anchos.** Asegúrate de que las reglas adaptables reduzcan la marca proporcionalmente y mantengan utilizables los controles circundantes. Para comprobar la carga en navegador, recarga la página real con la caché desactivada y un ajuste de red adecuado en las herramientas de desarrollo. Eso comprueba una condición distinta de nuestro ejemplo activado por botón. Si la página usa carga diferida de imágenes, desplázate también hasta esa ubicación. Si el movimiento continúa, identifica qué cambió en ese instante. Un cambio de fuente, un banner insertado, una fila de navegación que se expande u otra imagen pueden mover el logo aunque su propia caja sea estable. La guía de web.dev distingue el dimensionado de imágenes de otras causas; reservar el espacio de un logo no es una auditoría completa del rendimiento del sitio. ## Distingue otros problemas SVG cercanos Una caja de imagen que no cambia pero deja una pequeña franja debajo puede tener un problema de línea de texto. Inspecciona display y la alineación vertical por separado de las dimensiones reservadas. Colocar un elemento en una línea de texto y asignar espacio a una imagen aún no disponible responden a momentos diferentes de la composición. Un SVG que no se mueve pero muestra márgenes vacíos amplios necesita revisar el lienzo o el ajuste. Recortar la fuente para quitar esos márgenes cambia su proporción, así que actualiza después la reserva de página. La [explicación de SVG en línea frente a imagen](https://perfectvector.com/es/blog/inline-svg-vs-img) también ayuda a identificar si aplicas estilos a elementos del documento o a una imagen externa. Si la marca original solo existe como píxeles, usa el [vectorizador de logos](https://perfectvector.com/es/vectorize-logo) de PerfectVector para preparar formas editables candidatas. Compara su silueta y aberturas con la fuente antes de elegir el lienzo de entrega; la [guía de evaluación del trazado](https://perfectvector.com/es/blog/evaluate-vector-trace-quality) cubre esa revisión geométrica. La vectorización no configura las dimensiones HTML, ni la proporción CSS ni el comportamiento de carga del sitio. ## Preguntas frecuentes **¿Un viewBox SVG evita por sí solo los saltos de diseño?** Para una imagen externa, el viewBox está dentro del recurso obtenido. Da a la disposición HTML información de tamaño correspondiente para reservar espacio antes de disponer de las dimensiones intrínsecas de imagen y verifica después el componente final. **¿Un logo SVG puede adaptarse conservando los atributos de ancho y altura?** Sí. Los atributos correspondientes pueden aportar la proporción prevista mientras el CSS controla el ancho mostrado y mantiene la altura automática. Comprueba que el archivo entregado y las reglas adaptables conserven esas proporciones. **¿Un SVG nítido garantiza una buena puntuación CLS?** No. La nitidez describe el renderizado del diseño. CLS trata de la inestabilidad de la composición de página, que también puede incluir fuentes, contenido insertado y otros medios. Una distancia de movimiento de un ejemplo controlado no es una puntuación CLS. ## Fuentes 1. [web.dev — Optimizar Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — Dimensiones ausentes de imágenes, reserva de espacio, otras causas de movimiento y diferencia entre movimiento y métrica CLS. 2. [MDN — Elemento de imagen HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — Atributos de ancho y altura, dimensiones naturales y disposición de imagen. 3. [MDN — aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) — Dimensionado automático y diferencia entre proporción especificada y la forma auto más proporción. *** ¿Solo tienes un logo ráster? [Prepara un SVG editable con PerfectVector](https://perfectvector.com/es/vectorize-logo), verifica los contornos y el lienzo y reserva después el espacio correspondiente en la página que lo mostrará. ## Explore - [Read the HTML article](https://perfectvector.com/es/blog/svg-logo-layout-reservation) - [Corrige el espacio bajo un SVG en línea mediante CSS](https://perfectvector.com/es/blog/inline-svg-baseline-gap.md) - [Logo SVG en modo oscuro: elige qué controla el color](https://perfectvector.com/es/blog/dark-mode-svg-logo.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)