Filter Cahaya SVG: Beri Bayangan, Pertahankan Bukaan

Untuk logo SVG yang tampak timbul, haluskan SourceAlpha, masukkan alfa itu ke feDiffuseLighting atau feSpecularLighting, gabungkan cahaya dengan warna sumber, lalu akhiri dengan komposit in terhadap SourceAlpha asli. Langkah terakhir menjaga perlakuan tetap di dalam lambang dan mempertahankan bukaannya. Simpan salinan path tanpa filter sebagai master datar.

Efek ini mengubah tampilan yang dirender. Efek tidak membuat benda padat menonjol, kontur baru, atau berkas manufaktur. Panduan ini memakai satu lambang cincin wajik asli, dibuat langsung sebagai SVG, untuk membandingkan tahap pencahayaan dan alfanya.

Gunakan alfa sebagai permukaan pencahayaan

feDiffuseLighting memakai alfa masukan sebagai bump map dan menghasilkan peta cahaya buram. Tampilannya bergantung pada cahaya dan permukaan masukan. Referensi pencahayaan diffuse MDN menjelaskan perilaku itu. Dalam contoh ini, bagian cincin yang buram menyediakan area tinggi dan bukaannya menyediakan area rendah.

Kami hanya memburamkan SourceAlpha, membiarkan path berwarna asli tersedia sebagai SourceGraphic. Alfa yang diperhalus memberi perhitungan pencahayaan transisi bertahap pada tepi dalam dan luar. feGaussianBlur mengendalikan penghalusan itu melalui stdDeviation; kode awal memakai 2.5 dalam filter ruang pengguna eksplisit.

Peta diffuse mentah melukis di seluruh wilayah filter, termasuk tempat path asli transparan. Itu berguna untuk memeriksa perhitungan cahaya, tetapi siluet akhirnya salah untuk lambang berlubang kami. Pertahankan alfa asli untuk langkah pembatasan terakhir.

Salin kode awal lambang berbayang yang lengkap

Simpan sebagai emblem-lighting.svg dan buka di peramban. Berkas memiliki satu path majemuk tanpa dependensi gambar eksternal.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Filter memberi nama setiap hasil antara agar Anda dapat memeriksa perannya:

Perkalian aritmetika memakai k1="1" dengan koefisien lain nol. Penjumlahan memakai k2="1" k3="1" dengan yang lain nol. feComposite mendefinisikan operasi piksel ini dan operator in. Pertahankan masukan kedua komposit akhir sebagai SourceAlpha, bukan bump yang diburamkan, jika Anda menginginkan batas asli.

Filter secara eksplisit memakai color-interpolation-filters="linearRGB", yang merupakan bawaan untuk operasi filter SVG. Ini berbeda dari interpolasi pewarnaan biasa. Referensi color-interpolation-filters MDN menjelaskan perbedaannya. Semua varian pencahayaan terukur di sini memakai pengaturan yang sama.

Bandingkan bayangan diffuse dengan kilau specular

Pencahayaan diffuse menggelapkan dan menerangkan warna asli sesuai peta cahaya. Tahap specular menambahkan komponen pantulan. feSpecularLighting menjelaskan keluaran yang bergantung pada cahaya serta parameternya. Kode awal memakai konstanta .7 yang tidak berlebihan dan eksponen 18; sesuaikan setelah mendapatkan perlakuan diffuse yang berguna.

Untuk memeriksa diffuse saja, pertahankan tahap blur, diffuse, dan perkalian, lalu ubah masukan pertama komposit akhir dari paint menjadi lit. Hapus tahap specular dan penjumlahan.

Untuk memeriksa specular saja di atas warna datar, pertahankan tahap blur dan specular. Ubah masukan pertama penjumlahan dari lit menjadi SourceGraphic, hapus tahap diffuse dan perkalian, serta pertahankan komposit akhir paint in SourceAlpha. Kedua perbandingan mempertahankan path asli dan arah cahaya yang sama.

Cahaya jauh kami memakai azimuth="225" elevation="45". feDistantLight merupakan elemen sumber cahaya untuk kedua primitive pencahayaan. Sudut ini dalam derajat, bukan posisi piksel. Ubah arah pada kedua tahap pencahayaan bersamaan saat membandingkan perlakuan gabungan.

Hasil kontrol peramban asli

Kami membuka enam spesimen SVG buatan sendiri di Chrome pada 80 × 80 dan 160 × 160 piksel CSS. Master datar, perlakuan diffuse, specular, dan gabungan tetap terlihat berbeda. surfaceScale diffuse yang lebih tinggi memperkuat kontras tepi dalam contoh uji ini. Kontrol diffuse mentah menampilkan persegi panjang abu-abu dengan bukaan terisi, bukan siluet transparan.

Pembacaan piksel terpisah memakai ukuran canvas sumber 200 × 200. Sampel pita berada di (100, 38), sampel tepi di (101, 22), bukaan di (100, 100), dan sampel luar di (10, 10).

Setiap berkas mempertahankan nilai d yang sama, satu path, dan nol elemen image. Efek layar tidak menghasilkan geometri sumber tambahan. Ini pengamatan dari peramban dan sumber ini, bukan jaminan tentang renderer lain atau perilaku impor editor.

Pencahayaan dan master datar

Sesuaikan medan ketinggian sebelum mengubah kontur

surfaceScale menetapkan skala ketinggian permukaan yang dipakai dalam perhitungan pencahayaan. Pengaturan ini tidak memperluas path. Kontrol diffuse 4 dan 12 kami hanya mengubah nilai ini: pita datar yang diambil sampelnya tetap berwarna sama, sedangkan sampel tepi menjadi lebih gelap pada 12.

Gunakan urutan terkontrol:

1. Pastikan siluet transparan dan bukaan asli tanpa filter.
2. Pilih penghalusan alfa dan arah cahaya.
3. Bandingkan surfaceScale kecil dan lebih besar dengan semua yang lain tetap.
4. Tambahkan kilau specular, lalu batasi pewarnaan dengan alfa asli sebagai operasi terakhir.
5. Periksa gambar yang diserahkan pada ukuran tampilan sebenarnya dan latar kontras.

Spesifikasi Filter Effects saat ini mendefinisikan alfa keluaran diffuse sebagai satu di mana-mana dan alfa keluaran specular dari komponen warnanya. Jangan menganggap salah satu keluaran mempertahankan bukaan asli. Spesifikasi juga mendefinisikan perhitungan normal dari sampel alfa tetangga. Kode awal ini membiarkan kernelUnitLength tidak ditetapkan; pemeriksaan dua ukuran kami tidak membuktikan sampel pencahayaan yang bebas dari ukuran.

Jika buffer antara sebuah tahap pencahayaan muncul sebagai hasil akhir, periksa masukan bernama dan primitive terakhir. Untuk cincin ini, mengembalikan peta cahaya diffuse langsung merupakan cara kami mereproduksi persegi panjang abu-abu buram. Langkah akhir in SourceAlpha disengaja, meskipun perkalian sebelumnya tampak mempertahankan transparansi.

Jika blur atau efek terpotong pada persegi panjang tak terduga, periksa wilayah filter menggunakan panduan pemotongan SVG. Pisahkan wilayah itu dari pembatasan alfa sumber akhir: yang satu membatasi area kerja efek, yang lain memulihkan siluet yang dimaksud.

Serahkan perlakuan layar bersama master datar

Hapus atribut filter path untuk memeriksa master datar. Master mempertahankan kontur luar, bukaan dalam, dan fill koral solid yang sama. Simpan salinan itu bersama versi web berbayang agar pengeditan berikutnya dapat dimulai dari geometri asli.

Untuk hasil fisik, gunakan alur persiapan terpisah seperti gambar vektor untuk emboss. Preset pencahayaan layar menyediakan tampilan, bukan geometri cetakan atau kedalaman relief terukur. Panduan kontur morfologi SVG menjelaskan perlakuan batas berbasis filter lain tanpa menganggapnya path hasil rekonstruksi.

Jika logo hanya tersedia sebagai PNG atau JPG, vektorisasikan logo dengan PerfectVector, periksa kontur luar serta bukaan yang dipulihkan, dan simpan master datar bersih sebelum menambahkan pencahayaan dalam alur SVG Anda. Layanan memulihkan geometri vektor; rangkaian diffuse/specular ini merupakan perlakuan tampilan terpisah yang dibuat sendiri. Jika master vektor sudah ada, terapkan dan tinjau filter secara langsung.

Pertanyaan umum

Bisakah filter pencahayaan SVG membuat logo terlihat timbul? Filter dapat menyimulasikan bayangan dan sorotan dari medan ketinggian berbasis alfa. Perlakuan yang dirender tidak membuat relief fisik, kontur path tambahan, atau berkas cetakan produksi.

Mengapa efek pencahayaan SVG saya mengisi bukaan transparan? Peta cahaya diffuse mentah bersifat buram di seluruh wilayah filternya. Gabungkan cahaya dengan warna sumber dan akhiri dengan komposit in terhadap SourceAlpha asli untuk membatasi perlakuan pada siluet asli.

Apa perbedaan pencahayaan SVG diffuse dan specular? Pencahayaan diffuse menyediakan penerangan menyeluruh untuk memberi bayangan pada warna asli. Pencahayaan specular menyediakan komponen pantulan untuk ditambahkan sebagai kilau. Keduanya memakai alfa masukan sebagai bump map serta bergantung pada pengaturan cahaya dan permukaan yang dipilih.

Apakah surfaceScale mengubah path logo saya? Tidak. Pengaturan itu mengubah skala ketinggian dalam perhitungan pencahayaan. Dalam dua kontrol diffuse kami, data path tetap identik sementara kontras tepi yang dirender berubah.

Sumber

1. MDN feDiffuseLighting — Masukan bump map alfa dan keluaran cahaya diffuse buram.
2. MDN feGaussianBlur — Masukan yang diperhalus dan pertimbangan wilayah filter.
3. MDN feComposite — Perkalian/penjumlahan aritmetika dan pembatasan alfa sumber.
4. MDN color-interpolation-filters — Bawaan linearRGB untuk operasi filter.
5. MDN feSpecularLighting — Komponen pantulan dan kontrolnya.
6. MDN feDistantLight — Sumber cahaya untuk kedua primitive pencahayaan.
7. MDN surfaceScale — Skala ketinggian permukaan untuk perhitungan.
8. Spesifikasi pencahayaan Filter Effects — Alfa pencahayaan, satuan sudut, dan perhitungan sampel tetangga.