> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Ruang Bebas Logo: Hitung dan Pertahankan Marginnya > Tentukan satuan ruang bebas logo, hitung seluruh zona eksklusi, dan simpan dalam SVG tanpa menyamakan ukuran gambar dengan kanvas bermargin. Source: https://perfectvector.com/id/blog/logo-clear-space-calculation Language: id Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Hitung ruang bebas logo dari satuan yang ditentukan dalam gambar yang disetujui, lalu ukur ke luar dari batas terlihat logo lengkap. Jika satuan pilihan Anda adalah 10 dan logo berukuran 150 kali 40, zona eksklusi satu satuan di setiap sisi berukuran 170 kali 60. Logo itu sendiri tetap berukuran 150 kali 40. Ruang bebas adalah area di sekitar logo yang harus dibiarkan kosong dari konten lain. Margin berkas dapat membantu membawa ruang tersebut ke tata letak, tetapi kanvas kosong hanyalah salah satu cara penyerahan. Pedoman mereklah yang menetapkan aturannya. Jika Anda menyiapkan aset merek yang sudah ada, gunakan aturan yang disetujui sebelum membuat aturan baru. Panduan ini mengikuti satu komposisi logo asli melalui perhitungan, ekspor SVG, dan pengubahan ukuran. Jika satu-satunya sumber Anda adalah gambar raster, pulihkan dahulu bentuk yang terlihat; alat vektorisasi gambar tidak dapat menyimpulkan zona eksklusi yang disetujui. ## Pilih satuan yang berasal dari logo ini Gunakan bagian terukur yang tetap proporsional saat logo yang disetujui diubah skalanya: tinggi simbol, dimensi huruf tertentu, atau pecahan yang ditetapkan dari seluruh gambar. Jelaskan persis apa yang diukur. Hindari aturan seperti “sisakan sedikit ruang” atau kotak bertanda X tanpa penjelasan. Pedoman merek resmi menunjukkan mengapa ini merupakan kebijakan desain, bukan rasio universal. [Panduan ruang bebas University at Buffalo](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) menggunakan tinggi UB yang saling bertaut di sekitar komposisi merek utama, dengan panduan terpisah untuk gambar garis. [Panduan Vevo](https://brand.vevo.com/logo/clearspace/) membedakan logo dengan tinggi di atas dan di bawah 30 px serta memberikan jarak khusus konteks web dan tablet. Ikuti aturan untuk logo dan penggunaan yang sebenarnya. Dalam contoh asli kami, simbol bundar memiliki tinggi 40 satuan. Kami memilih X sebesar seperempat tinggi itu: X = 10. Margin yang diperlukan adalah satu X pada setiap sisi. Ini aturan buatan untuk contoh ini, bukan anjuran agar semua merek menggunakan 25% tinggi simbolnya. Tuliskan aturan dengan bahasa sederhana: “Untuk komposisi horizontal ini, X sama dengan seperempat diameter lingkaran. Sisakan setidaknya satu X di luar setiap tepi komposisi lengkap.” Kalimat tersebut membawa kebijakannya meskipun aplikasi memangkas kanvas kosong. ## Ukur komposisi lengkap, lalu tambahkan margin Komposisi logo adalah susunan simbol dan logotipe yang disetujui untuk digunakan bersama. Ukur susunan lengkap tersebut. Jika hanya memakai batas lingkaran, huruf akan berada di luar perhitungan zona eksklusi Anda. Lingkaran dan tiga huruf yang kami gambar membentang dari x = 0 hingga 150 dan y = 0 hingga 40. Contoh ini tidak memiliki goresan, bayangan, atau objek tersembunyi. Karena itu, persegi panjang eksklusi membentang dari x = -10 hingga 160 dan y = -10 hingga 50. ```text X = circle height / 4 = 40 / 4 = 10 zone width = artwork width + 2X = 150 + 20 = 170 zone height = artwork height + 2X = 40 + 20 = 60 ``` Jika gambar Anda memiliki goresan atau efek terlihat, sertakan jangkauan tampilannya dalam peninjauan. Pengukuran geometri saja dapat berbeda dari hasil yang digambar. [Panduan kotak pembatas SVG](https://perfectvector.com/id/blog/svg-bounding-box) menjelaskan perbedaan pengukuran tersebut; di sini kami sengaja menggunakan geometri isian sederhana. ![Komposisi asli lingkaran dan logotipe yang sama dengan batas rapat, panduan zona eksklusi sepuluh satuan, dan SVG bermargin dalam dua ukuran](https://perfectvector.com/blog/logo-clear-space-calculation/clear-space-bounds.webp) *Gambar dengan isian berukuran 150 kali 40 satuan. Margin pilihan 10 satuan menghasilkan kanvas 170 kali 60. Panduan ini untuk dokumentasi dan tidak ada dalam gambar yang diserahkan.* ## Bawa aturan dalam SVG bermargin [viewBox SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) memetakan persegi panjang koordinat internal ke viewport yang ditampilkan. Dalam contoh ini, `viewBox="-10 -10 170 60"` menyertakan margin hasil perhitungan tanpa memindahkan atau memperbesar gambar. Simpan contoh lengkap ini sebagai `logo-padded.svg`. Huruf logotipe merupakan bentuk yang digambar, sehingga tidak bergantung pada font. Desain lingkaran dan huruf ini adalah gambar contoh asli, bukan aset yang disetujui milik merek lain. ```xml ``` Untuk membuat aset pendamping berbatas rapat, gunakan `width="150"`, `height="40"`, dan `viewBox="0 0 150 40"` sambil mempertahankan lingkaran dan jalur yang sama. Beri nama berkas agar penerima dapat mengenali mana yang menyertakan margin. Simpan panduan pengukuran dalam dokumen merek atau lapisan tinjauan terpisah, bukan dalam gambar yang akan ditempatkan. > **Kanvas kosong tetap perlu diperiksa penempatannya** > > SVG bermargin menyediakan ruang di dalam viewport-nya. Berkas itu tidak dapat mencegah objek tata letak lain menumpuk viewport tersebut atau menjamin pengimpor mempertahankan batasnya. Periksa penempatan sebenarnya berdasarkan aturan tertulis. ## Ubah ukuran aset tanpa mengecilkan logo yang dimaksud Tentukan apakah lebar merujuk pada gambar terlihat atau seluruh berkas bermargin. Pada lebar berkas 170 px, gambar contoh memiliki lebar 150 px dan margin 10 px. Pada lebar berkas 340 px, gambar memiliki lebar 300 px dan margin 20 px. Aturan proporsional bertahan dalam pengubahan ukuran seragam. Jika arahan meminta logo terlihat selebar 300 px, atur berkas bermargin ini menjadi 340 px. Mengatur berkas bermargin menjadi 300 px hanya menghasilkan gambar terlihat sekitar 264,7 px, karena 300 × 150 / 170 kira-kira 264,7. | Yang Anda tetapkan | Lebar viewport bermargin | Lebar gambar terlihat | Margin samping | | ------------------------------------ | ------------------------ | --------------------- | --------------- | | Contoh dasar | 170 px | 150 px | 10 px | | Dua kali ukuran contoh | 340 px | 300 px | 20 px | | Seluruh berkas diatur menjadi 300 px | 300 px | Sekitar 264,7 px | Sekitar 17,6 px | Catatan metode: kami merender SVG lengkap berbatas rapat dan bermargin di Chromium. Batas geometris gambar berukuran 150 kali 40 satuan. Pada lebar bermargin 170 px dan 340 px, lebar horizontal gambar yang diukur adalah 150 px dan 300 px, dengan margin 10 px dan 20 px. Ini memverifikasi contoh yang dibuat di browser; bukan membuktikan perilaku impor setiap editor. Jika logo terlihat terlalu kecil, periksa kanvas berkas sebelum memperbesar objek secara acak. Jika ruang hilang setelah impor, periksa batas yang diimpor pada aplikasi tujuan dan pulihkan margin dari aturan X tertulis. Untuk logo lebar dalam bingkai berbeda, gunakan [penyesuaian rasio aspek SVG](https://perfectvector.com/id/blog/svg-preserveaspectratio) untuk memahami ruang kosong tambahan akibat penempatan. ## Peran PerfectVector dalam penyerahan logo PerfectVector dapat memulihkan bentuk vektor saat merek hanya memiliki salinan raster logo. Setelah bentuk tersedia, bandingkan logo lengkap dengan referensi yang disetujui, bersihkan bagian latar yang tidak disengaja, dan terapkan aturan ruang bebas merek yang terdokumentasi secara terpisah. [Alur vektorisasi logo](https://perfectvector.com/id/vectorize-logo) membahas tahap pemulihan bentuk. Mintalah master vektor asli dan pedoman merek terlebih dahulu. Berkas tersebut lebih baik dalam mempertahankan gambar dan keputusan jarak yang dimaksud daripada penelusuran baru. Tepi kosong JPG mungkin hanya margin ekspor yang tidak disengaja; itu bukan bukti kebijakan merek. [Panduan format berkas logo](https://perfectvector.com/id/blog/logo-file-formats) membantu memilih berkas yang diserahkan, sedangkan [panduan vektorisasi logo](https://perfectvector.com/id/blog/how-to-vectorize-a-logo) membahas persiapan dan pemeriksaan sumber. Akhiri dengan memeriksa gambar lengkap, definisi X tertulis, dimensi berkas bermargin, dan tata letak sekitarnya yang sebenarnya. Simpan master berbatas rapat serta aset penempatan yang dimaksud. Pemeriksaan penyerahan lebih lanjut tersedia di [pustaka alur kerja blog](https://perfectvector.com/id/blog). ## Tanya jawab ### Apakah ruang bebas logo selalu seperempat tinggi logo? Tidak. Seperempat tinggi lingkaran adalah aturan yang dipilih untuk contoh asli ini. Merek yang sudah ada dapat menetapkan satuan, rasio, dan pengecualian lain untuk penggunaan tertentu. ### Haruskah saya menambahkan persegi panjang putih untuk menjaga ruang bebas? Anda dapat menyediakan ruang kosong dengan viewBox SVG tanpa menambahkan persegi panjang yang diwarnai. Persegi panjang putih mengubah tampilan gambar pada latar berwarna. Uji berkas transparan bermargin pada penempatan yang dimaksud. ### Apakah SVG bermargin otomatis menegakkan pedoman merek? Tidak. SVG membawa ruang kosong dalam viewport-nya, tetapi pengimpor dapat memangkas batas dan objek tata letak dapat menumpuknya. Aturan tertulis dan pemeriksaan penempatan akhir tetap diperlukan. ## Sumber 1. [University at Buffalo — Ruang bebas](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) — Memberikan contoh resmi satuan berbasis logo dan pengecualian khusus penggunaan. 2. [Vevo — Ruang bebas logo](https://brand.vevo.com/logo/clearspace/) — Menunjukkan bagaimana panduan ruang bebas berubah menurut ukuran logo dan konteks digital. 3. [MDN — SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) — Menjelaskan persegi panjang koordinat yang digunakan untuk membawa margin kosong pada contoh. *** Jika vektor asli hilang, [pulihkan logo raster Anda dengan PerfectVector](https://perfectvector.com/id/vectorize-logo). Periksa komposisi lengkap terhadap referensi, lalu terapkan aturan ruang bebas yang disetujui dan periksa ukuran logo terlihat pada penempatan akhir. ## Explore - [Read the HTML article](https://perfectvector.com/id/blog/logo-clear-space-calculation) - [Pusatkan Logo secara Optis Tanpa Mengubah Master](https://perfectvector.com/id/blog/logo-optical-centering.md) - [Desain Label Tenun: Jaga Logo Jelas pada Ukuran Kecil](https://perfectvector.com/id/blog/woven-label-logo-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)