Softonic

Generator Kisi SVG

Langkah 1 / 3
Berikutnya

Latar belakang berbasis kisi merupakan elemen utama dalam berbagai alat desain (Figma, Framer), halaman landing yang ditujukan bagi pengembang (Linear, Vercel), serta setiap antarmuka yang menginginkan tampilan mirip dengan gambar sketsa atau kertas grafik. Latar belakang ini juga termasuk salah satu yang paling ringan untuk dikirimkan, berupa pola <pattern> yang diulang dengan dua garis, biasanya berukuran kurang dari 300 byte. Generator ini dapat membuat kisi dengan ukuran sel, ketebalan garis, dan warna apa pun, sehingga Anda dapat menyesuaikannya untuk mendapatkan tampilan kisi bergaya Figma yang halus maupun tampilan sketsa yang jelas dan menonjol.

Cara membuat grid

  1. 1

    Atur dimensi kanvas

    Atur lebar dan tinggi dari 50 hingga 3.000 px. Kelipatan ukuran sel membantu menghindari sel parsial di tepi.

  2. 2

    Pilih ukuran sel

    Pilih dari 5 hingga 500 px. Coba 20–40 px untuk latar halus, 8–12 px untuk kertas grafik, atau 60–80 px untuk wireframe tegas.

  3. 3

    Pilih lebar garis dan warna

    Garis dengan ketebalan 0,5–1 px terbaca sebagai garis yang rapi; ketika ketebalannya melebihi 2 px, garis tersebut mulai tampak seperti digambar secara manual.

  4. 4

    Atur latar belakang

    Pilih warna latar solid yang akan dihasilkan SVG. Untuk membuat lapisan, salin SVG lalu ubah atau hapus `<rect>` latar dalam kode Anda sendiri.

  5. 5

    Salin SVG

    Lampirkan ke dalam penanda atau tautan inline pada URL data CSS untuk gambar latar belakang yang dapat ditempatkan secara berurutan (tileable).

Element pola

Setiap sel merupakan satu elemen <path> yang menggambar tepi kanan dan tepi bawah; dengan mengulangi elemen ini, seluruh kisi dapat dibentuk hanya menggunakan dua segmen garis per sel, bukan empat segmen.

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Keajaiban terletak pada lintasan M 40 0 L 0 0 0 40: dimulai dari titik (40, 0), melanjutkan ke garis hingga (0, 0), lalu ke garis hingga (0, 40). Lintasan ini hanya menggambar garis atas hingga sudut kiri atas, kemudian turun sepanjang sisi kiri; ketika digunakan untuk pembentukan grid, hasilnya adalah grid yang lengkap tanpa goresan ganda.

Panduan Penentuan Ukuran Pola

Kasus penggunaan Ukuran sel Garis Nuansa warna
Kanvas bergaya Figma 20–30 px 1 px #e5e7eb pada #fafafa
Kertas grafik 10–12 px 0,5 px #cbd5e1 pada #ffffff
Blueprint 40–60 px 1 px #bfdbfe pada #1e3a8a
Wireframe 80 px 1,5 px #9ca3af pada #ffffff
Terminal retro 16 px 1 px #22c55e pada #000000

Kisi utama + kisi minor

Jika Anda menginginkan tampilan berbasis blueprint dengan kisi halus serta kisi utama yang lebih kuat setiap N sel, letakkan dua latar belakang SVG secara bertumpuk.

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

Peramban ini menggabungkan kedua elemen tersebut dalam satu lapisan cat, tanpa menurunkan kinerja.

Aksesibilitas

Grid ini sepenuhnya bersifat dekoratif. Terapkan pada elemen semu (::before dengan position: absolute; inset: 0; z-index: -1;) agar pembaca layar dan parser konten hanya melihat konten utama, bukan latar belakangnya.

Pertanyaan yang Sering Diajukan

Garis SVG yang dibuat dengan lebar di bawah tingkat piksel dapat mengalami efek anti-aliasing. Lebar garis disesuaikan ke nilai piksel bulat (1 atau 2), dan lintasan digeser sejauh 0,5 piksel (untuk garis berlebar 1 piksel) agar sejajar dengan kisi piksel.

Tidak dapat digunakan dengan generator ini. Jaring heksagonal memerlukan elemen berbentuk segitiga yang lebarnya adalah √3 kali lebih besar daripada tingginya, serta jalur yang membentuk setengah heksagon. Gunakan alat khusus untuk jaring heksagonal atau gambar langsungnya di Figma.

Editor ini menghasilkan latar solid. Untuk membuat lapisan, salin SVG lalu ubah <rect> latar pertama menjadi fill="transparent" atau hapus dalam kode Anda sendiri.

Ya. Grid SVG berukuran 200–500 byte, dapat disesuaikan secara presisi dengan setiap resolusi layar (DPR), dan memungkinkan Anda mengubah warnanya menggunakan variabel CSS. Grid PNG umumnya berukuran 5–20 KB dan akan tampak berpiksel pada layar Retina.

Editor mengirim dimensi dan warna saat ini ke server kami untuk merender SVG. Dalam alur tiga langkah, pengaturan itu juga muncul di URL halaman. Jangan masukkan nilai rahasia; tidak ada unggahan berkas sumber atau proyek tersimpan.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain