Unit Gradien SVG: Gunakan Satu Perpaduan Warna untuk Seluruh Path Logo

Untuk menyebarkan satu gradien di sepanjang path SVG terpisah, gunakan gradientUnits="userSpaceOnUse", tetapkan titik akhir dalam koordinat artwork, dan pertahankan path dalam sistem koordinat yang sama. Setiap path kemudian menampilkan bagian perpaduan warna pada posisinya. Anda dapat menjaga bagian-bagian logo tetap dapat diedit secara terpisah.

Nilai default, objectBoundingBox, menyesuaikan gradien ke setiap elemen yang diwarnai. Karena itu, merujuk ID gradien yang sama dari tiga path dapat menghasilkan tiga perpaduan ungu-ke-oranye lengkap. Mengubah unit memperbaiki pengulangan tersebut, tetapi anak yang ditransformasikan masih dapat menggeser pewarnaannya sendiri. Referensi gradientUnits MDN mendefinisikan ruang referensi sebagai ruang pengguna saat ini dari elemen yang menggunakan gradien.

Panduan ini menggunakan lambang orisinal tiga bagian yang digambar langsung sebagai path SVG. Jika Anda sudah memiliki logo vektor, gunakan master tersebut. Sumber yang hanya berupa raster membutuhkan pemulihan geometri sebelum langkah pengeditan pewarnaan ini; panduan vektorisasi gradien yang lebih luas menjelaskan pilihan itu.

Tentukan apakah perpaduan berlaku untuk setiap bentuk atau seluruh lambang

Gunakan pewarnaan relatif terhadap objek ketika setiap bagian harus memiliki perpaduan lengkapnya sendiri. Gunakan titik akhir ruang pengguna bersama ketika bagian kiri dan kanan harus mengambil warna berbeda dari satu transisi.

Menempatkan fill="url(#brandBlend)" pada grup meneruskan isian ke anak-anaknya. Hal itu tidak membuat gradien kotak pembatas objek mengukur siluet gabungan grup. Anak-anak tetap menerima pewarnaannya sendiri. Spesifikasi paint server SVG menjelaskan gradien sebagai sumber daya yang dirujuk oleh fill atau stroke elemen.

Satu lambang, empat pilihan koordinat

Tetapkan titik akhir yang membentang sepanjang artwork

Path contoh menempati posisi horizontal dari x=30 hingga x=310. Itulah titik akhir perpaduan. Segitiga berhenti pada x=125, blok tengah menempati 140 hingga 210, dan bentuk kanan membentang dari 225 hingga 310.

Simpan ini sebagai shared-logo.svg dan buka di browser:

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

Anda seharusnya melihat segitiga ungu, blok tengah yang sebagian besar merah muda, dan bentuk kanan bernuansa oranye, seperti B. Celah kosong menyembunyikan bagian dari perpaduan yang sama; warna tidak dimulai ulang ketika path berikutnya dimulai. Ubah satu stop dan ketiga bagian diperbarui karena semuanya merujuk definisi yang sama.

Untuk perbandingan langsung dengan A, ganti atribut gradientUnits, x1, y1, x2, dan y2 gradien dengan x1="0%" y1="0%" x2="100%" y2="0%". Menghilangkan gradientUnits memulihkan default. Setiap bentuk sekarang menerima transisi warna lengkap.

Persentase juga memiliki referensi berbeda: dengan userSpaceOnUse, persentase merujuk pada viewport SVG saat ini, bukan kotak pembatas objek yang diwarnai. Angka eksplisit membuat contoh ini lebih mudah diperiksa. Logo yang hanya menempati sebagian viewBox besar tidak harus menggunakan seluruh lebar viewBox tersebut untuk perpaduannya.

Periksa transformasi ketika satu bagian memiliki warna yang salah

Dalam C, bentuk kanan terlihat seolah tetap di tempat. Koordinat path-nya berpindah 60 unit ke kiri, dan grup anak memindahkannya 60 unit ke kanan:

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

Ganti path ketiga dalam contoh lengkap dengan grup ini untuk mereproduksi ketidaksesuaian. Tepi kiri yang terlihat tetap pada x=225, tetapi tepi kiri lokalnya adalah x=165. Gradien menggunakan ruang lokal tersebut, sehingga bagian itu mengambil bagian perpaduan yang lebih awal dan lebih merah muda. userSpaceOnUse tidak menjamin satu sistem koordinat global tanpa memandang transformasi bersarang.

Untuk lambang ini, pulihkan koordinat asli path ketiga dan hapus translasi tersendirinya. Jika seluruh logo perlu dipindahkan, terapkan transform="translate(10 0)" pada grup luar yang sudah ada. Itu menghasilkan D: ketiga bentuk dan pewarnaan bersamanya bergerak bersama.

Koreksi ini bekerja karena path sudah dinyatakan dalam sistem koordinat bersama. Menempatkan anak-anak dengan transformasi tidak terkait ke dalam satu grup tambahan tidak menghapus transformasi masing-masing. Untuk logo impor, periksa transformasi tersebut sebelum meratakan atau menulis ulang geometri, dan pertahankan salinan master asli.

Kapan gradientTransform berguna

gradientTransform mengubah pemetaan koordinat pewarnaan tanpa mengubah geometri path. Atribut ini berguna ketika Anda sengaja perlu memutar, memiringkan, atau memosisikan ulang perpaduan. MDN mendokumentasikannya sebagai transformasi tambahan yang diterapkan setelah sistem koordinat pilihan gradientUnits ditetapkan.

Hindari menyesuaikan satu definisi bersama untuk mengompensasi satu anak tanpa memeriksa yang lain. Setiap bentuk yang merujuk definisi tersebut dapat terdampak. Menjaga artwork dalam ruang bersama lebih mudah dipelihara untuk logo sederhana di sini; artwork impor yang lebih kompleks mungkin membutuhkan definisi gradien yang dipetakan secara terpisah.

Peran PerfectVector

Jika satu-satunya sumber adalah logo PNG atau JPG, PerfectVector dapat membantu memulihkan geometri vektor yang dapat diedit sebelum Anda membangun ulang gradien yang terkoordinasi. Vektorisasikan logo, lalu periksa siluet, lubang, dan bagian-bagian berbeda di editor Anda. Gunakan bentuk tersebut sebagai titik awal untuk pewarnaan bersama.

Demonstrasi di atas dibuat dengan tangan untuk mengisolasi perilaku koordinat; ini bukan hasil konversi PerfectVector. Menelusuri piksel dengan gradasi warna tidak boleh diasumsikan memulihkan stop gradien asli atau pengaturan koordinatnya. Logo sederhana mungkin juga lebih cepat digambar ulang secara manual. Pertahankan SVG, AI, atau PDF vektor yang sudah ada jika tersedia.

Untuk bentuk yang menolak isian baru, gunakan pemeriksaan pewarnaan ulang SVG sebelum mengubah koordinat gradien. Jika ekspor yang sama berbeda antaraplikasi, ikuti diagnosis pergeseran warna SVG.

Buka kembali file sebelum menyerahkannya

Simpan SVG baru dan uji file yang sama persis, bukan hanya canvas editor. Periksa hal berikut:

• ID gradien ada dan setiap path yang dimaksudkan merujuknya.
• Perpaduan mencakup batas logo pada arah yang dimaksudkan.
• Memindahkan seluruh lambang menjaga warna tetap terkoordinasi.
• Bagian terpisah tetap dapat dipilih ketika Anda perlu mengeditnya.
• Aplikasi penerima mempertahankan tampilan yang diharapkan.

Rendering browser yang mulus memperagakan perilaku pewarnaan di browser tersebut. Rendering itu tidak membuktikan dukungan pada setiap editor atau mengubah gradien menjadi geometri pemotongan. Simpan versi warna datar untuk alur kerja yang membutuhkan bentuk solid, dan pertahankan master SVG yang dapat diedit. Panduan file SVG menjelaskan perbedaan antara konten geometris file dan tampilan yang ditampilkan.

FAQ

Apakah saya harus menggabungkan path untuk berbagi gradien? Tidak. Path terpisah dapat merujuk satu gradien. Gunakan userSpaceOnUse dengan titik akhir yang sesuai dan pastikan path berbagi sistem koordinat yang dimaksudkan.

Mengapa mengelompokkan path masih mengulang gradien? Grup dapat meneruskan isiannya ke path anak, tetapi gradien objectBoundingBox tetap menggunakan batas setiap anak yang diwarnai. Tetapkan titik akhir ruang pengguna ketika perpaduan harus membentang sepanjang seluruh lambang.

Mengapa warna satu path berubah setelah saya memindahkannya ke grup? Transformasi pada grup tersebut dapat mengubah sistem koordinat lokal path. Bandingkan transformasinya dengan path lain dan uji SVG hasil ekspor sebelum menyesuaikan gradien bersama.

Sources

1. MDN — gradientUnits — Mendefinisikan default, sistem koordinat referensi, dan perilaku persentase.
2. SVG Working Group — Paint server — Menentukan pewarnaan gradien yang dapat digunakan ulang, stop, dan perilaku penyebaran.
3. MDN — gradientTransform — Menjelaskan transformasi tambahan koordinat gradien.

Memulai dari logo raster? Ubah logo Anda menjadi path SVG yang dapat diedit, periksa bentuk terpisahnya, lalu bangun ulang gradien bersama dan buka kembali ekspor akhir untuk memeriksa perataannya.