Kode QR SVG dan Berkas Vektor: Unduh Contohnya, Lihat Isinya, Pakai di Mana Saja

Unduh Contoh SVG Kode QR

Mulailah dari berkasnya sendiri: unduh contoh SVG kode QR. Ukurannya 6.355 byte, simbol versi 6 berukuran 41 × 41 modul pada tingkat koreksi kesalahan H, yang mengodekan alamat halaman ini. Berkas ini dibuat dengan encoder yang sama yang dipakai KoloQR di peramban dan diperiksa dengan dekoder jsQR sebelum diterbitkan, pada 22 September 2026, jadi bisa dipindai. Untuk format mana yang perlu diunduh bagi pekerjaan tertentu - SVG, PNG, PDF, atau EPS - lihat SVG vs PNG vs PDF vs EPS untuk kode QR; halaman ini membahas cara mendapatkan, membaca, dan memakai SVG-nya sendiri.

Contoh ini sengaja dibuat sebagai SVG paling sederhana yang mungkin bagi sebuah kode QR. Modul persegi hitam di atas latar putih, zona tenang empat modul, tanpa logo, tanpa bingkai, tanpa sudut membulat, dan tanpa atribut width maupun height, sehingga alat desain membukanya pada ukuran bawaan apa pun yang dipakainya dan berkasnya bisa diperbesar dengan bersih dari sana. Kode bergaya dari generator adalah berkas yang lebih panjang dengan lebih banyak bagian; contoh inilah yang perlu dibuka di penyunting teks ketika pertanyaannya adalah apa sebenarnya SVG kode QR itu.

Satu-satunya aturan untuk contoh ini adalah apa yang dikodekannya. Memindainya membuka panduan ini, dan tidak ada apa pun di Illustrator, Figma, atau alat lain yang bisa membuatnya membuka hal lain, karena pola modulnya adalah alamatnya. Pakai sebagai pengganti sementara di maket, template, atau tata letak cetak selagi kode sebenarnya masih diputuskan, lalu ganti dengan kode yang dibuat dari tujuan sesungguhnya sebelum apa pun dicetak.

Apa Isi Berkas SVG Contoh, Elemen demi Elemen

SVG contoh ini berisi enam baris: deklarasi XML, sebuah komentar, elemen svg pembuka dengan viewBox, persegi panjang latar putih, satu jalur hitam yang memuat semua modul gelap, dan tag penutup. Itulah seluruh berkasnya, dan setiap bagian punya tugas yang diandalkan pemindai atau alat desain.

Data jalurnya dibaca dalam satuan modul. M4 4h7v1H4z berarti: pindah ke kolom 4, baris 4, gambar 7 unit ke kanan, 1 unit ke bawah, kembali ke kolom 4, lalu tutup - itulah tepi atas pola pencari kiri atas, tepat di dalam zona tenang empat modul. Setiap subjalur adalah bentuk yang sama dengan angka berbeda. Modul gelap yang bersebelahan dalam satu baris digabung menjadi satu deret alih-alih digambar sebagai satu persegi per modul, yang membuat berkasnya sedikit lebih kecil dan tidak mengubah apa pun dari geometri yang dilihat pemindai.

SVG kode QR dari generator lain akan berbeda dalam detailnya - satu persegi panjang per modul, satu grup per baris, transform alih-alih offset viewBox - dan tidak satu pun perbedaan itu berarti bagi pemindai. Yang penting ada di tabel: sebuah viewBox, latar terang di bawah zona tenang, dan modul gelap sebagai bentuk terisi tanpa stroke.

Apa Itu Kode QR Vektor, dan Kenapa Polanya Adalah Datanya

Berkas vektor adalah gambar yang disimpan sebagai bentuk dan koordinat, bukan piksel, sehingga bisa digambar ulang pada ukuran berapa pun tanpa kehilangan ketegasan tepinya. Kode QR vektor dengan demikian adalah sekumpulan bentuk terisi di atas kisi, dan kisinya adalah pesannya: pemindai membaca sel mana yang gelap dan mana yang terang, lalu mengubah susunan itu kembali menjadi alamatnya.

Modul adalah salah satu kotak kecil terang dan gelap yang membawa data sebuah kode QR, dan merupakan unit terkecil yang harus bisa dibedakan pemindai. Di contoh ini ada 1.681 posisi modul dan 823 di antaranya gelap. Yang 823 mana ditentukan encoder dari teksnya, tingkat koreksi kesalahannya, dan pola mask-nya, itulah sebabnya tidak ada alat desain yang punya kolom tempat alamat bisa diketik - alamatnya tidak disimpan di samping gambarnya, alamatnya adalah gambarnya.

Zona tenang adalah margin kosong di sekeliling kode QR yang memungkinkan pemindai mengenali di mana simbol dimulai dan berakhir, dan standarnya menetapkan empat modul di setiap sisi. Di berkas vektor, zona tenang mudah hilang, karena alat yang memangkas ke artwork yang terlihat akan memangkas ke modul gelap dan membuang marginnya. Contoh ini menjaga marginnya di dalam viewBox dan mewarnainya putih karena alasan itu. Zona tenang kode QR membahas apa yang terjadi bila zona itu hilang.

Apa Isi Ekspor SVG KoloQR

Unduhan SVG KoloQR adalah satu berkas bernama qr-by-koloqr-com.svg yang memuat kodenya sebagai bagian-bagian vektor yang diberi nama terpisah: latar, modul, tiga mata pencari, bingkai bila ada yang dipilih, logo bila ada yang ditambahkan, dan teks label apa pun yang sudah diubah menjadi outline. KoloQR, generator kode QR gratis dengan kode QR bundar dan berbentuk khusus, menulis berkas itu di peramban dan tidak menambahkan apa pun ke dalamnya - tanpa watermark, tanpa elemen pelacak, tanpa akun.

Apa yang dilakukan kode ekspor pada saat mengunduh, sesuai urutannya:

• Mengubah label menjadi outline. Kalau bingkai kode QR membawa teks seperti SCAN ME, ekspor menunggu font labelnya termuat dan menggambar ulang setiap label sebagai jalur sebelum serialisasi, sehingga berkasnya tidak pernah memuat elemen text yang butuh font terpasang di alur berikutnya.
• Menserialisasi artwork. Elemen svg yang tampil di layar ditulis keluar bersama viewBox-nya, dan berkasnya mendapat deklarasi XML bila belum memilikinya.
• Menambahkan width dan height eksplisit. Kedua atribut itu disalin dari viewBox agar alat desain yang membacanya, terutama Figma, menempatkan kodenya pada ukuran sebenarnya alih-alih kotak bawaan.
• Membuat id yang dirujuk menjadi unik. Id apa pun yang dirujuk sesuatu di dalam berkas - jalur potong, lengkung tak terlihat yang diikuti label melengkung - mendapat awalan yang unik untuk ekspor itu, sehingga dua kode yang dijatuhkan ke satu dokumen tidak bisa saling memotong. Id yang hanya menamai lapisan, seperti Background dan Logo, dibiarkan terbaca.

Bagian-bagian yang ditampilkan alat desain di panel lapisannya berasal dari berkasnya sendiri. Elemen akarnya bernama by KoloQR.com; latarnya adalah persegi panjang bernama Background, yang dihilangkan bila latar diatur transparan; modul data berada dalam grup yang diisi warna depan, setiap modul bentuknya sendiri - persegi, lingkaran, atau kapsul ketika pola pil menggabungkan satu deret; setiap mata pencari adalah satu jalur dengan lubang yang dipotong oleh isian even-odd sehingga bisa diwarnai ulang dengan satu klik; bingkai yang didesain adalah satu jalur dengan lubang sungguhan; logo berada dalam grup bernama Logo. Skalanya tetap sepuluh unit per modul, yang sudah dipakai panduan format untuk menurunkan angka PNG dan PDF, jadi tidak diulang di sini.

Markup yang sama itulah yang ditaruh Copy to Figma di papan klip. Tidak ada yang berbeda antara teks yang disalin dan berkas yang diunduh kecuali tempat mendaratnya, itulah sebabnya menyalin kode QR ke Figma menjelaskan lapisan-lapisan hasil tempelan persis dengan istilah di atas.

Cara Mendapatkan Kode QR sebagai SVG dengan KoloQR

Mendapatkan SVG cukup dengan satu kunjungan ke generator dan satu unduhan: masukkan isinya, beri gaya pada kodenya bila desain memerlukannya, pilih SVG di menu unduh, buka berkasnya di alat desain, lalu pindai proof-nya. Tidak ada akun, tidak ada langkah email, dan tidak ada batas ukuran berkas.

1. Buka Generator dan Masukkan Isinya. Buka generatornya lalu ketik URL, detail Wi-Fi, teks, atau isi lainnya. Tombol unduh tetap nonaktif sampai kolom isi terisi sesuatu, jadi penanda sementara bergaya yang tampil sebelum mengetik tidak bisa terekspor secara tidak sengaja.
2. Beri Gaya pada Kode Sebelum Mengekspor. Atur bentuk, pola modul, gaya mata, warna, bingkai, dan logo di sini, bukan di alat desain. SVG adalah potret dari pratinjaunya, dan lencana kontras generator memeriksa pasangan warnanya sebelum dituangkan ke berkas.
3. Pilih SVG di Menu Unduh. Klik panah di samping Download lalu pilih SVG. Berkas qr-by-koloqr-com.svg mendarat di folder unduhan; Copy to Figma ada di menu yang sama dan sebagai gantinya menaruh markup yang identik di papan klip.
4. Buka atau Tempatkan Berkasnya di Alat Desain. Tempatkan SVG di Illustrator, InDesign, atau Affinity, seret ke kanvas Figma atau Inkscape, atau unggah di Canva. Ubah ukuran dengan proporsi terkunci, dan biarkan zona tenang tetap di dalam artwork.
5. Pindai Proof-nya. Pindai kode yang sudah ditempatkan dari layar pada 100% dan, untuk cetak, dari proof cetak pada ukuran akhir, dengan iPhone dan ponsel Android. Pastikan alamat yang terbuka adalah yang dimasukkan di langkah 1.

Cara Memakai SVG Kode QR di Illustrator, Figma, Inkscape, dan Affinity

Keempat penyunting vektor ini membuka SVG kode QR sebagai bentuk yang bisa diedit, dan cara kerjanya sama di masing-masing: masukkan berkasnya, biarkan geometri modulnya, ubah warna lewat isian, dan ubah ukuran dengan kunci proporsi menyala. Nama menu di bawah adalah yang lazim; mereka berubah antar versi, jadi anggap sebagai petunjuk apa yang perlu dicari.

• Adobe Illustrator. Pakai File, lalu Place, atau buka SVG-nya langsung. SVG yang ditempatkan biasanya datang sebagai grup tertaut atau tersemat; lepaskan grupnya sekali kalau isiannya perlu diubah per bagian, lalu pilih bentuk modulnya dan atur isiannya. Tidak perlu langkah Expand - modulnya sudah berupa jalur, bukan efek hidup. Skalakan sambil menahan Shift, atau lewat panel Transform dengan kunci proporsi menyala.
• Figma. Seret berkas .svg ke kanvas, atau tempel markup SVG mentah dari papan klip. Pusat bantuan Figma menyatakan bahwa saat berkas SVG diimpor, ia tidak lagi diperlakukan sebagai gambar dan diubah menjadi lapisan vektor yang bisa diedit. Jalur lengkapnya, nama lapisan yang datang, dan edit yang aman ada di cara menyalin kode QR ke Figma.
• Inkscape. File, lalu Open, membuka SVG sebagai dokumen; File, lalu Import, biasanya menanyakan apakah SVG-nya disertakan sebagai objek yang bisa diedit atau sebagai gambar tertaut - pilih yang bisa diedit. SVG milik Inkscape sendiri adalah superset dari berkasnya, jadi menyimpannya sebagai Plain SVG setelahnya menjaganya tetap portabel.
• Affinity Designer. File, lalu Place, atau File, lalu Open. SVG yang ditempatkan biasanya datang sebagai dokumen tersemat yang bisa diedit di tempat atau dilepas grupnya; isiannya diubah dari panel warna, dan panel Transform punya kunci untuk penskalaan proporsional.

Di keempatnya, edit yang menggoda adalah memilih semua lalu menerapkan stroke, efek, atau gradien. Stroke adalah yang gagal secara diam-diam, dan bagian dua langkah setelah ini menjelaskan geometrinya. Warnai ulang isiannya, dan hanya isiannya.

Cara Memasukkan SVG Kode QR ke Canva, InDesign, Word, dan PowerPoint

Alat tata letak dan perkantoran menerima SVG sebagai gambar, bukan sebagai bentuk yang bisa diedit, dan itu tidak masalah untuk kode QR: kodenya perlu ditempatkan dan diatur ukurannya, bukan digambar ulang. Canva mengunggahnya, InDesign menempatkannya, dan Word serta PowerPoint untuk Microsoft 365 menyisipkannya dari menu Pictures.

• Canva. Unggah SVG lewat panel Uploads lalu seret ke desain. Canva menerima unggahan SVG, dengan batas ukuran berkas yang disebut pusat bantuannya per paket - SVG kode QR hanya beberapa kilobyte, jadi batasnya bukan masalah; yang jadi soal adalah apakah unggahan diizinkan di paket tertentu, dan halaman persyaratan unggah milik Canva sendiri adalah tempat memastikannya. Kalau unggahan SVG ditolak, unggah PNG yang diekspor pada ukuran cetak akhir sebagai gantinya. Membuat kode QR di Canva membahas seluruh jalurnya, dan perbandingan KoloQR vs Canva menjelaskan kenapa ekspor SVG milik Canva sendiri adalah jalan yang lebih sulit.
• Adobe InDesign. File, lalu Place, lalu klik atau seret untuk menetapkan bingkainya. InDesign memperlakukan SVG yang ditempatkan sebagai grafik: biasanya ia tidak akan mewarnai ulang isiannya, jadi atur warnanya sebelum mengekspor. Jaga skala pada 100% di kedua sumbu atau, bila harus berubah, ubah lebar dan tinggi dengan persentase yang sama.
• Word dan PowerPoint. Halaman dukungan Microsoft tentang mengedit gambar SVG menyatakan bahwa Word, PowerPoint, Outlook, dan Excel untuk Microsoft 365 di Windows, Mac, Android, dan Windows Mobile menyisipkan berkas SVG lewat Insert, lalu Pictures, lalu This Device. Versi lisensi permanen yang lebih lama bervariasi, itulah sebabnya PNG adalah lampiran yang lebih aman bila versi penerimanya tidak diketahui. Opsi Convert to Shape di tab Graphic Format memecah kodenya menjadi potongan-potongan yang bisa diedit; tidak ada alasan memakainya pada kode QR.
• Google Docs dan Slides. Keduanya belum mengimpor SVG saat tulisan ini dibuat, jadi sisipkan PNG. Ekspor pada dua kali ukuran tampilnya agar tetap tajam di layar berkerapatan tinggi.

Apa pun alatnya, pemeriksaan ukurannya sama. Kode QR cetak butuh kira-kira satu sentimeter lebar untuk setiap sepuluh sentimeter jarak baca, dan kalkulator ukuran cetak mengubah jarak baca menjadi lebar. Ubah ukuran SVG yang ditempatkan ke lebar itu dengan proporsi terkunci, dan periksa bahwa zona tenangnya masih berada di dalam bingkai penempatan alih-alih terpangkas olehnya.

Cara Memakai SVG Kode QR di Halaman Web dan di Percetakan

Di halaman web, rujuk SVG-nya dari elemen img dengan width dan height, dan ia akan tampil tajam di setiap layar. Di percetakan, kirim PDF kecuali percetakannya menyatakan menerima SVG - PDF adalah format yang paling sering disebut formulir unggah, dan panduan pendampingnya menjelaskan cara membuat PDF yang tetap vektor.

• Sebagai gambar. Tag img yang mengarah ke berkas .svg adalah jalur paling sederhana: peramban menskalakannya, dan viewBox tanpa atribut width atau height mengisi ukuran berapa pun yang diberikan tag-nya. Contoh ini tampil pada 4 piksel CSS per modul ketika tag-nya selebar 196 piksel, batas bawah yang masuk akal untuk kode yang akan dipindai orang dari layar.
• Inline. Menempelkan markup SVG ke dalam HTML memungkinkan CSS mewarnai ulang jalurnya, yang berguna untuk desain mode gelap ketika kodenya harus berbalik menjadi modul terang di atas gelap - kombinasi yang biasanya terbaca oleh kamera bawaan ponsel dan sering tidak terbaca oleh pemindai lama, jadi ujilah. Inline juga berarti berkasnya diunduh bersama halaman alih-alih di-cache terpisah.
• Bukan sebagai gambar latar dengan cover atau contain. Keduanya bisa memangkas atau mendistorsi kotak tempat kodenya berada, dan zona tenang yang terpangkas adalah kegagalan yang hanya muncul di sebagian ponsel.

Untuk cetak, pertanyaannya adalah apa yang ditempatkan alur kerja percetakan. Sebagian besar menyebut PDF, sebagian menerima SVG, dan segelintir sistem produksi lama meminta EPS. Langkah-langkah mengubah SVG menjadi PDF vektor penuh, dan kapan EPS adalah jawaban yang tepat, ada di SVG vs PNG vs PDF vs EPS. Daftar periksa cetak menelusuri ukuran, kontras, dan bahan sebelum berkasnya masuk cetak massal. Mesin grafir laser memakai SVG itu sendiri, diekspor tanpa latar; pengaturannya ada di grafir laser kode QR.

Aturan yang Menjaga Kode QR Vektor Tetap Terpindai Setelah Diedit

Kode QR vektor bertahan dari edit apa pun yang membiarkan kisi modul dan kontrasnya, dan gagal pada edit apa pun yang tidak. Empat operasi aman: mewarnai ulang seluruh jalur, mengubah ukuran dengan proporsi terkunci, memindahkan, memutar. Sisa daftarnya adalah hal yang perlu dihindari, dengan alasan mengapa masing-masing merusak kodenya.

• Jangan pernah memindahkan atau menghapus titik jalur. Setiap modul gelap adalah data, dan setiap titik milik salah satunya. Modul yang diseret setengah sel ke kanan terbaca sebagai dua sel yang salah; deret yang dihapus adalah data yang dihapus, dan koreksi kesalahan menghabiskan jatahnya untuk kehilangan itu alih-alih untuk kerusakan di dunia nyata.
• Warnai ulang seluruh jalur, bukan modul terpilih. Kode dengan dua warna modul dibaca pemindai sebagai satu warna gelap dan satu warna terang, dan yang mana yang mana bergantung pada ambang yang dipilih ponsel. Pilih satu warna gelap dan satu terang, lalu periksa pasangannya dengan pemeriksa kontras kode QR.
• Pertahankan zona tenangnya. ISO/IEC 18004 menetapkan empat modul margin bersih di setiap sisi. Memangkas artboard ke modul gelap, atau membiarkan bingkai atau foto masuk ke margin, menghapus batas yang dicari pemindai.
• Jangan beri stroke pada modul. Stroke digambar berpusat pada tepi jalur, jadi stroke sepersepuluh modul menebalkan setiap modul gelap sepersepuluh di tiap sisi dan menyusutkan setiap celah terang seperlima. Itu geometri, bukan soal selera: pada stroke setengah modul, setiap sel terang di antara dua sel gelap tertutup sepenuhnya, dan kodenya berhenti menjadi kisi.
• Tanpa gradien atau transparansi pada modul. Gradien membuat sebagian modul lebih terang dari yang lain, dan pemindai butuh setiap modul jatuh dengan jelas di sisi gelap ambangnya; transparansi membiarkan latar tembus, yang merupakan masalah yang sama lewat jalan lain.
• Jangan skalakan satu sumbu saja. Regangan 4% tak terlihat di layar dan membuat pola pencari tidak persegi, yang merupakan hal pertama yang diperiksa dekoder. Kunci proporsinya sebelum menyentuh pegangan.

Dua pemeriksaan menutup lingkarannya. Jatuhkan artwork jadi ke validator kode QR, yang melaporkan apakah kode bergaya itu masih terdekode dan menjadi apa, lalu pindai proof dari keluaran sebenarnya - layar pada 100%, atau lembar cetak pada ukuran akhir - dengan ponsel. Penataan gaya tidak pernah memperbaiki pemindaian; tujuan aturan-aturan ini adalah menjaga kode yang diedit tetap sama terpindainya seperti kode polos asalnya, dan hanya pemindaian yang memastikan hal itu tercapai.

Di Mana Unduhan Kode QR Vektor Gratis Bermasalah

SVG kode QR gratis dari situs stok atau ikon adalah kode yang berfungsi tapi mengarah ke tempat yang salah, dan tidak ada edit sebanyak apa pun yang bisa mengarahkannya ulang. Tiga mode kegagalannya layak diketahui sebelum mengunduh, karena masing-masing terlihat baik di pratinjau dan gagal di pemindai atau di pelanggan.

• SVG stok mengodekan alamat orang lain. Sebagian besar kode QR stok memuat https://example.com, portofolio senimannya, atau situs stoknya sendiri. Pola modulnya adalah alamat itu, jadi mewarnai ulang, mengubah bentuk, dan mengganti labelnya tetap membuatnya mengarah ke sana. Kode stok yang dicetak di menu mengirim pengunjung ke situs orang asing.
• PNG yang divektorkan bukan kisi yang bersih. Kode QR raster yang dilewatkan penelusuran otomatis kembali sebagai bentuk dengan sudut membulat, ukuran sel yang sedikit tidak rata, dan tepi yang tidak lagi berada di kisi modul. Masing-masing memakan margin yang dimiliki dekoder untuk pencahayaan dan sudut. SVG vs PNG menjelaskan kenapa membuat ulang lebih baik daripada menelusuri.
• Kodenya membawa stroke atau ketebalan garis hasil foto. Sebagian kode QR vektor digambar dari foto atau hasil pindai kode cetak, sehingga modulnya membawa sebaran tinta dari cetakan aslinya. Pemindai melihat modul gelap yang lebih gemuk dan modul terang yang lebih tipis sejak awal, sebelum cetakan berikutnya menambahkan sebarannya sendiri.

Aturan keputusannya singkat. Kalau Anda butuh penanda sementara untuk maket, pakai contoh di halaman ini - bersih, bisa dipindai, dan menyatakan ke mana ia mengarah. Kalau Anda butuh kode yang mengarah ke halaman Anda, buat sendiri: kode QR statis hanya butuh beberapa detik untuk dibuat, diekspor sebagai SVG tanpa akun, dan mengodekan persis alamat yang Anda ketik. Jenis kode mana yang dibuat, statis atau dinamis, adalah pilihan terpisah yang dibahas di kode QR statis vs dinamis; KoloQR hanya membuat kode statis.