SVG feMorphology: Tambahkan Outline Tanpa Path Baru

Untuk membuat outline di sekeliling seluruh siluet SVG multicolor, dilasikan SourceAlpha-nya, keluarkan alfa asli dari hasil yang lebih besar, warnai cincin yang tersisa, lalu gabungkan karya asli di atasnya. Filter mengubah tampilan hasil render sementara data path asli tetap utuh.

Gunakan operator="erode" jika Anda menginginkan siluet alfa yang lebih kecil. Kedua operasi tersebut tidak membuat path offset yang bisa diedit. Lubang, celah sempit, dan sudut tajam perlu diperiksa secara visual karena morfologi memakai lingkungan persegi panjang, bukan offset stroke melingkar.

Mulai dari siluet, bukan kanal warna

Spesifikasi Filter Effects W3C mendefinisikan dilasi sebagai nilai maksimum per komponen dalam lingkungan persegi panjang, dan erosi sebagai nilai minimum. Dengan SourceAlpha, masukannya adalah kanal alfa karya. Dengan begitu, kita dapat memperoleh siluet tanpa memperbesar kanal warna hijau kebiruan dan koral secara terpisah.

Contoh ini menerapkan filter pada seluruh karya yang terdiri atas dua path. Lubang persegi transparannya merupakan bagian dari siluet alfa. Bidang koral sudah berada di dalam area hijau kebiruan yang opak, sehingga tidak membentuk batas luar tersendiri.

Kami membuat SVG secara manual dan membuka lima varian mandiri di browser. Setiap file mempertahankan dua definisi path asli yang sama. Perbandingan di bawah adalah render nyata dari file tersebut, tanpa karya hasil tracing atau pratinjau efek yang dibuat secara generatif.

Pada radius 10, outline tumbuh ke luar siluet yang terlihat dan ke dalam lubang. Pada 22, warna emas mengisi bukaan persegi contoh ini. Versi 18 4 tumbuh lebih jauh secara horizontal daripada vertikal. Erosi mengecilkan area luar yang opak dan memperbesar bukaan transparan; titik bawah juga berubah.

Pengamatan tersebut berlaku untuk karya dan pengaturan ini. Hasil itu bukan aturan radius aman secara umum untuk logo atau ikon lain.

Buat cincin alfa luar

Simpan contoh lengkap ini sebagai outline.svg lalu buka di browser. Ini adalah SVG radius-10 yang persis digunakan dalam tangkapan layar:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Filter tersebut bekerja dalam empat langkah:

1. feMorphology mendilasikan SourceAlpha menjadi grown.
2. feComposite mempertahankan grown di luar alfa asli, menghasilkan ring.
3. feFlood menyediakan warna emas; composite berikutnya membatasi warna itu ke cincin.
4. feMerge menempatkan SourceGraphic asli di atas cincin berwarna.

Urutan masukan penting dalam pengurangan ini. Bagian compositing pada spesifikasi menetapkan in sebagai sumber dan in2 sebagai tujuan. Di sini, in="grown", in2="SourceAlpha", dan operator="out" mengeluarkan area opak asli dari alfa yang diperbesar. Membalik kedua masukan itu tidak menghasilkan cincin luar ini.

Kata luar berarti di luar wilayah alfa yang opak, termasuk ruang di dalam lubang transparan. Jika outline harus menghindari bukaan internal, filter ini tidak otomatis membedakannya. Anda memerlukan siluet terpisah atau konstruksi lain yang mendefinisikan bagian luar yang dimaksud.

Warna sumber tetap terlihat karena kita menggabungkan SourceGraphic yang tidak diubah paling akhir. Ini berbeda dari stroke path biasa. Untuk stroke di tengah, dipotong di sisi dalam, atau dibatasi mask di sisi luar, lihat perataan stroke SVG; urutan pewarnaan menjelaskan kasus pelapisan stroke dan isian yang lebih sederhana.

Erosikan alfa dan pertahankan warna yang tersisa

Ganti filter outline dengan definisi berikut dan ubah use terakhir menjadi filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Composite ini mempertahankan karya asli hanya pada bagian yang masih memiliki alfa setelah erosi. Composite tidak menggabungkan kembali seluruh karya asli di atasnya, karena itu akan menutupi penipisan yang diinginkan. Dalam contoh ini, area luar hijau kebiruan menjadi lebih kecil, sementara area koral di dalamnya tetap ada.

Tetapkan operator secara eksplisit pada contoh kerja. Referensi operator membedakan erode dan dilate pada feMorphology dari in dan out pada feComposite. Nama atribut yang sama menjalankan peran berbeda pada kedua elemen. Operator default morfologi adalah erode, sehingga menghilangkannya mudah menghasilkan efek yang berlawanan dari dilasi yang diinginkan.

Bedakan satuan radius dari wilayah filter

Referensi radius menerima satu atau dua angka. Satu angka berlaku untuk kedua sumbu; jika ada dua, angka pertama adalah radius x dan yang kedua radius y. Untuk dua keadaan outline tambahan, ubah hanya radius="10" menjadi radius="22" atau radius="18 4" dalam contoh lengkap.

Angka ini adalah radius dalam sistem koordinat yang dipilih oleh primitiveUnits, bukan jaminan border dengan ukuran piksel CSS tetap pada setiap ukuran tampilan. Kami secara eksplisit memakai primitiveUnits="userSpaceOnUse" dengan viewBox 0 0 300 220. Mengubah ukuran SVG yang ditampilkan menskalakan tampilan efek bersama karya.

Dua atribut dengan nama mirip mengendalikan hal berbeda:

Referensi primitiveUnits MDN mendokumentasikan sistem koordinat primitif. Referensi filterUnits-nya secara terpisah mendokumentasikan wilayah luar. Default filterUnits adalah objectBoundingBox; default primitiveUnits adalah userSpaceOnUse. Menetapkan keduanya secara eksplisit membuat contoh lebih mudah diperiksa.

Sumber menempati x=50 hingga 250 dan y=60 hingga 195. Radius dengan nilai kedua sumbu sama terbesar yang diuji adalah 22, dan wilayah filter serta viewport berukuran 300 kali 220 menyediakan ruang untuk hasil itu. Periksa kembali kedua batas ketika mengubah karya atau radius. Spesifikasi menjelaskan wilayah filter sebagai batas pemotongan tegas: radius yang lebih besar tidak dapat menggambar melewati wilayah tersebut. Panduan pemotongan filter dan viewport SVG memperagakan dua batas terpisah itu.

Jika filter tampak tidak aktif, periksa juga radius. Default-nya adalah 0, dan referensi menyatakan bahwa nilai negatif atau nol menonaktifkan efek primitif. Contoh di atas memakai nilai positif eksplisit pada kedua sumbu.

Periksa lubang dan sudut sebelum menyerahkan file

Lingkungan persegi panjang pada morfologi membuat tampilannya berbeda dari outline membulat konvensional. Radius x dan y yang sama tidak mengubah lingkungan itu menjadi lingkaran. Titik bawah yang bertingkat dalam perbandingan merupakan tempat yang berguna untuk memeriksa perbedaannya.

Kami memeriksa bahwa kelima file masih berisi dua path sumber dengan atribut d yang identik. Definisi filternya berbeda; geometri sumbernya tidak berubah. Periksa objek SVG yang sebenarnya ketika aplikasi tujuan memerlukan path yang bisa Anda edit, beri offset, atau kirim ke produksi. Gunakan operasi geometri editor untuk kebutuhan tersebut, lalu periksa kontur yang dihasilkan. Mengubah atau menghapus filter ini saja tidak menyediakannya.

Simpan master tanpa filter dan salinan terpisah untuk diserahkan. Buka file yang akan diserahkan di aplikasi tujuan sebenarnya dan bandingkan sudut, bukaan internal, warna, serta batasnya. Contoh browser ini tidak membuktikan dukungan pada aplikasi desain, pengekspor, atau mesin pemotong tertentu.

Siapkan sumber sebelum menambahkan efek

PerfectVector dapat membantu ketika karya awal hanya tersedia sebagai PNG atau JPG. Siapkan kandidat SVG, lalu periksa siluet sumber, lubang kecil, dan batas warna yang direkonstruksi sebelum menerapkan filter. Outline morfologi akan memperkuat masalah pada siluet tersebut, bukan memperbaiki geometri yang Anda maksud.

Gunakan master vektor yang tersedia secara langsung. Untuk simbol sederhana, menggambar ulang secara manual mungkin lebih mudah dikendalikan. Men-trace gambar yang diratakan dengan outline yang sudah menyatu tidak memulihkan pengaturan filter asli atau memastikan bagian mana yang tadinya bentuk tanpa filter. Ikhtisar vektorisasi gambar menjelaskan batas rekonstruksi itu.

FAQ

Apakah feMorphology membuat path outline yang bisa diedit? Tidak. Elemen ini mengubah hasil render filter. Contoh ini mempertahankan dua path sumber yang sama, sehingga aplikasi tujuan yang memerlukan kontur terpisah membutuhkan operasi geometri dan pemeriksaan impor.

Mengapa outline emas mengisi lubang SVG saya? Cincin tumbuh di luar alfa opak, termasuk ke dalam bukaan transparan. Dalam contoh ini, radius 22 mengisi lubang persegi. Karya lain memerlukan pemeriksaan celah dan radius tersendiri.

Mengapa memakai SourceAlpha alih-alih SourceGraphic? SourceAlpha memungkinkan filter bekerja pada siluet tanpa mendilasikan setiap kanal warna asli. Contoh ini mewarnai cincin alfa secara terpisah dan menggabungkan SourceGraphic paling akhir untuk menampilkan warna asli.

Sources

1. W3C — Filter Effects Level 1 — Mendefinisikan lingkungan persegi panjang morfologi, masukan compositing, dan batas pemotongan wilayah filter.
2. MDN — radius — Mendefinisikan sintaks radius satu dan dua nilai, satuan, serta nilai yang menonaktifkan efek.
3. MDN — operator — Membedakan operasi morfologi dari operasi compositing.
4. MDN — primitiveUnits — Menetapkan sistem koordinat untuk radius morfologi.
5. MDN — filterUnits — Menetapkan sistem koordinat untuk wilayah luar filter.

Jika sumber Anda hanya tersedia sebagai raster, siapkan karya vektor dengan PerfectVector, verifikasi siluet dan bukaan tanpa filter, lalu tambahkan outline dan bandingkan file akhir di penampil penerimanya.