Softonic

Generator Bentuk SVG

Langkah 1 / 2

Sebagian besar sistem desain hanya butuh sedikit kosakata bentuk: lingkaran untuk avatar, persegi untuk chip status, segitiga untuk ikon putar, bintang untuk rating, heksagon untuk lencana. Generator ini merender ketujuh bentuk standar (lingkaran, persegi, segitiga, bintang, heksagon, pentagon, hati) dengan geometri yang dikalibrasi sempurna, titik bintang pada jari-jari dalam yang benar, heksagon dan pentagon berorientasi titik-atas, hati di tengah kanvas, dan menghasilkan <svg> siap ditempel.

Cara menghasilkan bentuk

  1. 1

    Pilih bentuk

    Lingkaran, persegi, segitiga, bintang, pentagon, heksagon, atau hati.

  2. 2

    Setel ukuran dan stroke

    Ukuran kanvas dalam piksel. Lebar stroke mengontrol bobot outline; 0 menghapus outline.

  3. 3

    Pilih warna fill dan stroke

    Warna hex apa pun. Setel fill ke `none` untuk bentuk berongga.

  4. 4

    Untuk bintang, setel titik

    Primitif bintang menerima 3-12 titik. Lima itu klasik; tujuh memberi tampilan lencana sheriff.

  5. 5

    Salin SVG

    Markup menggunakan primitif SVG yang cocok (`<circle>`, `<rect>`, `<polygon>`, `<path>`) untuk byte minimum.

Geometri bentuk sekilas

Bentuk Primitif SVG Parameter yang penting
Lingkaran <circle> jari-jari, fill, stroke
Persegi <rect> lebar, tinggi, stroke (tanpa rx di sini)
Segitiga <polygon> (3 titik) sama sisi, mengarah ke atas
Bintang <polygon> (N × 2) titik (3-12), rasio jari-jari dalam/luar
Pentagon <polygon> (5 titik) berorientasi titik-atas
Heksagon <polygon> (6 titik) berorientasi titik-atas (putar 30° untuk datar)
Hati <path> dengan Bézier di tengah kanvas, simetris

Contoh output: bintang lima titik

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Jari-jari dalam ditetapkan pada 40% dari jari-jari luar, yang cocok dengan proporsi klasik yang dipakai pada bintang bendera dan piala.

Kasus penggunaan

  • Avatar dan masker, lingkaran sebagai clip-path untuk foto profil.
  • Chip status, persegi (dibulatkan via CSS border-radius atau rx kemudian) sebagai indikator penanda sederhana.
  • UI rating, bintang terisi, setengah-terisi, dan outline untuk skala 0-5.
  • Lencana dan lambang, heksagon dengan teks atau ikon di dalamnya.
  • Tombol kasih sayang, hati untuk suka, wishlist, dan simpan.

Mengapa primitif SVG ketimbang path generik

Menggunakan <circle> atau <polygon> alih-alih <path> yang setara:

  • Lebih kecil dalam byte untuk bentuk sederhana (10-30 byte).
  • Lebih mudah dianimasikan, atribut seperti r, cx, cy, points dapat di-tween langsung dengan CSS atau GSAP.
  • Terbaca lebih jelas di inspector dan diff.

Untuk bentuk kompleks (blob, ikon, logo), path menang karena dapat menggambarkan kurva dan segmen campuran dalam satu elemen.

Aksesibilitas

Semua SVG yang dihasilkan bersifat dekoratif secara default. Jika bentuk membawa makna (lingkaran merah = error, centang hijau = sukses), bungkus dalam induk dengan role="img" dan aria-label, atau tambahkan anak <title> di dalam SVG.

Pertanyaan yang Sering Diajukan

Jari-jari dalam menentukan “kegemukan” setiap lengan. Generator ini menggunakan dalam = 40% dari luar untuk tampilan seimbang. Untuk bintang lebih tajam, turunkan rasio di output SVG (mis. 25%); untuk bintang lebih tumpul mirip balok Lego, naikkan ke 60%.

Generator ini menghasilkan <rect> polos. Tambahkan rx="8" ry="8" ke rect untuk membulatkan sudut, atau gunakan properti CSS border-radius jika Anda membungkus SVG.

Bisa, bungkus SVG dalam induk dengan transform: rotate(30deg), atau edit path: geser sudut awal sebesar 30°. Generator default ke titik-atas karena cocok dengan sebagian besar desain lencana.

Ya. SVG menggunakan viewBox yang tepat, koordinat piksel bulat, dan markup panjang-minimum. Anda dapat menjatuhkannya ke React, Vue, Astro, email, atau HTML biasa tanpa modifikasi.

Tidak. Parameter bentuk dipakai untuk merender SVG bagi permintaan saat ini lalu dibuang.

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