Responsywne logo SVG: zmień układ w małym rozmiarze

Responsywne logo SVG może przełączać się między szczegółową kompozycją a kompaktowym znakiem zamiast zmniejszać wszystkie części razem. Najpierw przygotuj obie kompozycje, a następnie użyj źródła <picture> z warunkiem media, aby je wybierać. Sprawdź currentSrc obrazu przy szerokościach, które zamierzasz obsługiwać.

Przykład używa naszej oryginalnej kompozycji fikcyjnej marki Cove: pustego rombu z narysowanymi literami oraz wersji z samym znakiem. Przełączenie zależy od szerokości viewportu dokumentu. Wąski kontener na szerokiej stronie nie uruchamia tej samej zmiany.

Skalowanie i wybór kompozycji rozwiązują inne zadania

Zwykłe skalowanie zachowuje całą kompozycję: symbol, litery i odstępy zmniejszają się razem. Wybór artystyczny wskazuje inną przygotowaną kompozycję. Usunięcie liter lub przestawienie znaku jest decyzją projektową; plik SVG nie podejmuje jej automatycznie dlatego, że jest skalowalny.

Opis HTML picture przedstawia alternatywne źródła wybierane warunkami media oraz rezerwowy img. Tutaj oferujemy kompaktowy SVG przy 599 pikselach lub mniej, a szczegółowy w pozostałych przypadkach. Prostokąt obrazu zachowuje rozmiar, a zmienia się jego zawartość.

Skaluj układ lub wybierz inną kompozycję

Utwórz dwa edytowalne pliki

Zapisz oryginalny szczegółowy układ jako detailed.svg. Litery są narysowanymi ścieżkami, więc mały przykład nie wymaga pliku fontu:

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

Zapisz kompaktową wersję jako 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>

Ścieżka rombu jest identyczna w obu plikach. Szczegółowy plik zawiera pięć ścieżek, a kompaktowy jedną. Żaden nie zawiera elementu obrazu ani aktywnego tekstu. Dwie szerokości viewBox różnią się, bo różnią się kompozycje, a nie dlatego, że jeden plik równomiernie przeskalowano.

Zachowaj obie wersje źródła. Dla własnej marki ustal cechy, które muszą pozostać rozpoznawalne w kompaktowej kompozycji, a potem sprawdź otwór, marginesy i proporcje. Nasz poradnik formatów plików logo obejmuje szerszy pakiet źródeł i przekazania; ten przykład dodaje wybór przeglądarki między dwiema zatwierdzonymi wersjami.

Uruchom kompletny przykład picture

Zapisz go jako starter.html obok dwóch SVG i udostępnij folder lokalnie. Jeśli masz Python, jedną z opcji jest python3 -m http.server 8766; potem otwórz http://localhost:8766/starter.html w przeglądarce.

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

Warunek media to (max-width: 599px). Cecha media width CSS ocenia szerokość viewportu. Przy 600 pikselach warunek jest fałszywy, więc przykład wybiera szczegółowe źródło img. Liczba jest przykładowym breakpointem tego układu, a nie regułą projektowania marki.

CSS rezerwuje wysokość obrazu 80 pikseli i używa object-fit: contain, aby dopasować wybrane źródło do prostokąta elementu. Dzięki temu obie kompozycje są widoczne bez rozciągania do tych samych proporcji. Zastosuj dopasowanie do img, które prezentuje wybrane źródło.

alt="Cove" identyfikuje fikcyjną markę w obu przypadkach. Nadaj własnemu obrazowi odpowiedni tekst alternatywny zgodnie z opisem HTML img. Kompaktowy znak nie powinien tracić dostępnej nazwy, gdy znikają widoczne litery.

Co przeglądarka wybrała przy trzech szerokościach

Otworzyliśmy dokładny przykład w Chrome przy szerokościach viewportu dokumentu 480, 600 i 960 pikseli. Przy każdej szerokości wszystkie trzy obrazy kończyły ładowanie. Główny kontener pozostawał szeroki na 200 pikseli, a węższa kontrola na 120 pikseli.

Sprawdziliśmy wybrany adres przez HTMLImageElement.currentSrc, wraz z wymiarami wczytanego obrazu. Sam wybrany adres nie testuje udanego ładowania: sprawdź także complete i naturalne wymiary. Nasze kompaktowe źródło podawało 96×96, a szczegółowe 300×96.

Główny element obrazu pozostał 200×80 przy wszystkich szerokościach. Wąska kontrola pozostała 120×80. Przy 480 pikselach kompaktowy znak był wyśrodkowany w obu prostokątach, podczas gdy kontrola zwykłego skalowania nadal pokazywała cały układ. Przy 600 i 960 pikselach zwężenie kontenera do 120 pikseli zmniejszało szczegółowy układ; nie wybierało kompaktowego pliku.

Różnica ma znaczenie w panelu bocznym lub komponencie wielokrotnego użytku. Ten warunek media HTML reaguje na viewport, nie zmierzoną szerokość kontenera. Jeśli wybór logo ma zależeć od miejsca dostępnego w komponencie, zaplanuj i przetestuj osobny mechanizm, zamiast zakładać, że ten breakpoint obserwuje komponent.

Wyniki obejmują oryginalne pliki, jedną przeglądarkę i trzy jawne szerokości viewportu. Nie ustalają zachowania wszystkich przeglądarek, sposobów osadzania ani miejsc eksportu. Przykład nie testuje także reguł media wewnątrz zewnętrznego SVG.

Sprawdź prostokąt i grafikę oddzielnie

Prostokąt elementu nie jest tym samym co pomalowane granice logo. Granice geometrii szczegółowego źródła w przeglądarce wynosiły x8, y8, width274, height80 w viewBox 300×96. Kompaktowego źródła: x8, y8, width80, height80 w viewBox 96×96. Marginesy pozostają częścią obliczenia dopasowania źródła.

Jeśli wybrane logo wygląda na zbyt małe, sprawdź puste miejsce źródła przed zwiększeniem wymiarów elementu. Jeśli wygląda na rozciągnięte, sprawdź prostokąt obrazu i regułę dopasowania. Poradnik preserveAspectRatio wyjaśnia pokrewne obliczenie viewportu SVG; zmiana mapowania sama nie tworzy drugiego układu logo.

Przykład używa zewnętrznych obrazów SVG przez img. Sięgnij po poradnik SVG inline a img, gdy wybierasz inny sposób osadzenia. Pobrany lub drukowany SVG nie zawiera tego opakowania HTML wybierającego źródło: przekaż faktyczną kompozycję potrzebną odbiorcy i zachowaj edytowalne wersje.

Przygotuj wersje z rastrowego logo

Jeśli jedyna grafika marki to PNG lub JPG i potrzebujesz edytowalnej geometrii, przygotuj logo SVG przez PerfectVector, sprawdź sylwetkę i otwory wewnętrzne oraz zachowaj czysty wzorzec. Potem utwórz szczegółową i kompaktową kompozycję i przetestuj wybór na stronie. Wektoryzacja przygotowuje grafikę; nie decyduje, które litery usunąć, ani nie wybiera breakpointu. Istniejąca czysta grafika SVG może przejść od razu do komponowania. Poradnik wektoryzacji wyjaśnia, kiedy konwersja pomaga.

Najczęstsze pytania

Czy SVG automatycznie upraszcza logo na małym ekranie? Ten przykład wybiera między dwoma przygotowanymi SVG. Skalowanie jednego pliku zachowuje jego oryginalną kompozycję; uproszczenie wymaga osobnej decyzji projektowej.

Dlaczego wąski kontener nadal pokazuje szczegółowe logo? Warunek szerokości źródła picture sprawdza viewport dokumentu. W testowanych viewportach 600 i 960 pikseli nawet kontener 120-pikselowy zachował szczegółowe źródło.

Jak potwierdzić, który plik został użyty? Sprawdź currentSrc, stan ładowania i naturalne wymiary obrazu. Przykład wypisuje je obok wymiarów elementu i kontenera.

Czy responsywne przełączanie będzie zawarte w pobranym SVG? Reguła wyboru źródła znajduje się w opakowaniu HTML. Zachowaj i przekaż szczegółowy lub kompaktowy SVG odpowiedni do faktycznego użycia odbiorcy.

Źródła

1. Element HTML picture — alternatywne źródła, warunki media i zachowanie rezerwowe.
2. Cecha media width CSS — warunek viewportu dokumentu w przykładzie.
3. Właściwość obrazu currentSrc — sprawdzenie adresu wybranego źródła.
4. CSS object-fit — dopasowanie każdej wybranej kompozycji wewnątrz prostokąta obrazu.
5. Element HTML img — prezentacja obrazu i teksty alternatywne.

Dla własnego logo PNG lub JPG przygotuj edytowalny wzorzec SVG, sprawdź kontur i otwory oraz zachowaj go obok zatwierdzonych układów. Następnie zweryfikuj wybrane źródło i widoczną kompozycję przy szerokościach viewportu używanych przez stronę.