Logotipos SVG adaptables: cambia la composición en pequeño

Un logotipo SVG adaptable puede alternar entre una composición detallada y una marca compacta en lugar de reducir todas las partes juntas. Crea primero las dos composiciones y usa después un origen de <picture> con una condición media para elegir entre ellas. Revisa el currentSrc de la imagen en los anchos que quieras admitir.

Este ejemplo usa una composición original de la marca ficticia Cove: un rombo hueco con letras dibujadas y una versión solo con el símbolo. El cambio depende del ancho del viewport del documento. Un contenedor estrecho dentro de una página ancha no activa el mismo cambio.

El escalado y la dirección de arte resuelven tareas distintas

El escalado normal conserva toda la composición: el símbolo, las letras y su separación se reducen juntos. La dirección de arte selecciona otra composición creada previamente. Quitar letras o reorganizar una marca es una decisión de diseño; un archivo SVG no la toma automáticamente por ser escalable.

La referencia de picture en HTML describe los orígenes alternativos seleccionados mediante condiciones media y la alternativa de img. Aquí ofrecemos un SVG compacto a 599 píxeles o menos y uno detallado en los demás casos. El marco de imagen mantiene su tamaño mientras cambia su contenido.

Escala la composición o elige otra

Crea dos archivos editables

Guarda esta composición detallada original como detailed.svg. Las letras son trazados dibujados, así que este pequeño ejemplo no necesita un archivo de fuente:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

Guarda la versión compacta como compact.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

El trazado del rombo es idéntico en ambos archivos. El detallado contiene cinco trazados; el compacto, uno. Ninguno incluye un elemento de imagen ni texto activo. Los anchos de los dos viewBox son distintos porque sus composiciones son diferentes, no porque uno de los archivos se haya escalado uniformemente.

Conserva ambas versiones de origen. Para tu marca, decide qué características deben seguir siendo reconocibles en la composición compacta y revisa después su abertura, sus márgenes y sus proporciones. Nuestra guía de formatos de archivo de logotipos cubre el paquete general de origen y entrega; este ejemplo añade una elección en el navegador entre dos versiones aprobadas.

Ejecuta la plantilla completa de picture

Guarda esto como starter.html junto a los dos SVG y sirve la carpeta localmente. Con Python instalado, una opción es python3 -m http.server 8766; abre después http://localhost:8766/starter.html en un navegador.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

La condición media es (max-width: 599px). La característica media width de CSS evalúa el ancho del viewport. A 600 píxeles la condición es falsa, así que esta plantilla selecciona el origen detallado de img. El número es un punto de ruptura de ejemplo para esta distribución, no una regla de diseño de marca.

El CSS reserva una altura de imagen de 80 píxeles y usa object-fit: contain para encajar la imagen elegida dentro del recuadro del elemento. Así mantiene visibles ambas composiciones sin estirarlas a la misma relación de aspecto. Aplica el estilo de ajuste a img, que presenta el origen elegido.

alt="Cove" identifica la marca ficticia en ambos casos. Da a tu imagen una alternativa textual adecuada, como describe la referencia de img en HTML. Una marca compacta no debe perder su nombre accesible cuando desaparezcan las letras visibles.

Qué seleccionó el navegador en tres anchos

Abrimos exactamente esta plantilla en Chrome con anchos de viewport del documento de 480, 600 y 960 píxeles. En cada ancho, las tres imágenes terminaron de cargar. El contenedor principal siguió midiendo 200 píxeles de ancho y el control estrecho, 120 píxeles.

Revisamos la URL seleccionada mediante HTMLImageElement.currentSrc, junto a las dimensiones de la imagen cargada. Una URL seleccionada por sí sola no comprueba que la carga haya sido correcta: revisa también complete y las dimensiones naturales. Nuestro origen compacto informó 96×96; el detallado, 300×96.

El elemento de imagen principal mantuvo 200×80 en los tres anchos. El control estrecho mantuvo 120×80. A 480 píxeles, la marca compacta estaba centrada en cada marco mientras el control de escalado normal seguía mostrando toda la composición. A 600 y 960 píxeles, reducir el contenedor a 120 píxeles hizo menor la composición detallada; no seleccionó el archivo compacto.

Esta diferencia importa en una barra lateral o un componente reutilizable. Esta condición media de HTML responde al viewport, no al ancho medido de su contenedor. Si la elección de logotipo debe depender del ancho disponible del componente, planifica y prueba ese mecanismo por separado en lugar de suponer que este punto de ruptura observa el componente.

Estos resultados cubren los archivos originales, un navegador y tres anchos explícitos de viewport. No establecen todos los navegadores, métodos de inserción o destinos de exportación. La plantilla tampoco prueba reglas media dentro de un SVG externo.

Revisa el marco y el diseño por separado

El recuadro de un elemento no equivale a los límites pintados del logotipo. Los límites geométricos del origen detallado en el navegador eran x8, y8, ancho274, alto80 dentro de un viewBox de 300×96. Los del origen compacto eran x8, y8, ancho80, alto80 dentro de un viewBox de 96×96. Esos márgenes siguen formando parte del cálculo de ajuste del origen.

Si el logotipo elegido parece demasiado pequeño, revisa el espacio vacío de origen antes de ampliar las dimensiones del elemento. Si parece estirado, revisa el recuadro de imagen y la regla de ajuste. La guía de preserveAspectRatio explica un cálculo relacionado del viewport SVG; cambiar esa asignación no crea por sí solo una segunda composición.

Esta plantilla usa imágenes SVG externas mediante img. Usa la guía de SVG inline frente a img cuando necesites elegir otro método de inserción. Un SVG descargado o impreso no incluye este contenedor HTML de selección de origen: entrega la composición real que necesite el destinatario y conserva las versiones editables.

Prepara versiones a partir de un logotipo ráster

Si tu único diseño de marca es un PNG o JPG y necesitas geometría editable, prepara un logotipo SVG con PerfectVector, inspecciona la silueta y las aberturas interiores y conserva ese maestro limpio. Después crea las composiciones detallada y compacta y prueba su selección en tu página. La vectorización prepara el diseño; no decide qué letras quitar ni elige tu punto de ruptura. Un diseño SVG limpio existente puede pasar directamente a trabajar en la composición. La guía de vectorización explica cuándo ayuda la conversión.

Preguntas frecuentes

¿SVG simplifica automáticamente un logotipo en una pantalla pequeña? Este ejemplo selecciona entre dos archivos SVG creados previamente. Escalar un archivo conserva su composición original; simplificar requiere una decisión de diseño separada.

¿Por qué un contenedor estrecho sigue mostrando el logotipo detallado? La condición de ancho del origen picture comprueba el viewport del documento. En los viewports probados de 600 y 960 píxeles, incluso el contenedor de 120 píxeles mantuvo el origen detallado.

¿Cómo puedo confirmar qué archivo se usó? Revisa currentSrc, el estado de carga y las dimensiones naturales de la imagen. La plantilla los imprime junto a las dimensiones del elemento y del contenedor.

¿Se incluye el cambio adaptable cuando descargo un SVG? La regla de selección de origen está en el contenedor HTML. Conserva y entrega el SVG detallado o compacto que necesite el destinatario para su uso real.

Fuentes

1. Elemento picture de HTML — Orígenes alternativos, condiciones media y comportamiento de alternativa.
2. Característica media width de CSS — Condición de viewport del documento de la plantilla.
3. Propiedad currentSrc de Image — Inspección de la URL del origen seleccionado.
4. CSS object-fit — Ajuste de cada composición seleccionada dentro del marco de imagen.
5. Elemento img de HTML — Presentación de imágenes y alternativas textuales.

Para tu logotipo PNG o JPG, prepara un maestro SVG editable, revisa su contorno y sus aberturas y consérvalo junto a las composiciones aprobadas. Después verifica el origen seleccionado y la composición visible en los anchos de viewport que usará tu página.