SVG Yer Değiştirme Haritaları: Logo Önizlemesini Çarpıtın

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, 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

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

Önizlemede yalnızca rengi değiştirmek için feColorMatrix ile yeniden renklendirmeyi 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.

<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 işlemsel değişkenlik sağlar. MDN gürültü başvurusu, 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, 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:

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

W3C yer değiştirme belirtimi 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:

Ö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, 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:

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

Yer değiştirme ilkelini, seçicileri ve filtredeki açık sRGB ayarını koruyun. MDN feFlood başvurusu, 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 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 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 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 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, 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, 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 — Kaynak ve harita girdileri, kanallar ve örnekleme davranışı.
2. W3C: Yer değiştirme filtresi — Ters eşleme, ölçek ve ilkel koordinatları.
3. MDN: feTurbulence — Sabit işlemsel harita denetimleri.
4. MDN: feColorMatrix — Açık kontrol haritası kanal değerleri.
5. MDN: color-interpolation-filters — Varsayılan linearRGB ve açık sRGB.
6. MDN: feFlood — Sabit renkli harita kontrolü.
7. MDN: 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, siluetini ve deliklerini kontrol edin ve ayrı bir çarpıtılmış görüntüleme kopyası oluşturmadan önce bu ana dosyayı kaydedin.