> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Peta Displacement SVG: Distorsi Pratinjau Logo Anda

> Gunakan feDisplacementMap SVG untuk mendistorsi pratinjau logo, mengatur kanal dan abu-abu netral dalam sRGB, memeriksa dua ukuran, serta menyimpan master path asli untuk penyerahan.

Source: https://perfectvector.com/id/blog/svg-fedisplacementmap-artwork

Language: id
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00

Filter SVG `feDisplacementMap` mendistorsi gambar yang ditampilkan renderer dengan memakai gambar lain sebagai peta pengambilan sampel. Data path sumber Anda tidak berubah. Gunakan untuk pratinjau logo yang bisa dikembalikan atau ilustrasi web, dan simpan master tanpa filter untuk pengeditan serta penyerahan.

Untuk contoh pertama yang terkontrol, tetapkan `in="SourceGraphic"`, pilih peta bernama untuk `in2`, tentukan kanal horizontal dan vertikal, serta tetapkan `color-interpolation-filters="sRGB"`. [Referensi displacement MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) menjelaskan kedua masukan dan rumus pengambilan sampel. Bentuk yang terlihat bengkok di layar tidak otomatis menjadi kontur baru yang bisa diedit.

## Tentukan berkas yang Anda butuhkan

| Tujuan                                                  | Pendekatan yang sesuai                              | Yang harus disimpan                                      |
| ------------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------- |
| Gambar terdistorsi statis di halaman web                | Salinan tampilan dengan filter                      | Master path SVG asli                                     |
| Logo yang bisa diedit dengan kontur melengkung permanen | Edit atau bangun ulang geometrinya dengan sengaja   | Geometri path baru yang sudah diverifikasi               |
| Pratinjau raster dengan tampilan tetap                  | Render salinan tampilan pada ukuran yang dibutuhkan | Master bersih beserta ekspor raster yang sudah diperiksa |
| Geometri produksi untuk cetak atau potong               | Mulai dari master tanpa filter                      | Dimensi, lubang, dan path yang sudah diuji di tujuan     |

Contoh di bawah memakai lencana persegi asli dengan bagian tengah terbuka. Tepi lurusnya memudahkan perbandingan distorsi. Ini motif demonstrasi, bukan logo pelanggan atau keluaran vektorisator.

**Pratinjau dan sumber terpisah**

![Ilustrasi tiga pratinjau lencana koral dengan distorsi kontur yang meningkat di atas kontur path sumber lurus yang identik](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp)

*Ilustrasi: lencana yang terlihat dapat terdistorsi sementara kontur sumbernya tetap sama. Diagram konseptual ini bukan tangkapan layar peramban, ekspor editor asli, atau hasil konversi.*

Untuk perubahan warna saja pada pratinjau, gunakan [pewarnaan ulang feColorMatrix](https://perfectvector.com/id/blog/svg-fecolormatrix). Displacement menjawab persoalan spasial: dari mana gambar yang dirender mengambil sampel.

## Salin contoh SVG statis yang terkontrol

Simpan kode ini sebagai SVG dan buka di peramban. Kode ini berisi satu path, satu sumber noise tetap, matriks yang membuat kanal horizontal bervariasi sambil menjaga kanal vertikal netral, serta skala displacement `36`.

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>
```

`feTurbulence` menyediakan variasi prosedural. [Referensi noise MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) menjelaskan kontrol frekuensi, oktaf, seed, dan tipenya. Di sini kami menjaga nilai-nilai tersebut tetap agar perubahan `scale` membandingkan kekuatan pada peta yang sama.

Matriks mempertahankan kanal merah noise, menetapkan hijau ke `0.5`, biru ke nol, dan alfa ke satu. Keluarannya adalah peta kendali, bukan palet warna baru untuk lencana koral. [Referensi matriks MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) menjelaskan transformasi kanal. Merah kemudian mengendalikan pengambilan sampel horizontal, sedangkan hijau memberi offset vertikal netral.

Untuk membandingkan kekuatan, ubah hanya `scale="36"` menjadi `scale="12"`, lalu `scale="0"`. Pertahankan path, seed, matriks peta, ruang warna, dan viewBox. Ini mengisolasi keputusan yang sedang Anda buat.

## Baca scale sebagai offset pengambilan sampel

Untuk kanal peta yang dipilih, posisi pengambilan sampel sumber adalah:

```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```

[Spesifikasi displacement W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) mendefinisikan pemetaan terbalik ini: setiap lokasi keluaran menentukan tempat mengambil sampel sumber. Offset sampel positif bukan instruksi untuk memindahkan node path ke arah tersebut.

Pada skala `36`, kanal horizontal memberikan offset sampel berikut:

| Nilai kanal dalam ruang warna kerja filter | Offset sampel horizontal |
| ------------------------------------------ | ------------------------ |
| `0`                                        | `-18`                    |
| `0.5`                                      | `0`                      |
| `1`                                        | `+18`                    |

Contoh memakai `primitiveUnits="userSpaceOnUse"`, sehingga nilai tersebut mengacu pada sistem koordinat pengguna SVG. Nilai itu tidak dijamin sebagai jarak piksel CSS setelah viewBox diskalakan. Spesifikasi juga mendefinisikan skala `0` sebagai tanpa efek displacement.

Nilai hijau tetap menjaga pengambilan sampel vertikal netral pada contoh ini. Untuk mengeksplorasi distorsi dua sumbu nanti, berikan variasi pada hijau juga dengan sengaja. Jangan mengubah kanal dan peta bersamaan saat mendiagnosis hasil yang tidak diharapkan.

## Tentukan ruang warna abu-abu netral secara eksplisit

Netral berarti nilai kanal terpilih **0,5 dalam ruang kerja yang dipakai peta**. Ini tidak berarti setiap swatch yang tampak abu-abu sedang bersifat netral pada semua pengaturan filter.

Ruang kerja filter bawaan adalah `linearRGB`, sedangkan contoh ini secara eksplisit memakai `sRGB`. Warna yang ditulis sebagai `rgb(50%,50%,50%)` tidak bernilai numerik 0,5 setelah dikonversi ke RGB linear. [Referensi color-interpolation-filters MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) menjelaskan bawaan dan pilihan eksplisit tersebut.

Untuk peta konstan sebagai diagnosis, ganti primitive noise dan matriks dengan:

```xml
<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>
```

Pertahankan primitive displacement, pemilih kanal, dan `sRGB` eksplisit pada filter. [Referensi feFlood MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) menjelaskan gambar warna konstan yang dipakai di sini. Kontrol ini membantu membedakan variasi peta dari pergeseran akibat ruang warna.

Pada contoh uji Chrome kami, lencana dengan peta konstan sRGB terlihat sejajar dengan lencana tanpa filter. Menghapus pengaturan ruang warna eksplisit membuat lencana dengan peta abu-abu yang sama tampak bergeser. Ini pengamatan peramban, bukan klaim rendering identik per piksel antar-engine. Pertahankan pengaturan ruang warna saat memindahkan resep ini ke gambar Anda; periksa aturan CSS yang menimpanya.

## Periksa lencana yang sama pada dua ukuran

Kami merender lencana asli pada **120 × 120** dan **300 × 300 piksel CSS** di Chrome. Setiap ukuran menampilkan peta tetap yang sama pada skala `0`, `12`, dan `36`, dengan viewBox `0 0 200 200` yang sama.

| Kekuatan | Pengamatan pada contoh uji asli                         | Keputusan yang didukung                                |
| -------- | ------------------------------------------------------- | ------------------------------------------------------ |
| `0`      | Tepi luar lurus dan bukaan persegi                      | Acuan perbandingan                                     |
| `12`     | Variasi kontur horizontal ringan; bukaan tetap terlihat | Perlakuan tampilan yang tidak berlebihan               |
| `36`     | Distorsi tepi luar dan bukaan lebih kuat                | Periksa apakah tetap mudah dikenali sebelum diserahkan |

Efek terlihat pada kedua ukuran; pratinjau lebih besar memudahkan pemeriksaan lubang dan tepi. DOM peramban tetap berisi satu path pada masing-masing dari enam spesimen, dengan nilai `d` identik. Tiga kontrol tambahan berukuran 200 piksel membandingkan lencana tanpa filter dengan peta abu-abu konstan pada sRGB eksplisit dan linearRGB bawaan.

Ini spesimen SVG yang dibuat secara independen. Spesimen ini menunjukkan perilaku contoh uji dalam peramban yang diuji dan bahwa geometri sumbernya tidak berubah. Ini bukan pengujian editor asli, keluaran PerfectVector, atau survei kompatibilitas.

Untuk logo Anda, periksa ukuran tampilan aktual terkecil terlebih dahulu. Bukaan atau sudut yang terdistorsi dapat mengubah cara tanda itu terbaca meskipun master bersih tetap utuh.

## Diagnosis pergeseran, efek lemah, atau tepi terpotong

**Seluruh lencana bergeser alih-alih melengkung.** Uji kontrol peta konstan dengan sRGB eksplisit. Periksa kanal yang dipilih dan apakah peta benar-benar bervariasi pada kanal itu. Nilai terpilih yang konstan tetapi tidak netral menciptakan offset sampel seragam.

**Efek tetap lemah.** Pastikan `in2="map"` cocok dengan nama `result` matriks. Naikkan skala bertahap dengan seed dan frekuensi yang sama. Lalu, jika perlu, coba peta berbeda. Seed baru mengubah pola spasial, sehingga itu perbandingan terpisah.

**Tepi vertikal berperilaku tidak terduga.** Contoh ini dirancang untuk displacement horizontal: `xChannelSelector="R"` dan `yChannelSelector="G"`, dengan G tetap pada 0,5. Periksa baris matriks dan ejaan kanal sebelum menambah variasi dua sumbu.

**Kontur yang melengkung terpotong.** Periksa wilayah filter sebelum mengedit path sumber. Contoh memberi ruang tambahan melalui `x="-25%"`, `y="-25%"`, serta lebar dan tinggi `150%`. [Referensi filter MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) menjelaskan atribut wilayah tersebut. Efek lebih ekstrem mungkin membutuhkan wilayah berbeda, dan viewport di sekelilingnya dapat menetapkan batas terpisah. Ikuti [pemeriksaan pemotongan filter dan viewport SVG](https://perfectvector.com/id/blog/svg-shadow-clipped) jika memperbesar wilayah tidak menyelesaikan keluaran yang hilang.

**SVG kehilangan efek di tujuan lain.** Buka berkas persis yang diserahkan di tujuan tersebut. Pratinjau peramban tidak memastikan perilaku editor, pengekspor PDF, atau mesin pemotong. Sediakan master bersih alih-alih menjanjikan filter berpindah tanpa perubahan.

## Serahkan master bersih secara terpisah

Untuk versi tanpa filter, hapus `filter="url(#warp)"` dari path dan hapus definisi filter yang tidak dipakai. Pertahankan `d` asli, `fill-rule="evenodd"`, fill, dan viewBox. Buka berkas hasilnya dan pastikan bukaan persegi serta tepi lurus sesuai dengan acuan bersih.

Gunakan nama berkas terpisah untuk master bersih dan perlakuan tampilan. Jika Anda mengulang SVG berfilter secara inline pada satu halaman, beri setiap filter ID unik dan perbarui referensi `url(#...)`-nya. Periksa metode penyematan akhir dan peramban yang ingin Anda dukung.

Jika kontur terdistorsi akhir itu sendiri harus bisa diedit, siapkan geometrinya sebagai tugas gambar terpisah. Filter ini tidak menjadikan pratinjau sebagai perintah path baru yang permanen. Menjiplak pratinjau yang sudah dirasterisasi juga merupakan konversi baru dengan pemeriksaan akurasi dan pembersihannya sendiri; proses itu tidak memulihkan master asli yang secara matematis tidak berubah.

PNG yang ditempatkan di dalam SVG adalah perbedaan lain lagi. Lihat [berkas SVG yang berisi gambar raster](https://perfectvector.com/id/blog/svg-contains-raster-image) sebelum menganggap nama berkas menjamin path logo yang bisa diedit.

## Kapan vektorisasi logo membantu

Jika logo bersih asli Anda hanya tersisa sebagai PNG atau JPG, [vektorisasikan logo sumber itu](https://perfectvector.com/id/vectorize-logo), lalu periksa siluet, lubang, dan wilayah warna yang bisa diedit sebelum menambahkan filter tampilan. PerfectVector menangani konversi raster-ke-vektor; rangkaian displacement dalam panduan ini adalah perlakuan SVG terpisah. Rangkaian itu tidak menjadikan pratinjau terdistorsi sebagai kontur produksi yang terjamin.

Jika master path bersih sudah ada, gunakan berkas itu langsung. Untuk persiapan sumber dan pembersihan logo, [panduan vektorisasi logo](https://perfectvector.com/id/blog/how-to-vectorize-a-logo) membahas tahap pemulihan, bukan distorsi peramban.

## Pertanyaan umum

**Apakah feDisplacementMap mengubah path SVG saya?**
Filter ini mengubah gambar yang dirender melalui pengambilan sampel yang dikendalikan peta. Pada contoh uji peramban asli, keenam spesimen kekuatan mempertahankan satu path dengan nilai d identik.

**Mengapa peta displacement abu-abu masih menggeser gambar saya?**
Netral adalah nilai kanal 0,5 dalam ruang warna kerja peta. Abu-abu sRGB 50% tidak bernilai numerik 0,5 setelah dikonversi ke ruang linearRGB bawaan. Gunakan pengaturan ruang warna eksplisit dan pengujian peta konstan yang terkontrol.

**Apa arti scale 36 dalam contoh ini?**
Dengan satuan primitive userSpaceOnUse, nilai kanal terpilih dari 0 hingga 1 memberi offset sampel dari -18 hingga +18 satuan pengguna SVG. Jarak yang ditampilkan bergantung pada penskalaan viewBox SVG.

**Bisakah saya langsung menyerahkan SVG terdistorsi ke mesin pemotong?**
Distorsi yang ditampilkan bukan geometri potong baru yang bisa diedit. Simpan master path tanpa filter dan periksa tujuan sebenarnya; siapkan kontur melengkung permanen secara terpisah jika pekerjaan membutuhkannya.

## Sumber

1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Masukan sumber dan peta, kanal, serta perilaku pengambilan sampel.
2. [W3C: Filter displacement](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Pemetaan terbalik, skala, dan koordinat primitive.
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Kontrol peta prosedural tetap.
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Nilai kanal peta kendali yang eksplisit.
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB bawaan dan sRGB eksplisit.
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Kontrol peta warna konstan.
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atribut wilayah filter.

Jika versi asli yang bersih hanya tersedia sebagai raster, [ubah logo Anda sendiri menjadi SVG](https://perfectvector.com/id/vectorize-logo), periksa siluet dan lubangnya, lalu simpan master itu sebelum membuat salinan tampilan terdistorsi yang terpisah.

## Explore

- [Read the HTML article](https://perfectvector.com/id/blog/svg-fedisplacementmap-artwork)
- [Image Trace Illustrator Abu-Abu? Periksa Objeknya](https://perfectvector.com/id/blog/illustrator-image-trace-greyed-out.md)
- [Gambar SVG fpdf2: Pertahankan Path dalam PDF Python](https://perfectvector.com/id/blog/fpdf2-svg-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)