Logos SVG adaptatifs : changer de version en petit format

Un logo SVG adaptatif peut passer d’une composition détaillée à un signe compact au lieu de réduire toutes ses parties ensemble. Crée d’abord les deux compositions, puis utilise une source <picture> avec une condition média pour choisir entre elles. Vérifie le currentSrc de l’image aux largeurs que tu veux prendre en charge.

Cet exemple utilise une composition originale pour la marque fictive Cove : un losange creux avec du lettrage dessiné et une version avec le signe seul. Le changement dépend de la largeur du viewport du document. Un conteneur étroit dans une page large ne déclenche pas le même changement.

Mise à l’échelle et direction artistique ont des rôles distincts

Une mise à l’échelle ordinaire préserve toute la composition : symbole, lettrage et espacement rétrécissent ensemble. La direction artistique choisit une autre composition créée au préalable. Retirer le lettrage ou réorganiser un signe est une décision graphique ; un fichier SVG ne la prend pas automatiquement parce qu’il est redimensionnable.

La référence HTML de picture décrit les sources alternatives sélectionnées par des conditions média et le repli sur img. Ici, nous proposons un SVG compact à 599 pixels ou moins, et un SVG détaillé sinon. Le cadre d’image garde la même taille tandis que son contenu change.

Réduire la composition ou en choisir une autre

Crée deux fichiers modifiables

Enregistre cette composition détaillée originale sous detailed.svg. Les lettres sont des chemins dessinés : ce petit exemple n’a donc pas besoin de fichier de police :

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

Enregistre la version compacte sous 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>

Le chemin du losange est identique dans les deux fichiers. Le fichier détaillé contient cinq chemins ; le compact en contient un. Aucun ne possède d’élément image ni de texte actif. Les largeurs des deux viewBox diffèrent parce que leurs compositions diffèrent, et non parce qu’un fichier a été mis à l’échelle uniformément.

Garde les deux versions sources. Pour ta marque, décide quels éléments doivent rester reconnaissables dans la composition compacte, puis examine son ouverture, ses marges et ses proportions. Notre guide des formats de fichiers de logo couvre l’ensemble plus large de sources et de livrables ; cet exemple ajoute un choix dans le navigateur entre deux versions approuvées.

Exécute la base picture complète

Enregistre ceci sous starter.html à côté des deux SVG et sers ce dossier localement. Si Python est installé, python3 -m http.server 8766 est une possibilité ; ouvre ensuite http://localhost:8766/starter.html dans un navigateur.

<!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 condition média est (max-width: 599px). La caractéristique média width de CSS évalue la largeur du viewport. À 600 pixels, la condition est fausse : cette base sélectionne donc la source img détaillée. Ce nombre est un exemple de point de rupture pour cette mise en page, pas une règle de conception de marque.

Le CSS réserve une hauteur d’image de 80 pixels et utilise object-fit: contain pour ajuster l’image sélectionnée dans la boîte de son élément. Cela garde les deux compositions visibles sans les étirer aux mêmes proportions. Applique le style d’ajustement à l’img, qui présente la source choisie.

alt="Cove" identifie la marque fictive dans les deux cas. Donne à ta propre image une alternative textuelle adaptée, comme le décrit la référence HTML d’img. Un signe compact ne doit pas perdre son nom accessible lorsque le lettrage visible disparaît.

Ce que le navigateur a sélectionné à trois largeurs

Nous avons ouvert exactement cette base dans Chrome avec des largeurs de viewport du document de 480, 600 et 960 pixels. À chaque largeur, les trois images terminaient leur chargement. Le conteneur principal restait large de 200 pixels et le contrôle étroit restait large de 120 pixels.

Nous avons vérifié l’URL sélectionnée via HTMLImageElement.currentSrc, avec les dimensions de l’image chargée. Une URL sélectionnée seule n’est pas un test de chargement réussi : examine aussi complete et les dimensions naturelles. Notre source compacte indiquait 96×96 ; la source détaillée 300×96.

L’élément image principal restait à 200×80 aux trois largeurs. Le contrôle étroit restait à 120×80. À 480 pixels, le signe compact était centré dans chaque cadre tandis que le contrôle de mise à l’échelle ordinaire affichait toujours toute la composition. À 600 et 960 pixels, réduire le conteneur à 120 pixels rendait la composition détaillée plus petite ; cela ne sélectionnait pas le fichier compact.

Cette distinction compte dans une barre latérale ou un composant réutilisable. Cette condition média HTML répond au viewport, pas à la largeur mesurée de son conteneur. Si le choix du logo doit dépendre de la largeur disponible du composant, prévois et teste ce mécanisme distinct au lieu de supposer que ce point de rupture observe le composant.

Ces résultats couvrent les fichiers originaux, un navigateur et trois largeurs de viewport explicites. Ils n’établissent pas tous les navigateurs, méthodes d’intégration ou destinations d’exportation. La base ne teste pas non plus les règles média dans un SVG externe.

Vérifie séparément le cadre et le dessin

La boîte d’un élément n’est pas la même chose que les limites peintes du logo. Les limites géométriques de la source détaillée dans le navigateur étaient x8, y8, largeur274, hauteur80 dans un viewBox de 300×96. Les limites de la source compacte étaient x8, y8, largeur80, hauteur80 dans un viewBox de 96×96. Ces marges restent incluses dans le calcul d’ajustement de la source.

Si le logo choisi paraît trop petit, examine les espaces vides de la source avant d’augmenter les dimensions de son élément. S’il semble étiré, examine la boîte d’image et la règle d’ajustement. Le guide de preserveAspectRatio explique un calcul lié au viewport SVG ; changer cette projection ne crée pas à lui seul une seconde composition de logo.

Cette base utilise des images SVG externes via img. Consulte le guide SVG en ligne contre img si tu dois choisir une autre approche d’intégration. Un fichier SVG téléchargé ou imprimé ne contient pas cette enveloppe HTML de sélection de source : livre la composition réelle dont le destinataire a besoin et garde les versions modifiables.

Prépare des versions depuis un logo matriciel

Si ton seul dessin de marque est un PNG ou JPG et que tu as besoin d’une géométrie modifiable, prépare un logo SVG avec PerfectVector, examine la silhouette et les ouvertures intérieures, puis conserve ce maître propre. Crée ensuite les compositions détaillée et compacte et teste leur sélection dans ta page. La vectorisation prépare le dessin ; elle ne décide pas du lettrage à retirer et ne choisit pas ton point de rupture. Un dessin SVG propre existant peut passer directement à la composition. Le guide de vectorisation explique quand la conversion aide.

Questions fréquentes

SVG simplifie-t-il automatiquement un logo sur un petit écran ? Cet exemple sélectionne entre deux fichiers SVG créés séparément. Mettre un fichier à l’échelle conserve sa composition originale ; simplifier nécessite une décision graphique distincte.

Pourquoi un conteneur étroit affiche-t-il toujours le logo détaillé ? La condition de largeur de la source picture vérifie le viewport du document. Dans les viewports testés à 600 et 960 pixels, même le conteneur de 120 pixels gardait la source détaillée.

Comment confirmer le fichier utilisé ? Examine currentSrc, l’état de chargement et les dimensions naturelles de l’image. La base les affiche avec les dimensions de l’élément et du conteneur.

Le changement adaptatif sera-t-il inclus si je télécharge un SVG ? La règle de sélection de source se trouve dans l’enveloppe HTML. Garde et livre le SVG détaillé ou compact nécessaire à l’usage réel du destinataire.

Sources

1. Élément HTML picture — Sources alternatives, conditions média et comportement de repli.
2. Caractéristique média CSS width — Condition de viewport du document de la base.
3. Propriété currentSrc des images — Inspection de l’URL de la source sélectionnée.
4. CSS object-fit — Ajustement de chaque composition choisie dans le cadre d’image.
5. Élément HTML img — Présentation d’image et alternatives textuelles.

Pour ton logo PNG ou JPG, prépare un maître SVG modifiable, vérifie son contour et ses ouvertures, puis garde-le à côté des compositions approuvées. Vérifie ensuite la source sélectionnée et la composition visible aux largeurs de viewport que ta page utilisera.