Konverter Stroke SVG ke Fill

Tempelkan SVG apa pun yang berisi bentuk bergaris (stroke) dan dapatkan kembali SVG setara di mana setiap stroke digantikan oleh jalur terisi dengan bentuk visual dan lebar yang sama. Berguna untuk sistem ikon dan alat desain yang hanya dapat merender fill secara andal, atau untuk menyederhanakan SVG menjadi jalur hanya-fill sebelum pengeditan vektor lebih lanjut.

Apa Itu Alat Ini?

Beberapa alur render — generator font ikon tertentu, beberapa engine game, exporter PDF lama, dan alat yang hanya menggabungkan fill — tidak menangani stroke SVG dengan benar atau bahkan sama sekali. Mengubah stroke menjadi bentuk terisi dengan lebar yang sama sepenuhnya menghindari masalah ini: hasil visualnya terlihat identik, tetapi diekspresikan sebagai satu jalur terisi, bukan garis bergaris.

Alat ini bekerja dengan mengambil sampel banyak titik di sepanjang garis luar setiap bentuk (menggunakan API panjang jalur bawaan browser, mekanisme yang sama yang digunakan animasi SVG) dan membangun dua garis offset paralel pada setengah lebar stroke di setiap sisi, lalu menutupnya menjadi satu poligon terisi.

Mengapa Menggunakannya?

Bekerja pada elemen path, line, polyline, polygon, rect, circle, dan ellipse — tidak hanya <path> — menggunakan satu metode sampling terpadu.
Mempertahankan fill asli bentuk (jika ada) sebagai lapisan terpisah di bawah stroke-fill baru, sehingga bentuk yang terisi sekaligus bergaris dikonversi dengan benar.
Pratinjau sebelum/sesudah berdampingan sehingga Anda dapat memastikan hasil konversi secara visual sebelum menyalin hasilnya.
Berjalan sepenuhnya di browser Anda — SVG yang Anda tempel tidak pernah diunggah ke mana pun.
Gratis, instan, tanpa batas ukuran file selain kemampuan render browser Anda.

Cara Menggunakan

Tempelkan markup SVG Anda ke dalam kotak teks (contoh yang berfungsi sudah terisi sebelumnya).
Klik "Convert strokes to fills".
Bandingkan pratinjau sebelum/sesudah untuk memastikan hasilnya sudah benar.
Klik "Copy SVG" untuk menyalin markup hasil konversi yang bebas stroke.

Contoh

Input

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Output

Satu elemen <path fill="#3B82F6"> yang garis luarnya menelusuri kedua sisi kurva asli, berjarak 12 unit, tanpa atribut stroke sama sekali.

Bentuk kurva tetap terjaga karena alat ini mengambil sampel titik secara kontinu di sepanjang jalur yang benar-benar dirender, bukan hanya titik kontrolnya.

Pertanyaan yang Sering Diajukan

Mengapa sudut tajam menjadi membulat, bukan runcing (mitered)?

Ini adalah penyederhanaan yang disengaja dan sudah diketahui dari pendekatan sampling: sampling titik yang padat di sepanjang jalur secara alami menghasilkan sambungan dan ujung yang membulat, terlepas dari nilai stroke-linejoin atau stroke-linecap aslinya. Merekonstruksi sambungan miter atau bevel yang tepat memerlukan algoritma berbeda yang lebih kompleks (perpotongan segmen garis di setiap titik sudut) yang tidak diterapkan oleh alat ini. Untuk sebagian besar kasus ikon dan ilustrasi, perbedaan visualnya kecil, tetapi jika Anda membutuhkan sambungan miter yang presisi, fitur "outline stroke" pada editor vektor khusus akan lebih akurat.

Apakah alat ini menangani stroke putus-putus (stroke-dasharray)?

Tidak — alat ini memperlakukan setiap stroke sebagai garis solid dan mengabaikan stroke-dasharray/stroke-dashoffset. Stroke putus-putus akan dikonversi seolah-olah solid, yang mengubah tampilannya. Jika SVG Anda menggunakan stroke putus-putus, alat ini bukan pilihan yang tepat untuk bentuk-bentuk tersebut.

Mengapa tidak ada yang terkonversi?

Alat ini hanya mengonversi elemen yang memiliki warna stroke (bukan "none") dan stroke-width positif, baik yang diatur sebagai atribut maupun dalam style elemen itu sendiri. Jika SVG Anda mengatur stroke melalui kelas CSS eksternal yang tidak dapat diselesaikan browser di dalam pratinjau terisolasi alat ini, atau melalui blok <style> yang merujuk kelas, gaya yang dihitung mungkin tidak terselesaikan dengan benar — coba atur stroke dan stroke-width sebagai atribut langsung pada bentuk tersebut.

Kapan sebaiknya saya mengonversi stroke menjadi fill, dan kapan sebaiknya mempertahankan stroke?

Jika Anda masih dalam tahap desain, pertahankan stroke — stroke-width tetap dapat diedit sebagai satu angka, yang akan hilang setelah konversi. Jika Anda mengekspor ke alur kerja yang salah menangani stroke (generator font ikon, engine game tertentu, atau exporter PDF), lakukan konversi sebagai langkah ekspor terakhir dan simpan file bergaris asli sebagai sumber yang dapat diedit, karena konversi ini bersifat satu arah.

Apakah konversi membuat file SVG menjadi lebih besar?

Biasanya ya — satu kurva bergaris yang didefinisikan oleh beberapa titik kontrol berubah menjadi garis luar terisi yang terdiri dari ratusan segmen garis hasil sampling, sehingga data jalur bertambah besar secara signifikan. Untuk ikon, hal ini jarang menjadi masalah dalam praktiknya, tetapi jika ukuran menjadi perhatian, jalankan hasil konversi melalui pengoptimal SVG untuk mengurangi presisi koordinat.

Apakah stroke-opacity dibawa ke fill hasil konversi?

Tidak — jalur hasil konversi mengambil warna stroke sebagai fill-nya tetapi dengan opasitas penuh; nilai stroke-opacity pada bentuk asli akan dihilangkan. Jika Anda perlu mempertahankan transparansi, tambahkan fill-opacity dengan nilai yang sama ke jalur hasil konversi secara manual setelah menyalin hasilnya.