> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

> Wybierz szczegółowe lub kompaktowe logo SVG warunkami media w picture. Sprawdź źródło przy trzech szerokościach i oddziel zmianę kompozycji od skalowania.

Source: https://perfectvector.com/pl/blog/responsive-svg-logo-lockup

Language: pl
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/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ę**

![Koncepcyjne porównanie szczegółowej kompozycji pustego rombu, jej mniejszej przeskalowanej kopii i kompaktowego znaku bez liter](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*Ilustracja: przeskalowany układ zachowuje szczegóły, a przygotowana kompaktowa wersja może pomijać litery. Faktyczny wybór źródła i granice elementów poniżej pochodzą z niezależnego przykładu Cove, a nie z tego wygenerowanego schematu.*

## 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
<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
<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](https://perfectvector.com/pl/blog/logo-file-formats) 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.

```html
<!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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/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.

| Viewport dokumentu | Obraz ze zmianą kompozycji, kontener 200 pikseli | Zwykłe skalowanie, kontener 200 pikseli | Obraz ze zmianą kompozycji, kontener 120 pikseli |
| ------------------ | ------------------------------------------------ | --------------------------------------- | ------------------------------------------------ |
| 480 pikseli        | compact.svg                                      | detailed.svg                            | compact.svg                                      |
| 600 pikseli        | detailed.svg                                     | detailed.svg                            | detailed.svg                                     |
| 960 pikseli        | detailed.svg                                     | detailed.svg                            | detailed.svg                                     |

Sprawdziliśmy wybrany adres przez [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://perfectvector.com/pl/blog/svg-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](https://perfectvector.com/pl/blog/inline-svg-vs-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](https://perfectvector.com/pl/vectorize-logo), 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](https://perfectvector.com/pl/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) — alternatywne źródła, warunki media i zachowanie rezerwowe.
2. [Cecha media width CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) — warunek viewportu dokumentu w przykładzie.
3. [Właściwość obrazu currentSrc](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) — sprawdzenie adresu wybranego źródła.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) — dopasowanie każdej wybranej kompozycji wewnątrz prostokąta obrazu.
5. [Element HTML img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — prezentacja obrazu i teksty alternatywne.

***

Dla własnego logo PNG lub JPG [przygotuj edytowalny wzorzec SVG](https://perfectvector.com/pl/vectorize-logo), 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ę.

## Explore

- [Read the HTML article](https://perfectvector.com/pl/blog/responsive-svg-logo-lockup)
- [Pole ochronne logo: oblicz i zachowaj margines](https://perfectvector.com/pl/blog/logo-clear-space-calculation.md)
- [Jak zwektoryzować logo i sprawdzić jakość SVG](https://perfectvector.com/pl/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)