Loghi SVG responsive: cambia composizione in piccolo

Un logo SVG responsive può passare da una composizione dettagliata a un marchio compatto invece di rimpicciolire ogni parte insieme. Crea prima le due composizioni, poi usa una sorgente <picture> con una condizione media per scegliere. Controlla il currentSrc dell’immagine alle larghezze che intendi supportare.

Questo esempio usa una nostra composizione originale per il marchio immaginario Cove: un rombo cavo con lettere disegnate, più una versione con il solo simbolo. Il cambio dipende dalla larghezza del viewport del documento. Un contenitore stretto in una pagina larga non attiva lo stesso cambio.

Ridimensionamento e direzione artistica risolvono compiti diversi

Il ridimensionamento ordinario conserva tutta la composizione: simbolo, lettere e spaziatura diventano più piccoli insieme. La direzione artistica seleziona un’altra composizione creata. Rimuovere le lettere o riordinare un marchio è una decisione di design; un file SVG non la prende automaticamente perché è scalabile.

Il riferimento HTML picture descrive sorgenti alternative selezionate tramite condizioni media e il ripiego img. Qui offriamo un SVG compatto a 599 pixel o meno e uno dettagliato altrimenti. La cornice dell’immagine mantiene le dimensioni mentre cambia il contenuto.

Ridimensiona o scegli un’altra composizione

Crea due file modificabili

Salva questa composizione dettagliata originale come detailed.svg. Le lettere sono tracciati disegnati, quindi il piccolo esempio non richiede file di font:

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

Salva la versione compatta come 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>

Il tracciato del rombo è identico nei due file. Quello dettagliato contiene cinque tracciati, quello compatto uno. Nessuno include un elemento immagine o testo attivo. Le larghezze dei due viewBox differiscono perché differiscono le composizioni, non perché un file sia stato ridimensionato uniformemente.

Conserva entrambe le sorgenti. Per il tuo marchio, decidi quali caratteristiche devono restare riconoscibili nella versione compatta, poi controlla apertura, margini e proporzioni. La nostra guida ai formati dei file logo tratta il pacchetto più ampio di sorgenti e consegna; questo esempio aggiunge una scelta del browser tra due versioni approvate.

Esegui l’esempio completo con picture

Salvalo come starter.html accanto ai due SVG e servi la cartella localmente. Con Python installato, python3 -m http.server 8766 è un’opzione; poi apri http://localhost:8766/starter.html in un browser.

<!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 condizione media è (max-width: 599px). La funzionalità media width di CSS valuta la larghezza del viewport. A 600 pixel la condizione è falsa, quindi l’esempio seleziona la sorgente dettagliata di img. Il numero è un breakpoint di esempio per questo layout, non una regola di progettazione del marchio.

Il CSS riserva un’altezza immagine di 80 pixel e usa object-fit: contain per adattare la sorgente selezionata al riquadro dell’elemento. Questo mantiene visibili entrambe le composizioni senza deformarle allo stesso rapporto. Applica lo stile a img, che presenta la sorgente scelta.

alt="Cove" identifica il marchio immaginario in entrambi i casi. Assegna all’immagine un’alternativa testuale adeguata, come descritto nel riferimento HTML img. Un marchio compatto non dovrebbe perdere il proprio nome accessibile quando spariscono le lettere visibili.

Cosa ha selezionato il browser a tre larghezze

Abbiamo aperto l’esatto esempio in Chrome con viewport del documento di 480, 600 e 960 pixel. A ogni larghezza tutte e tre le immagini terminavano il caricamento. Il contenitore principale restava largo 200 pixel e il controllo stretto 120 pixel.

Abbiamo controllato l’URL selezionato tramite HTMLImageElement.currentSrc, insieme alle dimensioni caricate. Il solo URL selezionato non prova un caricamento riuscito: controlla anche complete e le dimensioni naturali. La sorgente compatta riportava 96×96, quella dettagliata 300×96.

L’elemento immagine principale restava 200×80 a tutte e tre le larghezze. Il controllo stretto restava 120×80. A 480 pixel, il marchio compatto era centrato in ogni cornice, mentre il controllo con ridimensionamento ordinario mostrava ancora l’intera composizione. A 600 e 960 pixel, restringere il contenitore a 120 pixel rendeva più piccola la composizione dettagliata; non selezionava il file compatto.

La distinzione conta in una barra laterale o in un componente riutilizzabile. Questa condizione media HTML risponde al viewport, non alla larghezza misurata del contenitore. Se la scelta del logo deve dipendere dallo spazio del componente, pianifica e verifica quel meccanismo separato invece di presumere che il breakpoint osservi il componente.

I risultati riguardano i file originali, un browser e tre larghezze esplicite del viewport. Non stabiliscono ogni browser, metodo di incorporamento o destinazione di esportazione. L’esempio non prova neppure regole media dentro un SVG esterno.

Controlla separatamente cornice e grafica

Il riquadro dell’elemento non coincide con i limiti del logo dipinto. La geometria della sorgente dettagliata nel browser aveva limiti x8, y8, width274, height80 in un viewBox 300×96. La sorgente compatta aveva x8, y8, width80, height80 in un viewBox 96×96. I margini restano parte del calcolo di adattamento della sorgente.

Se il logo selezionato sembra troppo piccolo, controlla lo spazio vuoto sorgente prima di aumentare le dimensioni dell’elemento. Se sembra deformato, controlla il riquadro dell’immagine e la regola di adattamento. La guida a preserveAspectRatio spiega un calcolo correlato del viewport SVG; cambiare quella mappatura non crea da solo una seconda composizione.

Questo esempio usa immagini SVG esterne tramite img. Consulta la guida SVG inline contro img se devi scegliere un altro incorporamento. Un SVG scaricato o stampato non include questo contenitore HTML di selezione della sorgente: consegna la composizione effettivamente necessaria al destinatario e conserva le versioni modificabili.

Prepara versioni da un logo raster

Se l’unica grafica del marchio è PNG o JPG e ti serve geometria modificabile, prepara un logo SVG con PerfectVector, controlla sagoma e aperture interne e conserva il master pulito. Poi crea le composizioni dettagliata e compatta e prova la selezione nella pagina. La vettorializzazione prepara la grafica; non decide quali lettere rimuovere né sceglie il breakpoint. Un SVG pulito esistente può passare direttamente alla composizione. La guida alla vettorializzazione spiega quando aiuta convertire.

Domande frequenti

SVG semplifica automaticamente un logo su uno schermo piccolo? Questo esempio seleziona tra due SVG creati. Ridimensionare un file conserva la composizione originale; semplificare richiede una decisione di design separata.

Perché un contenitore stretto mostra ancora il logo dettagliato? La condizione di larghezza della sorgente picture controlla il viewport del documento. Nei viewport testati da 600 e 960 pixel, anche il contenitore da 120 pixel manteneva la sorgente dettagliata.

Come confermo quale file è stato usato? Controlla currentSrc, stato di caricamento e dimensioni naturali dell’immagine. L’esempio li stampa insieme alle dimensioni dell’elemento e del contenitore.

Il cambio responsive sarà incluso quando scarico un SVG? La regola di selezione della sorgente risiede nel contenitore HTML. Conserva e consegna l’SVG dettagliato o compatto necessario all’uso reale del destinatario.

Fonti

1. Elemento HTML picture — sorgenti alternative, condizioni media e comportamento del ripiego.
2. Funzionalità media CSS width — condizione sul viewport del documento usata nell’esempio.
3. Proprietà currentSrc dell’immagine — controllo dell’URL sorgente selezionato.
4. CSS object-fit — adattamento di ogni composizione scelta alla cornice dell’immagine.
5. Elemento HTML img — presentazione delle immagini e alternative testuali.

Per il tuo logo PNG o JPG, prepara un master SVG modificabile, controlla contorno e aperture e conservalo accanto alle composizioni approvate. Poi verifica sorgente selezionata e composizione visibile alle larghezze del viewport usate dalla pagina.