Perataan Stroke SVG: Outline di Dalam atau Luar

Stroke SVG berada di tengah path-nya. Untuk membuat outline 12 satuan seluruhnya berada di dalam bentuk tertutup, gambar stroke 24 satuan dan potong dengan clip mengikuti bentuk tersebut. Untuk menempatkan lebar terlihat yang sama di luar, gambar stroke 24 satuan melalui mask yang menyembunyikan bagian dalam bentuk. Simpan salinan path asli: clip dan mask mengubah bagian yang terlihat, bukan geometri yang mendasarinya.

Properti usulan stroke-alignment muncul dalam draf editor SVG Strokes, tetapi draf itu menyatakan definisi stroke SVG 2 tetap normatif. Untuk file yang harus bekerja lintas browser dan editor, buat dan uji hasil terlihat alih-alih mengandalkan properti usulan.

Lihat lokasi outline yang digambar

Lencana tertutup asli ini memakai satu path pada ketiga panel. Isian hijau kebiruan, outline terlihat nominal 12 satuan, dan ruang dokumen sekitarnya tetap sama. Garis putus-putus koral adalah path tengah. Pada panel tengah, garis berimpit dengan tepi luar pita biru; di kanan, garis berimpit dengan tepi dalam.

Panel tengah menjaga batas luar lencana yang berwarna pada path aslinya. Panel luar memperbesar jangkauan area berwarna sebesar 12 satuan di sekitar path. Jika lencana hampir menyentuh tepi viewBox, warna tambahan itu dapat terpotong. Panduan isian dan stroke MDN menjelaskan stroke biasa berada di tengah path; perbandingan di atas merender tiga konstruksi pada satu ukuran.

Buat outline dalam dengan clip

Letakkan path tertutup dalam <defs>. Gunakan kembali satu kali sebagai isian dan satu kali sebagai clip. Gambar salinan kedua dengan lebar stroke dua kali yang diinginkan, lalu batasi stroke tersebut ke bagian dalam path. Clip membuat semua bagian di luar bentuknya tidak terlihat; tidak menghapus setengah stroke yang tersembunyi. Lihat referensi clipPath MDN dan panduan koordinat clipPath kami jika clip impor bergeser menjauh dari karyanya.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Di sini, stroke 24 satuan biasanya mencapai 12 satuan di kedua sisi path. Clip menghapus setengah bagian luar, menyisakan pita terlihat 12 satuan di dalam. Letakkan isian di bawah stroke yang di-clip, seperti pada contoh, jika Anda ingin seluruh pita dalam tetap terlihat. Untuk path majemuk dengan lubang, periksa aturan fill dan clip sebelum menganggap sisi mana yang merupakan bagian dalam.

Buat outline luar dengan mask

Pita luar membutuhkan wilayah visibilitas yang terbalik. Mask di bawah berwarna putih di atas area dokumen dan hitam di dalam lencana. Mask diterapkan hanya pada salinan stroke, sementara salinan tanpa mask menyediakan isian. Wilayah mask eksplisit memberi ruang untuk stroke di luar bentuk asli.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Sekali lagi, hanya setengah stroke 24 satuan yang berada di tengah yang bertahan, sehingga pita luar terlihat selebar 12 satuan. Tetapkan wilayah mask dengan sengaja: MDN mendokumentasikan bagaimana maskUnits, maskContentUnits, dan dimensi wilayah memengaruhi mask. Persegi panjang putih harus mencakup seluruh stroke luar. Mask terlalu kecil dapat memotong tepi yang justru ingin dipertahankan.

Ada trik visual lebih singkat untuk isian opak: gambar stroke dua kali lebar, lalu gambar isian di atasnya dengan paint-order="stroke fill". Itu menyembunyikan setengah bagian dalam di bawah isian, tetapi stroke tetap ada di sana dan dapat muncul lagi jika isian menjadi semitransparan atau dihapus. MDN menjelaskan paint order. Gunakan mask eksplisit ketika pita luar harus tetap menjadi konstruksi terlihat yang terpisah. Untuk outline dari seluruh siluet alfa multicolor, lihat outline morfologi SVG; filter tersebut mengubah tampilan sambil mempertahankan path sumber.

Periksa SVG setelah impor

Clip dan mask memengaruhi rendering, sementara aplikasi berikutnya mungkin memerlukan kontur terisi. Simpan master yang bisa diedit dan uji salinan penyerahan dalam target sebenarnya:

1. Buka SVG sendiri, lalu tempatkan dalam editor atau aplikasi produksi yang dimaksud. Bandingkan tepi dalam dan luar pada zoom yang sama.
2. Periksa viewBox atau artboard di sekitar versi luar. Sisakan ruang untuk pita 12 satuan ke luar dan sambungan pada sudut tajam.
3. Periksa daftar objek. Contoh berisi path yang digunakan ulang, clip atau mask, dan stroke aktif. Contoh tidak membuat satu kontur outline solid.
4. Jika penerima memerlukan geometri terisi, konversikan stroke terpilih pada salinan penyerahan dan periksa bentuk yang dihasilkan. Simpan sumber stroke aktif untuk perubahan lebar berikutnya.

Jika garis hilang saat ekspor, gunakan daftar pemeriksaan visibilitas stroke untuk membedakan pewarnaan hilang, pemotongan, dan dukungan impor. Jika stroke menutupi isian secara tak terduga, penjelasan paint-order SVG kami menunjukkan lapisan yang digambar terakhir.

Peran PerfectVector

Langkah ini dimulai dengan path SVG yang bisa diedit. Jika logo hanya tersedia sebagai PNG atau JPG, alur vektorisasi logo PerfectVector dapat membuat kandidat SVG sebelum Anda menambahkan clip atau mask. Bandingkan siluet, sudut, dan bukaan dengan asli pada ukuran penyerahan yang dimaksud. Vektorisasi merekonstruksi kandidat geometri; tidak menetapkan perataan stroke dalam atau luar untuk Anda.

Jika path SVG asli tersedia, sunting langsung. Men-trace tangkapan layarnya akan menambahkan tahap rekonstruksi yang tidak diperlukan dan dapat mengubah batas yang sedang Anda ratakan. Panduan vektorisasi logo kami membantu memilih antara tracing, menggambar ulang, dan mempertahankan master vektor yang ada.

FAQ

Apakah SVG mendukung perataan stroke dalam atau luar? Draf editor SVG Strokes menjelaskan nilai tersebut, tetapi menyatakan SVG 2 tetap menjadi definisi stroke normatif. Untuk penyerahan portabel, gunakan clip atau mask yang diuji alih-alih bergantung pada properti draf.

Mengapa lebar stroke digandakan? Stroke biasa berada separuh di setiap sisi path. Clip atau mask membuang satu separuh. Karena itu, stroke 24 satuan menyisakan pita dalam atau luar terlihat sebesar 12 satuan dalam contoh ini.

Apakah clip dalam atau mask luar membuat outline siap potong? Tidak. Keduanya mengubah tampilan render, sementara path dan stroke yang mendasarinya tetap ada. Jika mesin pemotong atau vendor memerlukan kontur terisi, buat salinan penyerahan terpisah, konversikan stroke ke path dalam editor yang sesuai, dan periksa geometri setelah impor.

Sources

1. MDN — Isian dan stroke — Mendefinisikan rendering stroke di tengah dan perilaku paint-order yang dibahas di sini.
2. W3C SVG Working Group — Draf editor SVG Strokes — Menetapkan nilai perataan yang diusulkan dan status draf relatif terhadap SVG 2.
3. MDN — Elemen clipPath — Mendefinisikan cara konstruksi dalam membatasi visibilitas.
4. MDN — Elemen mask — Mendefinisikan wilayah mask dan atribut koordinat yang dipakai untuk konstruksi luar.
5. Alex Chan — Menggambar stroke dalam/luar dalam SVG — Memperagakan pendekatan clip dan mask dua kali lebar yang menjadi titik awal contoh lencana asli kami.

Jika logo Anda masih gambar raster, buat kandidat SVG dengan PerfectVector, periksa batas path-nya, lalu coba konstruksi dalam atau luar di editor dan verifikasi file yang diserahkan dalam aplikasi tujuan.