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

# Logo SVG Responsif: Ganti Komposisi pada Ukuran Kecil

> Pilih logo SVG terperinci atau ringkas dengan kondisi media picture. Uji sumber terpilih pada tiga lebar viewport dan pisahkan arahan visual dari penskalaan.

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

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

Logo SVG responsif dapat beralih antara komposisi terperinci dan tanda ringkas alih-alih mengecilkan semua bagian bersama-sama. Buat kedua komposisi terlebih dahulu, lalu gunakan sumber `<picture>` dengan kondisi media untuk memilihnya. Periksa `currentSrc` gambar pada lebar yang ingin Anda dukung.

Contoh ini memakai komposisi Cove fiktif asli: wajik berlubang dengan tulisan yang digambar, ditambah versi tanda saja. Pergantiannya bergantung pada lebar viewport dokumen. Wadah sempit di dalam halaman lebar tidak memicu pergantian yang sama.

## Penskalaan dan arahan visual menyelesaikan pekerjaan berbeda

Penskalaan biasa mempertahankan seluruh komposisi: simbol, tulisan, dan jaraknya mengecil bersama-sama. Arahan visual memilih komposisi lain yang dibuat sebelumnya. Menghapus tulisan atau menata ulang tanda adalah keputusan desain; berkas SVG tidak otomatis membuat keputusan itu karena dapat diskalakan.

[Referensi picture HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) menjelaskan sumber alternatif yang dipilih melalui kondisi media dan fallback `img`. Di sini kami menawarkan SVG ringkas pada 599 piksel atau lebih sempit, serta SVG terperinci selainnya. Bingkai gambar tetap berukuran sama sementara isinya berubah.

**Skalakan komposisi atau pilih komposisi lain**

![Perbandingan konseptual komposisi wajik berlubang terperinci, salinan hasil pengecilannya, dan tanda ringkas tanpa tulisan](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*Ilustrasi: komposisi yang diskalakan mempertahankan detail, sedangkan versi ringkas yang dibuat tersendiri dapat menghilangkan tulisan. Pemilihan sumber dan batas elemen sebenarnya di bawah berasal dari kode awal Cove independen, bukan diagram yang dihasilkan ini.*

## Buat dua berkas yang bisa diedit

Simpan komposisi terperinci asli ini sebagai `detailed.svg`. Huruf berupa path yang digambar, sehingga contoh kecil ini tidak membutuhkan berkas font:

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

Simpan versi ringkas sebagai `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>
```

Path wajik identik dalam kedua berkas. Berkas terperinci berisi lima path; berkas ringkas berisi satu. Tidak ada yang menyertakan elemen image atau teks hidup. Kedua lebar `viewBox` berbeda karena komposisinya berbeda, bukan karena satu berkas diskalakan secara seragam.

Simpan kedua versi sumber. Untuk merek Anda sendiri, tentukan fitur yang harus tetap dikenali dalam komposisi ringkas, lalu periksa bukaan, margin, dan proporsinya. [Panduan format berkas logo](https://perfectvector.com/id/blog/logo-file-formats) kami membahas paket sumber dan penyerahan yang lebih luas; contoh ini menambahkan pilihan peramban di antara dua versi yang disetujui.

## Jalankan kode awal picture lengkap

Simpan sebagai `starter.html` di samping kedua SVG dan sajikan folder secara lokal. Dengan Python terinstal, `python3 -m http.server 8766` merupakan salah satu opsi; lalu buka `http://localhost:8766/starter.html` di peramban.

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

Kondisi medianya adalah `(max-width: 599px)`. [Fitur media width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) CSS mengevaluasi lebar viewport. Pada 600 piksel, kondisi bernilai false, sehingga kode awal memilih sumber `img` terperinci. Angka ini contoh breakpoint untuk tata letak ini, bukan aturan desain merek.

CSS menyediakan tinggi gambar 80 piksel dan memakai [`object-fit: contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) untuk memuat gambar terpilih di dalam kotak elemennya. Ini menjaga kedua komposisi terlihat tanpa meregangkannya ke rasio aspek yang sama. Terapkan gaya penyesuaian pada `img`, yang menampilkan sumber terpilih.

`alt="Cove"` mengidentifikasi merek fiktif pada kedua kasus. Beri gambar Anda alternatif teks yang sesuai, seperti dijelaskan [referensi img HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img). Tanda ringkas tidak boleh kehilangan nama aksesibelnya saat tulisan terlihat menghilang.

## Pilihan peramban pada tiga lebar

Kami membuka kode awal yang sama persis di Chrome pada lebar viewport dokumen 480, 600, dan 960 piksel. Pada setiap lebar, ketiga gambar selesai dimuat. Wadah utama tetap selebar 200 piksel dan kontrol yang lebih sempit tetap 120 piksel.

| Viewport dokumen | Gambar dengan arahan visual, wadah 200 piksel | Penskalaan biasa, wadah 200 piksel | Gambar dengan arahan visual, wadah 120 piksel |
| ---------------- | --------------------------------------------- | ---------------------------------- | --------------------------------------------- |
| 480 piksel       | compact.svg                                   | detailed.svg                       | compact.svg                                   |
| 600 piksel       | detailed.svg                                  | detailed.svg                       | detailed.svg                                  |
| 960 piksel       | detailed.svg                                  | detailed.svg                       | detailed.svg                                  |

Kami memeriksa URL terpilih melalui [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc), beserta dimensi gambar yang dimuat. URL terpilih saja bukan pengujian keberhasilan pemuatan: periksa juga `complete` dan dimensi intrinsiknya. Sumber ringkas kami melaporkan 96×96; sumber terperinci melaporkan 300×96.

Elemen gambar utama tetap 200×80 pada ketiga lebar. Kontrol sempit tetap 120×80. Pada 480 piksel, tanda ringkas terpusat dalam setiap bingkai sementara kontrol penskalaan biasa masih menampilkan seluruh komposisi. Pada 600 dan 960 piksel, mempersempit wadah menjadi 120 piksel mengecilkan komposisi terperinci; tidak memilih berkas ringkas.

Perbedaan itu penting dalam sidebar atau komponen yang dapat dipakai ulang. Kondisi media HTML ini merespons viewport, bukan lebar wadah yang diukur. Jika pilihan logo harus bergantung pada lebar yang tersedia bagi komponen, rencanakan dan uji mekanisme terpisah itu alih-alih menganggap breakpoint ini mengamati komponen.

Hasil ini mencakup berkas asli, satu peramban, dan tiga lebar viewport eksplisit. Hasilnya tidak memastikan setiap peramban, metode penyematan, atau tujuan ekspor. Kode awal juga tidak menguji aturan media di dalam SVG eksternal.

## Periksa bingkai dan gambar secara terpisah

Kotak elemen tidak sama dengan batas logo yang dicat. Batas geometri peramban sumber terperinci adalah x8, y8, lebar274, tinggi80 di dalam viewBox 300×96. Batas sumber ringkas adalah x8, y8, lebar80, tinggi80 dalam viewBox 96×96. Margin tersebut tetap menjadi bagian perhitungan penyesuaian sumber.

Jika logo terpilih terlihat terlalu kecil, periksa ruang kosong sumber sebelum memperbesar dimensi elemen. Jika terlihat meregang, periksa kotak gambar dan aturan penyesuaian. [Panduan preserveAspectRatio](https://perfectvector.com/id/blog/svg-preserveaspectratio) menjelaskan perhitungan viewport SVG yang terkait; mengubah pemetaan itu sendiri tidak menciptakan komposisi kedua.

Kode awal memakai gambar SVG eksternal melalui `img`. Gunakan [panduan SVG inline versus img](https://perfectvector.com/id/blog/inline-svg-vs-img) saat perlu memilih pendekatan penyematan lain. Berkas SVG yang diunduh atau dicetak tidak menyertakan pembungkus pemilihan sumber HTML ini: serahkan komposisi sebenarnya yang dibutuhkan penerima dan simpan versi yang bisa diedit.

## Siapkan versi dari logo raster

Jika satu-satunya gambar merek adalah PNG atau JPG dan Anda membutuhkan geometri yang bisa diedit, [siapkan logo SVG dengan PerfectVector](https://perfectvector.com/id/vectorize-logo), periksa siluet dan bukaan dalam, lalu simpan master bersih. Kemudian buat komposisi terperinci dan ringkas serta uji pemilihannya pada halaman. Vektorisasi menyiapkan gambar; tidak memutuskan tulisan mana yang dihapus atau memilih breakpoint. Gambar SVG bersih yang sudah ada bisa langsung masuk ke pekerjaan komposisi. [Panduan vektorisasi](https://perfectvector.com/id/blog/what-is-image-vectorization) menjelaskan kapan konversi membantu.

## Pertanyaan umum

**Apakah SVG otomatis menyederhanakan logo pada layar kecil?**
Contoh ini memilih di antara dua berkas SVG yang dibuat tersendiri. Menskalakan satu berkas mempertahankan komposisi aslinya; penyederhanaan membutuhkan keputusan desain terpisah.

**Mengapa wadah sempit masih menampilkan logo terperinci?**
Kondisi lebar sumber picture memeriksa viewport dokumen. Pada viewport 600 dan 960 piksel yang diuji, bahkan wadah 120 piksel mempertahankan sumber terperinci.

**Bagaimana saya memastikan berkas mana yang dipakai?**
Periksa currentSrc, status pemuatan, dan dimensi intrinsik gambar. Kode awal mencetaknya bersama dimensi elemen dan wadah.

**Apakah pergantian responsif disertakan saat saya mengunduh SVG?**
Aturan pemilihan sumber berada dalam pembungkus HTML. Simpan dan serahkan SVG terperinci atau ringkas yang dibutuhkan penggunaan sebenarnya oleh penerima.

## Sumber

1. [Elemen picture HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) — sumber alternatif, kondisi media, dan perilaku fallback.
2. [Fitur media width CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) — kondisi viewport dokumen dalam kode awal.
3. [Properti currentSrc gambar](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) — pemeriksaan URL sumber terpilih.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) — penyesuaian setiap komposisi terpilih dalam bingkai gambar.
5. [Elemen img HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — penyajian gambar dan alternatif teks.

***

Untuk logo PNG atau JPG Anda sendiri, [siapkan master SVG yang bisa diedit](https://perfectvector.com/id/vectorize-logo), periksa kontur dan bukaannya, lalu simpan bersama komposisi yang disetujui. Kemudian verifikasi sumber terpilih dan komposisi terlihat pada lebar viewport yang akan dipakai halaman.

## Explore

- [Read the HTML article](https://perfectvector.com/id/blog/responsive-svg-logo-lockup)
- [Ruang Bebas Logo: Hitung dan Pertahankan Marginnya](https://perfectvector.com/id/blog/logo-clear-space-calculation.md)
- [Cara Memvektorisasi Logo: Auto-Trace vs Gambar Ulang (dan Cara Mengenali Vektor Palsu)](https://perfectvector.com/id/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)