> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG Yer Değiştirme Haritaları: Logo Önizlemesini Çarpıtın > SVG feDisplacementMap ile logo önizlemesini çarpıtın, sRGB'de kanalları ve nötr griyi ayarlayın, iki boyutu inceleyin ve teslim için özgün yol ana dosyasını koruyun. Source: https://perfectvector.com/tr/blog/svg-fedisplacementmap-artwork Language: tr Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 SVG `feDisplacementMap` filtresi, başka bir görüntüyü örnekleme haritası olarak kullanarak işleyicinin gösterdiği görüntüyü çarpıtır. Kaynak yol verilerinizi değiştirmez. Geri alınabilir bir logo önizlemesi veya web illüstrasyonu için kullanın; düzenleme ve teslim için filtresiz bir ana dosya saklayın. Öngörülebilir bir ilk örnek için `in="SourceGraphic"` ayarlayın, `in2` için adlandırılmış bir harita seçin, yatay ve dikey kanalları belirtin ve `color-interpolation-filters="sRGB"` kullanın. [MDN yer değiştirme başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap), iki girdiyi ve örnekleme formülünü açıklar. Ekranda bükülmüş görünen bir şekil otomatik olarak yeni, düzenlenebilir bir dış hat olmaz. ## Hangi dosyaya ihtiyacınız olduğuna karar verin | Amaç | Uygun yaklaşım | Korunacak öğe | | ------------------------------------------------------ | ------------------------------------------------------------- | --------------------------------------------- | | Web sayfasında sabit, çarpıtılmış çizim | Filtreli görüntüleme kopyası | Özgün SVG yol ana dosyası | | Konturları kalıcı olarak bükülmüş, düzenlenebilir logo | Geometriyi bilinçli olarak düzenlemek veya yeniden oluşturmak | Doğrulanmış yeni yol geometrisi | | Görünümü sabit raster önizleme | Görüntüleme kopyasını gereken boyutta işlemek | Temiz ana dosya ve incelenmiş raster çıktı | | Baskı veya kesim üretim geometrisi | Filtresiz ana dosyadan başlamak | Hedefte sınanmış boyutlar, delikler ve yollar | Aşağıdaki örnekte ortası açık, özgün bir kare rozet kullanılır. Düz kenarları çarpıtmayı karşılaştırmayı kolaylaştırır. Bu bir gösterim motifidir; müşteri logosu veya vektörleştirici çıktısı değildir. **Önizleme ve kaynak ayrıdır** ![Özdeş düz kaynak yol dış hatlarının üzerinde kontur çarpıtması giderek artan üç mercan rengi rozet önizlemesini gösteren illüstrasyon](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp) *İllüstrasyon: görünür rozet çarpıtılabilirken kaynak dış hat değişmeden kalır. Bu kavramsal şema bir tarayıcı ekran görüntüsü, yerel düzenleyici çıktısı veya dönüşüm sonucu değildir.* Önizlemede yalnızca rengi değiştirmek için [feColorMatrix ile yeniden renklendirmeyi](https://perfectvector.com/tr/blog/svg-fecolormatrix) kullanın. Yer değiştirme, işlenen görüntünün nereden örneklendiğiyle ilgili uzamsal bir sorunu çözer. ## Kontrollü, sabit bir SVG örneğini kopyalayın Bu kodu SVG olarak kaydedip tarayıcıda açın. Bir yol, sabit bir gürültü kaynağı, dikey kanalı nötr tutarken yatay kanalı değişken bırakan bir matris ve `36` yer değiştirme ölçeği içerir. ```xml ``` `feTurbulence` işlemsel değişkenlik sağlar. [MDN gürültü başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence), frekans, oktav, tohum ve tür denetimlerini belgeler. Burada bu değerleri sabit tutuyoruz; böylece `scale` değişikliği aynı haritada etki gücünü karşılaştırır. Matris, gürültünün kırmızı kanalını korur, yeşili `0.5`, maviyi sıfır ve alfayı bir olarak ayarlar. Çıktısı mercan rengi rozet için yeni bir renk paleti değil, bir kontrol haritasıdır. [MDN matris başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix), kanal dönüşümünü açıklar. Kırmızı yatay örneklemeyi yönetirken yeşil nötr bir dikey ofset sağlar. Etki güçlerini karşılaştırmak için yalnızca `scale="36"` değerini `scale="12"`, ardından `scale="0"` yapın. Yolu, tohumu, harita matrisini, renk uzayını ve viewBox'ı değiştirmeyin. Bu, verdiğiniz kararı diğer etkenlerden ayırır. ## Ölçeği örnekleme ofseti olarak okuyun Seçilen harita kanalları için kaynak örnekleme konumları şöyledir: ```text sampleX = x + scale × (horizontalChannel - 0.5) sampleY = y + scale × (verticalChannel - 0.5) ``` [W3C yer değiştirme belirtimi](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) bu ters eşlemeyi tanımlar: her çıktı konumu, kaynağın nereden örnekleneceğini sorar. Pozitif örnekleme ofseti, bir yol düğümünü o yönde taşıma talimatı değildir. `36` ölçeğinde yatay kanal şu örnekleme ofsetlerini verir: | Filtrenin çalışma renk uzayındaki kanal değeri | Yatay örnekleme ofseti | | ---------------------------------------------- | ---------------------- | | `0` | `-18` | | `0.5` | `0` | | `1` | `+18` | Örnekte `primitiveUnits="userSpaceOnUse"` kullanılır; dolayısıyla bu değerler SVG'nin kullanıcı koordinat sistemine aittir. viewBox ölçeklendikten sonra CSS pikseli cinsinden mesafe olmaları garanti değildir. Belirtim, `0` ölçeğini de yer değiştirme etkisi olmaması olarak tanımlar. Sabit yeşil değeri bu örnekte dikey örneklemeyi nötr tutar. Daha sonra iki eksenli çarpıtmayı keşfetmek için yeşile de bilinçli olarak değişkenlik verin. Beklenmeyen bir sonucu tanılarken kanalları ve haritayı aynı anda değiştirmeyin. ## Nötr gri için renk uzayını açıkça belirtin Nötr, seçili kanal değerinin **haritanın kullandığı çalışma uzayında 0,5** olmasıdır. Görsel olarak orta gri duran her renk örneğinin her filtre ayarında nötr olduğu anlamına gelmez. Filtrenin varsayılan çalışma uzayı `linearRGB` iken bu örnek açıkça `sRGB` kullanır. `rgb(50%,50%,50%)` olarak yazılmış renk, doğrusal RGB'ye dönüştürüldükten sonra sayısal olarak 0,5 değildir. [MDN color-interpolation-filters başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters), varsayılanı ve açık seçenekleri belgeler. Tanılama amaçlı sabit bir harita için gürültü ilkelini ve matrisi şununla değiştirin: ```xml ``` Yer değiştirme ilkelini, seçicileri ve filtredeki açık `sRGB` ayarını koruyun. [MDN feFlood başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood), burada kullanılan sabit renkli görüntüyü belgeler. Bu kontrol, harita değişkenliğini renk uzayı kaymasından ayırmaya yardımcı olur. Chrome test örneğimizde sRGB sabit haritalı rozet, filtresiz rozetle hizalı görünüyordu. Açık renk uzayı ayarını kaldırmak aynı gri haritalı rozeti gözle görülür biçimde kaydırdı. Bu bir tarayıcı gözlemidir; motorlar arasında piksel piksel aynı işleme iddiası değildir. Bu tarifi kendi çiziminize taşırken renk uzayı ayarını koruyun; onu geçersiz kılan CSS kurallarını kontrol edin. ## Aynı rozeti iki boyutta inceleyin Özgün rozeti Chrome'da **120 × 120** ve **300 × 300 CSS pikselinde** işledik. Her boyut, aynı `0 0 200 200` viewBox ile aynı sabit haritayı `0`, `12` ve `36` ölçeklerinde gösterdi. | Etki gücü | Özgün test örneğinde gözlenen | Desteklediği karar | | --------- | ------------------------------------------------------ | ---------------------------------------- | | `0` | Düz dış kenarlar ve kare açıklık | Karşılaştırma temeli | | `12` | Hafif yatay kontur değişkenliği; açıklık görünür kaldı | Ölçülü görüntüleme efekti | | `36` | Dış kenarlarda ve açıklıkta daha güçlü çarpıtma | Teslimden önce tanınabilirliği incelemek | Etki iki boyutta da görünüyordu; büyük önizleme, deliği ve kenarları incelemeyi kolaylaştırdı. Tarayıcı DOM'u altı örneğin her birinde özdeş `d` değerli bir yol içermeye devam etti. Üç ek 200 piksellik kontrol, filtresiz rozeti açık sRGB ve varsayılan linearRGB'deki sabit gri haritalarla karşılaştırdı. Bunlar bağımsız olarak oluşturulmuş SVG örnekleridir. Bu test örneğinin sınanan tarayıcıda ne yaptığını ve kaynak geometrisinin değişmediğini gösterirler. Yerel düzenleyici testleri, PerfectVector çıktısı veya uyumluluk araştırması değildirler. Kendi logonuzda önce en küçük gerçek görüntüleme boyutunu inceleyin. Temiz ana dosya bozulmamış olsa bile çarpıtılan açıklık veya köşe, işaretin algılanışını değiştirebilir. ## Kaymayı, zayıf etkiyi veya kırpılan kenarı tanılayın **Rozetin tamamı bükülmek yerine kayıyor.** Açık sRGB ile sabit harita kontrolünü sınayın. Seçili kanalları ve haritanın bu kanallarda gerçekten değişip değişmediğini kontrol edin. Seçili sabit ama nötr olmayan değer, tekdüze bir örnekleme ofseti oluşturur. **Etki zayıf kalıyor.** `in2="map"` değerinin matrisin adlandırılmış `result` değeriyle eşleştiğini doğrulayın. Aynı tohum ve frekansla ölçeği kademeli artırın. Ardından gerekirse farklı bir harita deneyin. Yeni tohum uzamsal deseni değiştirir; bu nedenle ayrı bir karşılaştırmadır. **Dikey kenar beklenmedik davranıyor.** Bu örnek yatay yer değiştirme için tasarlanmıştır: `xChannelSelector="R"` ve `yChannelSelector="G"`, G ise 0,5'te sabittir. İki eksenli değişkenlik eklemeden önce matris satırını ve kanal yazımını kontrol edin. **Bükülmüş kontur kesiliyor.** Kaynak yolu düzenlemeden önce filtre bölgesini inceleyin. Örnek, `x="-25%"`, `y="-25%"` ve `150%` genişlik ve yükseklik ile ek alan sağlar. [MDN filter başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) bu bölge özniteliklerini belgeler. Daha aşırı etkiler farklı bölge gerektirebilir ve çevreleyen görüntü alanı ayrı bir sınır koyabilir. Bölgeyi büyütmek kayıp çıktıyı geri getirmiyorsa [SVG filtre ve görüntü alanı kırpılma kontrollerini](https://perfectvector.com/tr/blog/svg-shadow-clipped) izleyin. **SVG başka bir hedefte etkisini kaybediyor.** Teslim edilen dosyanın aynısını o hedefte açın. Tarayıcı önizlemesi, düzenleyicinin, PDF dışa aktarıcının veya kesicinin davranışını belirlemez. Filtrenin değişmeden taşınacağını vaat etmek yerine temiz ana dosyayı hazır tutun. ## Temiz ana dosyayı ayrı teslim edin Filtresiz sürüm için yoldan `filter="url(#warp)"` özniteliğini ve kullanılmayan filtre tanımını kaldırın. Özgün `d`, `fill-rule="evenodd"`, dolgu ve viewBox'ı koruyun. Oluşan dosyayı açıp kare açıklığın ve düz kenarların temiz temel sürümle eşleştiğini doğrulayın. Temiz ana dosya ve görüntüleme efekti için ayrı dosya adları kullanın. Filtreli SVG'yi tek sayfada satır içi olarak yineliyorsanız her filtreye benzersiz kimlik verin ve `url(#...)` başvurusunu güncelleyin. Son yerleştirme yöntemini ve desteklemeyi amaçladığınız tarayıcıları inceleyin. Son çarpıtılmış dış hattın kendisi düzenlenebilir olmalıysa bu geometriyi ayrı bir çizim işi olarak hazırlayın. Bu filtre, önizlemeyi yeni yol komutlarına kalıcı olarak dönüştürmez. Rasterleştirilmiş önizlemeyi izlemek de kendi doğruluk ve temizleme kontrolleri olan yeni bir dönüşümdür; matematiksel olarak değişmemiş özgün ana dosyayı geri getirmez. SVG içine yerleştirilen PNG tamamen başka bir ayrımdır. Dosya adının düzenlenebilir logo yollarını garanti ettiğini varsaymadan önce [raster görüntü içeren SVG dosyalarına](https://perfectvector.com/tr/blog/svg-contains-raster-image) bakın. ## Logo vektörleştirme ne zaman yardımcı olur? Özgün temiz logonuz yalnızca PNG veya JPG olarak kaldıysa [bu kaynak logoyu vektörleştirin](https://perfectvector.com/tr/vectorize-logo), ardından görüntüleme filtresi eklemeden önce siluetini, deliklerini ve düzenlenebilir renk bölgelerini inceleyin. PerfectVector rasterden vektöre dönüşümü yapar; bu kılavuzdaki yer değiştirme grafiği ayrı bir SVG işlemidir. Çarpıtılmış önizlemeyi garantili bir üretim dış hattına dönüştürmez. Temiz yol ana dosyanız zaten varsa onu doğrudan kullanın. Kaynak hazırlama ve logo temizliği için [logo vektörleştirme kılavuzu](https://perfectvector.com/tr/blog/how-to-vectorize-a-logo), tarayıcı çarpıtması yerine geri kazanma adımını ele alır. ## Sık sorulan sorular **feDisplacementMap SVG yollarımı değiştirir mi?** Bu filtre, harita güdümlü örnekleme yoluyla işlenen görüntüyü değiştirir. Özgün tarayıcı test örneğinde altı etki gücü örneği, özdeş d değerlerine sahip tek yolu korudu. **Gri yer değiştirme haritası çizimimi neden hâlâ kaydırıyor?** Nötr, haritanın çalışma renk uzayında 0,5 kanal değeridir. %50 sRGB gri, varsayılan linearRGB uzayına dönüştürüldükten sonra sayısal olarak 0,5 değildir. Açık renk uzayı ayarı ve kontrollü sabit harita testi kullanın. **Bu örnekte scale 36 ne anlama geliyor?** userSpaceOnUse ilkel birimleriyle, 0 ile 1 arasındaki seçili kanal değerleri -18 ile +18 SVG kullanıcı birimi arasında örnekleme ofseti verir. Görünen mesafe, SVG viewBox'ının ölçeklendirilmesine bağlıdır. **Çarpıtılmış SVG'yi doğrudan kesiciye verebilir miyim?** Gösterilen çarpıtma yeni, düzenlenebilir kesim geometrisi değildir. Filtresiz yol ana dosyasını koruyun ve gerçek hedefi inceleyin; iş gerektiriyorsa kalıcı bükülmüş konturları ayrı hazırlayın. ## Kaynaklar 1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Kaynak ve harita girdileri, kanallar ve örnekleme davranışı. 2. [W3C: Yer değiştirme filtresi](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Ters eşleme, ölçek ve ilkel koordinatları. 3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Sabit işlemsel harita denetimleri. 4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Açık kontrol haritası kanal değerleri. 5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — Varsayılan linearRGB ve açık sRGB. 6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Sabit renkli harita kontrolü. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Filtre bölgesi öznitelikleri. Temiz özgün sürüm yalnızca raster olarak mevcutsa [kendi logonuzu SVG'ye dönüştürün](https://perfectvector.com/tr/vectorize-logo), siluetini ve deliklerini kontrol edin ve ayrı bir çarpıtılmış görüntüleme kopyası oluşturmadan önce bu ana dosyayı kaydedin. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/svg-fedisplacementmap-artwork) - [Illustrator Image Trace pasif mi? Nesneyi kontrol edin](https://perfectvector.com/tr/blog/illustrator-image-trace-greyed-out.md) - [fpdf2 ile SVG: Python PDF'nizde yolları koruyun](https://perfectvector.com/tr/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)