SVG feColorMatrix: Dolguları değiştirmeden renklendirin

SVG feColorMatrix filtresi, görüntü oluşturucunun gösterdiği renkleri değiştirir. Yollarınızdaki fill değerlerini yeniden yazmaz. Bu nedenle geri alınabilir görsel efektler için yararlıdır; ancak filtrelenmiş bir önizleme ile paleti yeniden düzenlenmiş bir SVG, farklı teslim dosyalarıdır.

Web önizlemesine ihtiyacınız varsa filtreyi koruyun ve çalıştığı sayfayı test edin. Birinin mavi şekli seçip mavi dolgusunu düzenlemesi gerekiyorsa kaynak boyaları değiştirin. Kaynak PNG ise ne filtre ne de SVG kapsayıcısı düzenlenebilir vektör şekilleri oluşturur; bunun için ayrı bir vektörleştirme adımı gerekir.

Aşağıdaki örnek, her iki yeniden renklendirme yolu için aynı iki yapraklı motifi kullanır. Kodu kaydedebilir, kaynağı inceleyebilir ve tam olarak neyin değiştiğini görmek için filtreyi kaldırabilirsiniz.

İhtiyacınız olan yeniden renklendirme sonucunu seçin

SVG renk düzenleme rehberi, dolguları, konturları ve stil kurallarını bulmayı ele alır. Buradaki daha dar soru, filtrenin dosyada neyi olduğu gibi bıraktığıdır. MDN, feColorMatrix öğesini piksel renk kanallarının dönüşümü olarak tanımlarken dolgu ve kontur rehberi, şekillere uygulanan boyaları açıklar.

İnceleyebileceğiniz iki renkli bir örnek

Bunu filtered-leaves.svg olarak kaydedin ve tarayıcıda açın. İlk yaprak turuncu #cc6633 dolguyla başlar; ikincisi yarı opaklıkta yeşil #339966 dolguya sahiptir. Matris, yeşil ve alfa kanallarını korurken kırmızı ve mavi kanallarının yerini değiştirir.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Bu özgün motifin dört sürümünü tarayıcıda oluşturduk: özgün boyalar, filtreli sürüm, doğrudan düzenleme ve filtresi kaldırılmış bir kopya. Doğrudan düzenlemede, filtre kullanılmadan ilk dolgu #3366cc, ikinci dolgu #669933 olarak değiştirildi. Her iki yeniden renklendirme yolu da mavi ve zeytin yeşili bir motif üretti. Filtreli sürümün DOM'u incelendiğinde, dolgu öznitelikleri hâlâ özgün turuncu ve yeşil değerleri döndürüyordu. Filtre kaldırılınca özgün palet geri geldi.

Bu, küçük bir tarayıcı gösterimidir; her düzenleyici veya dışa aktarma biçimi için uyumluluk testi değildir. Teslim açısından yararlı kontrolü basittir: filtreli dosya, bu efektin korunmasına ve işlenmesine hâlâ bağlıdır. Doğrudan dolgu sürümü ise yeni paleti şekillerin kendisinde taşır.

Kaynak kontrolünü tekrarlamak için SVG'yi bir metin düzenleyicide açın ve fill= ifadesini arayın. Ardından gruptan yalnızca filter="url(#swap-red-blue)" özniteliğini kaldırın ve tarayıcıyı yenileyin. Sonucu karşılaştırabilmek için değiştirilmemiş dosyayı yanında tutun.

Bir matrisi ezberlemeden dört satırı okuyun

type="matrix" için values özniteliği yirmi sayı içerir: beşer sayıdan oluşan dört satır. Her satır bir çıktı kanalını hesaplar. Sütunlar; girdinin kırmızı, yeşil, mavi ve alfa değerleri ile sabit bir ek değeri kullanır. MDN matris başvurusu, denklemleri ve birim matrisi gösterir.

Örneğimizde ilk satır maviyi yeni kırmızı olarak alır. İkinci satır yeşili korur. Üçüncü satır kırmızıyı yeni mavi olarak alır. Dördüncü satır alfayı korur:

0 0 0 1 0

Son satır, “mevcut alfayı ek bir değer olmadan kullan” anlamına gelir. Tamamını sıfırlarla değiştirmek sonucu saydam yapar. Son sütuna sabit bir değer eklemek, kaynağın saydam olduğu yerlerde bile saydamlığı değiştirir; bu da filtre bölgesi içinde istenmeyen bir dikdörtgen oluşturabilir.

Matris, filtrenin işlenmiş girdisini işler. Hangi piksellerin yapraktan, harften, konturdan veya gömülü fotoğraftan geldiğini bilmez. Etkilemek istediğiniz gruba veya nesneye uygulayın. Bir tasarımın yalnızca anlam bakımından belirli bir bölümünü değiştirmeniz gerekiyorsa o bölümü seçin ve bunun yerine boyasını düzenleyin.

Sayılarınız bir RGB renk örneğinden geliyorsa sRGB ayarlayın

SVG filtre temel öğeleri varsayılan olarak linearRGB kullanır. rgb(128, 128, 128) gibi bir renk örneği normalde sRGB ile belirtilir; dolayısıyla varsayılan filtre uzayındaki 0.5 matris sabiti, sRGB'de yarım ölçeğin ekranda gösterdiği griyle aynı anlama gelmez. Matrisinizin bu sRGB kanal değerleri üzerinde çalışmasını istiyorsanız color-interpolation-filters="sRGB" kullanın. Bu, color-interpolation özniteliğinden farklıdır; diğer özniteliği değiştirmek, filtrenin renk uzayını seçmez. MDN, varsayılanları ve bu ayrımı açıklar.

Tek renkli #3366cc silüet için normalize edilmiş RGB değerleri 51/255, 102/255 ve 204/255, yani 0.2, 0.4 ve 0.8 olur. Aşağıdaki filtre, girdi RGB değerlerini atar ve girdi alfasını korurken bu sabitleri ayarlar:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Nesnede filter="url(#solid-blue)" kullanarak bu filtreye referans verin. Opak kaynak renkleri arasındaki farkları bilinçli olarak kaldırır. Silüet için uygundur; fotoğrafın ton ayrıntılarını korumak için değil. Filter Effects belirtimi, kanal dönüşümünü ve önceden alfa ile çarpılmamış renk değerlerinin nasıl işlendiğini tanımlar.

sRGB ayarlamak, bir hesaplama uzayı seçimidir; her ekranda veya baskıda aynı renk garantisi değildir. Daha kapsamlı bir teslim uyuşmazlığı için SVG dışa aktarma renk kontrol listesini kullanın.

Yalnızca önizlemeyi değil, teslim edilen dosyayı kontrol edin

Özgün çizim ve filtre tanımı bozulmadan kaldığı sürece filtre tabanlı yeniden renklendirme geri alınabilir. Ekran görüntüsü veya raster dışa aktarma, görünür sonucu piksel olarak kaydeder. Bu işlemlerin hiçbiri tek başına yeni paleti düzenlenebilir yol dolguları hâline getirmez.

Bir vektör dosyasını teslim etmeden önce gerçek hedefi kontrol edin:

1. Kaydedilen SVG'yi, alıcının kullanacağı içe veya dışa aktarma yolundan geçirin.
2. Renkleri ve yarı saydam kenarları tarayıcı önizlemesiyle karşılaştırın.
3. Bir şekil seçin ve dolgusunu inceleyin. Hedeflenen yeni değeri mi içeriyor, yoksa efektin altında özgün boya mı var?
4. Bir kez kaydedip yeniden açın. Efekt gerekiyorsa filtre tanımının ve referansının korunduğunu doğrulayın.
5. Alıcının normal, düzenlenebilir düz renklere ihtiyacı varsa doğrudan dolgu sürümünü kullanın ve artık gerekmeyen filtreyi bu teslim kopyasından kaldırın.

Gradyanlar, konturlar, opaklık veya renkleri karışan örtüşmeler için çizimin tamamına uygulanan bir matris, genel amaçlı bul-değiştir aracı değildir. Hedeflenen görünümü kaynak boyalarla yeniden oluşturmak, iki onaltılık renk değerini düzenlemekten fazlasını gerektirebilir. Raster teslim kabul ediliyorsa kontrol edilen görünümü PNG'ye aktarmak başka bir seçenektir. Ana vektör kopyasını ayrı tutun.

PerfectVector bu iş akışına ne zaman dahil olur?

Bu iki yol zaten elinizdeyse doğrudan düzenleyin. Renk filtresini kaldırmak için onları rasterleştirip yeniden vektörleştirmeniz gerekmez.

Başlangıç çiziminiz PNG veya JPG olduğunda ve düzenlenebilir bölgelere ihtiyaç duyduğunuzda PerfectVector devreye girer. Bir vektör adayı hazırlamak için görselden vektöre dönüşümü kullanın; ardından yeniden renklendirmeden önce şekil sınırlarını ve küçük ayrıntıları inceleyin. Raster görüntüye uygulanan bir filtre görünümünü değiştirebilir, ancak raster görüntü piksel içeriği olarak kalır. Gömülü raster kontrolü, bu durumu seçip düzenleyebileceğiniz yollardan ayırmanıza yardımcı olur.

Amacınız fotoğrafa yalnızca bir renk tonu vermekse raster iş akışını koruyun. Ana vektör dosyası mevcut bir logo için ana dosyayı kullanın. Vektörleştirmeye genel bakış, piksellerden geometriyi geri kazanmanın ne zaman yararlı adım olduğunu açıklar.

Sık sorulan sorular

feColorMatrix, SVG'mdeki fill değerlerini değiştirir mi? Hayır. İşlenmiş renk kanallarını dönüştürür. Kaynak fill öznitelikleri, siz onları ayrıca düzenlemedikçe değişmez.

Seçtiğim gri neden beklediğimden daha açık? Filtrenin hesaplama uzayını kontrol edin. SVG filtre temel öğelerinde varsayılan linearRGB'dir. Matris sabitleri normalize edilmiş sRGB renk örneği değerlerini temsil ediyorsa color-interpolation-filters değerini sRGB olarak ayarlayın.

Yeniden renklendirirken saydamlığı nasıl korurum? Alfa satırını 0 0 0 1 0 olarak koruyun. Bu, girdi alfasını korur. Yarı saydam kenarları kontrol edin ve saydamlığı değiştirmeyi amaçlamıyorsanız alfaya sabit bir ek değer eklemekten kaçının.

Filtrelenmiş PNG, düzenlenebilir vektöre dönüşebilir mi? Renk filtresi geometriyi değil, görünümü değiştirir. Tek tek vektör şekillerini düzenlemek için özgün vektörü edinin veya raster görüntüyü vektörleştirip ortaya çıkan yolları inceleyin.

Kaynaklar

1. MDN: feColorMatrix — Matris satırlarını, kanalları ve mevcut dönüşüm türlerini tanımlar.
2. MDN: color-interpolation-filters — Varsayılan linearRGB'yi ve açıkça sRGB seçimini açıklar.
3. W3C: Filter Effects, feColorMatrix — Renk ve alfa dönüşüm davranışını belirtir.
4. MDN: Fills and strokes — SVG şekillerinin kullandığı kaynak boyaları açıklar.

Çiziminiz yalnızca piksel olarak mevcutsa ve ayrı düzenlenebilir renklere ihtiyaç duyuyorsanız görselinizi bir vektör adayına dönüştürün. Yolları inceleyin, kaynak boyaları yeniden renklendirin ve hem görünümünü hem de düzenlenebilirliğini kontrol etmek için teslim dosyasını yeniden açın.