SVG gradyan birimleri: Logo yollarında ortak geçiş

Tek bir gradyanı ayrı SVG yollarına yaymak için gradientUnits="userSpaceOnUse" kullanın, uç noktaları çizimin koordinatlarında ayarlayın ve yolları aynı koordinat sisteminde tutun. Böylece her yol, renk geçişinin kendi konumuna denk gelen bölümünü gösterir. Logonun parçalarını ayrı ayrı düzenlenebilir olarak koruyabilirsiniz.

Varsayılan objectBoundingBox, gradyanı boyanan her öğeye ayrı ayrı sığdırır. Bu nedenle üç yoldan aynı gradyan ID'sine başvurmak, mor renkten turuncuya üç tam geçiş oluşturabilir. Birimleri değiştirmek bu tekrarı düzeltir; ancak dönüşüm uygulanmış bir alt öğenin boyaması yine kayabilir. MDN'nin gradientUnits başvurusu, başvuru uzayını gradyanı kullanan öğenin geçerli kullanıcı uzayı olarak tanımlar.

Bu adım adım rehber, doğrudan SVG yolları olarak çizilmiş özgün, üç parçalı bir amblem kullanır. Zaten vektör logonuz varsa o ana dosya üzerinde çalışın. Yalnızca raster görüntü olarak mevcut bir kaynak, bu boyama düzenleme adımından önce geometrinin yeniden elde edilmesini gerektirir; daha kapsamlı gradyan vektörleştirme rehberi bu seçimi açıklar.

Geçişin her şekle mi yoksa tüm logoya mı ait olduğuna karar verin

Her parçanın kendi tam renk geçişine sahip olması gerektiğinde nesneye göre tanımlanan boyamayı kullanın. Sol ve sağ parçaların tek bir geçişten farklı renkler alması gerektiğinde ortak kullanıcı uzayı uç noktalarını kullanın.

Bir gruba fill="url(#brandBlend)" eklemek, dolguyu alt öğelerine aktarır. Nesnenin sınırlayıcı kutusuna göre tanımlanan bir gradyanın, grubun birleşik silüetini ölçmesini sağlamaz. Alt öğeler yine kendi boyamalarını alır. SVG boyama sunucusu belirtimi, gradyanları bir öğenin fill veya stroke özelliğinden başvurulan kaynaklar olarak tanımlar.

Bir amblem, dört koordinat seçimi

Çizimin tamamını kapsayan uç noktalar ayarlayın

Örnekteki yollar yatay olarak x=30 ile x=310 arasındaki konumları kaplar. Bunlar renk geçişinin uç noktalarıdır. Üçgen x=125 konumunda biter; orta blok 140 ile 210 arasını, sağdaki şekil ise 225 ile 310 arasını kaplar.

Bunu shared-logo.svg olarak kaydedin ve bir tarayıcıda açın:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

B'deki gibi mor bir üçgen, ağırlıklı olarak pembe bir orta blok ve turuncu tonlarında bir sağ şekil görmelisiniz. Boşluklar aynı geçişin bazı bölümlerini gizler; bir sonraki yol başladığında renk yeniden başlamaz. Bir renk durağını değiştirin; aynı tanıma başvurdukları için üç parça da güncellenir.

A ile doğrudan karşılaştırmak için gradyanın gradientUnits, x1, y1, x2 ve y2 özniteliklerini x1="0%" y1="0%" x2="100%" y2="0%" ile değiştirin. gradientUnits özniteliğini çıkarmak varsayılana geri döndürür. Artık her şekil tam renk geçişini alır.

Yüzdelerin referansı da farklıdır: userSpaceOnUse ile boyanan nesnenin sınırlayıcı kutusunu değil, geçerli SVG görüntüleme alanını esas alırlar. Koordinatları açıkça sayısal değerlerle belirtmek bu örneği incelemeyi kolaylaştırır. Büyük bir viewBox'ın yalnızca bir bölümünü kaplayan logonun, renk geçişi için o viewBox'ın tüm genişliğini kullanması gerekmez.

Bir parçanın rengi yanlışsa dönüşümleri kontrol edin

C'de sağdaki şekil yerinde kalmış gibi görünür. Yol koordinatları 60 birim sola taşınmış, bir alt grup ise onu 60 birim sağa taşımıştır:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Uyumsuzluğu yeniden oluşturmak için tam örnekte üçüncü yolu bu grupla değiştirin. Görünür sol kenarı x=225 konumunda kalır; ancak yerel sol kenarı x=165 olur. Gradyan bu yerel uzayı kullanır; bu yüzden parça, geçişin daha önceki ve daha pembe bir bölümünden renk alır. userSpaceOnUse, iç içe dönüşümlerden bağımsız olarak tek bir küresel koordinat sistemi kullanılacağına dair bir garanti değildir.

Bu amblem için üçüncü yolun özgün koordinatlarını geri yükleyin ve ona özel ötelemeyi kaldırın. Tüm logonun taşınması gerekiyorsa bunun yerine mevcut dış gruba transform="translate(10 0)" uygulayın. Böylece D oluşur: üç şekil ve ortak boyamaları birlikte hareket eder.

Bu düzeltme işe yarar, çünkü yollar zaten ortak bir koordinat sisteminde ifade edilmiştir. Birbirinden bağımsız dönüşüm uygulanmış alt öğeleri bir grubun daha içine yerleştirmek, bireysel dönüşümlerini kaldırmaz. İçe aktarılmış bir logoda geometriyi düzleştirmeden veya yeniden yazmadan önce bu dönüşümleri inceleyin ve özgün ana dosyanın bir kopyasını saklayın.

gradientTransform ne zaman kullanışlıdır?

gradientTransform, yol geometrisini değiştirmeden boyamanın koordinat eşlemesini değiştirir. Renk geçişini bilinçli olarak döndürmeniz, ona eğik dönüşüm uygulamanız veya onu yeniden konumlandırmanız gerektiğinde kullanışlıdır. MDN bunu ek bir dönüşüm olarak belgeliyor; bu dönüşüm, gradientUnits ile seçilen koordinat sistemi oluşturulduktan sonra uygulanır.

Diğer alt öğeleri kontrol etmeden tek bir alt öğeyi telafi etmek için ortak tanımı ayarlamaktan kaçının. Bu tanıma başvuran her şekil etkilenebilir. Buradaki basit logo için çizimi ortak bir uzayda tutmak, bakımı kolaylaştırır; daha karmaşık içe aktarılmış çizimler, ayrı eşlenmiş gradyan tanımları gerektirebilir.

PerfectVector bu süreçte nerede yer alır?

Tek kaynak PNG veya JPG logo ise PerfectVector, uyumlu gradyanı yeniden oluşturmadan önce düzenlenebilir vektör geometrisini yeniden elde etmenize yardımcı olabilir. Logoyu vektörleştirin, ardından düzenleyicinizde silüeti, delikleri ve ayrı parçaları inceleyin. Bu şekilleri ortak boyamanın başlangıç noktası olarak kullanın.

Yukarıdaki gösterim, koordinat davranışını ayrı olarak incelemek için elle yazılmıştır; PerfectVector dönüşüm sonucu değildir. Gölgelendirilmiş pikselleri vektörleştirmenin özgün gradyan duraklarını veya koordinat ayarlarını geri getireceği varsayılmamalıdır. Basit bir logoyu elle yeniden çizmek de daha hızlı olabilir. Varsa mevcut SVG, AI veya vektör PDF dosyasını koruyun.

Yeni dolguyu kabul etmeyen bir şekil için gradyan koordinatlarını değiştirmeden önce SVG renklendirme kontrollerini kullanın. Aynı dışa aktarım uygulamalar arasında farklı görünüyorsa SVG renk kayması teşhisini izleyin.

Teslim etmeden önce dosyayı yeniden açın

Yeni bir SVG kaydedin ve yalnızca düzenleyici tuvalini değil, dosyanın kendisini test edin. Şunları kontrol edin:

• Gradyan ID'si mevcut ve amaçlanan her yol ona başvuruyor.
• Renk geçişi logonun sınırlarını amaçlanan yönde kapsıyor.
• Logonun tamamını taşımak renklerin uyumunu koruyor.
• Düzenlemeniz gereken ayrı parçalar seçilebilir durumda kalıyor.
• Dosyayı alan uygulama beklenen görünümü koruyor.

Tarayıcıda pürüzsüz görüntülenmesi, o tarayıcıdaki boyama davranışını gösterir. Her düzenleyicide desteği kanıtlamaz veya gradyanı kesim geometrisine dönüştürmez. Düz renkli şekiller gerektiren iş akışları için düz renkli bir sürüm saklayın ve düzenlenebilir ana SVG dosyasını koruyun. SVG dosyası rehberi, dosyanın geometrik içeriği ile görüntülenen görünümü arasındaki farkı açıklar.

Sık sorulan sorular

Bir gradyanı paylaşmak için yolları birleştirmem gerekir mi? Hayır. Ayrı yollar tek bir gradyana başvurabilir. Uygun uç noktalarla userSpaceOnUse kullanın ve yolların amaçlanan koordinat sistemini paylaştığından emin olun.

Yolları gruplamak neden gradyanı yine tekrar ettiriyor? Bir grup, dolgusunu alt yollara aktarabilir; ancak objectBoundingBox gradyanı yine boyanan her alt öğenin sınırlarını kullanır. Geçişin tüm logoyu kapsaması gerektiğinde kullanıcı uzayı uç noktalarını ayarlayın.

Bir yolu gruba taşıdıktan sonra rengi neden değişti? O gruba uygulanan bir dönüşüm, yolun yerel koordinat sistemini değiştirebilir. Dönüşümlerini diğer yollarla karşılaştırın ve ortak gradyanı ayarlamadan önce dışa aktarılan SVG'yi test edin.

Kaynaklar

1. MDN — gradientUnits — Varsayılanı, başvuru koordinat sistemlerini ve yüzde davranışını tanımlar.
2. SVG Working Group — Paint servers — Yeniden kullanılabilir gradyan boyamasını, renk duraklarını ve yayılma davranışını belirtir.
3. MDN — gradientTransform — Gradyan koordinatlarına uygulanan ek dönüşümleri açıklar.

Raster görüntü biçimindeki bir logodan mı başlıyorsunuz? Logonuzu düzenlenebilir SVG yollarına dönüştürün, ayrı şekilleri inceleyin, ardından ortak gradyanı yeniden oluşturun ve hizalamasını kontrol etmek için son dışa aktarımı yeniden açın.