Urutan Pewarnaan SVG: Jaga Outline Tebal di Belakang Tulisan

Atur paint-order="stroke fill" pada elemen teks atau bentuk SVG untuk menggambar outline sebelum isiannya. Dengan isian opak, isian menutupi bagian stroke yang mengarah ke dalam, sehingga outline tebal tidak menggerus permukaan berwarna tulisan. Anda juga dapat menulis paint-order: stroke fill; dalam CSS.

Path, ukuran font, dan lebar stroke tetap sama. Ini adalah pengaturan tampilan, berguna ketika wordmark ber-outline menjadi berat atau sulit dibaca setelah Anda meningkatkan lebar stroke. Pengaturan ini tidak membuat stroke yang disejajarkan ke luar atau kontur pemotongan baru.

Mengapa outline default memenuhi huruf

SVG biasanya menggambar isian elemen, lalu stroke-nya, lalu marker-nya. Stroke terpusat meluas melintasi batas bentuk berisian. Menggambar stroke tersebut terakhir menutupi sebagian isian. Pada batang huruf sempit, stroke besar dapat menyembunyikan sebagian besar warna permukaan.

Membalik dua operasi pertama memungkinkan isian menutupi tumpang tindih itu. Spesifikasi pewarnaan SVG mendefinisikan urutannya, dan referensi atribut SVG MDN mendokumentasikan atribut serta padanan CSS-nya. Nilai lebih pendek stroke memiliki urutan yang sama dengan stroke fill markers: operasi yang tidak disebutkan mengikuti setelahnya dalam urutan relatif normal.

Efek ini membutuhkan isian yang terlihat. Path dengan fill="none" tidak memiliki apa pun untuk menutupi stroke dalam. Isian yang sebagian transparan dapat membiarkan stroke itu terlihat menembusnya, jadi gunakan isian opak untuk hasil yang diperagakan di sini.

Bandingkan artwork yang sama pada dua ukuran

Kami membuat wordmark BOLD pendek dengan teks yang masih dapat diedit dan lambang path segitiga kecil. Perbandingan browser di bawah hanya mengubah urutan pewarnaan dalam setiap pasangan. Perbandingan menggunakan lebar stroke 4 dan 8 unit pengguna SVG, lalu menampilkan viewBox 400 × 110 yang sama pada lebar 400 dan 200 piksel CSS.

Pada pengaturan 8 unit, wordmark dengan urutan normal kehilangan banyak permukaan kuningnya. Menggambar isian terakhir menjaga batang kuning tetap terlihat. Efek masih tampak dalam versi 200 piksel, tetapi bukaan kecil tetap sempit. Bukaan dalam kecil pada lambang juga menjadi sulit dibedakan dengan stroke lebih tebal.

Detail terakhir itu penting: urutan pewarnaan dapat mempertahankan permukaan huruf tanpa membuat setiap lubang atau celah terbaca. Stroke masih meluas ke ruang tanpa isian. Jika bukaan menutup pada ukuran tampilan yang dimaksudkan, kurangi stroke atau sederhanakan artwork. Memperbesar pratinjau browser bukan pengganti pemeriksaan ukuran yang benar-benar akan dilihat pembaca.

Ini adalah contoh gambar orisinal, bukan hasil konversi PerfectVector. Wordmark menggunakan font Arial terinstal dengan fallback sans-serif; font berbeda mengubah bentuk dan jarak huruf.

Coba SVG lengkap

Simpan ini sebagai wordmark.svg dan buka langsung di browser. Contoh menyisakan ruang yang cukup di sekitar bentuk untuk stroke yang terlihat. Ubah paint-order menjadi normal untuk perbandingan, lalu coba stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Grup meneruskan properti pewarnaannya ke path dan teks. Setiap anak menggunakan urutan yang diminta untuk rendering-nya sendiri. fill-rule="evenodd" memberikan bukaan dalam pada lambang; aturan itu independen dari urutan pewarnaan.

Untuk mereproduksi contoh kecil, ubah width dan height menjadi 200 dan 55, tanpa mengubah viewBox. Karena file ini tidak memiliki stroke yang tidak ikut diskalakan, artwork dan stroke-nya diskalakan bersama. Stroke 8 unit menjadi lebar 4 piksel CSS pada pemetaan setengah ukuran tersebut, sebelum memperhitungkan bagian yang disembunyikan isian.

Untuk versi berbasis stylesheet, berikan class pada target dan atur:

.outlined-wordmark {
  paint-order: stroke fill;
}

Ketika atribut presentasi dan deklarasi CSS sama-sama menentukan properti, CSS diprioritaskan. Jika mengubah atribut tampaknya tidak melakukan apa pun, periksa aturan yang diterapkan. Referensi CSS MDN juga menjelaskan pewarisan dan kombinasi kata kunci yang diizinkan.

Apa yang tidak diubah pengaturan ini

Penyejajaran stroke. Stroke masih mengikuti path tengah yang sama. Menggambar isian di atas sebagian stroke membuat batas yang tampak berada di luar wilayah berisian, tetapi tidak memindahkan geometri stroke ke luar. Pada tepi lubang, stroke yang tersisa dan terlihat dapat masuk ke dalam lubang.

Susunan bertumpuk objek terpisah. Mengatur urutan pewarnaan pada satu elemen tidak mengirim elemen tersebut ke belakang bentuk tetangga. Objek tumpang tindih yang datang kemudian masih dapat menutupinya. Ubah urutan objek ketika itu masalahnya. Sebagai contoh, lihat mengapa z-index SVG tidak mengubah urutan path logo.

Path potong atau offset. Pemotong atau alat geometri membutuhkan kontur yang sesuai. Alat itu tidak dapat diasumsikan menginterpretasikan outline browser yang menarik sebagai satu batas tergabung. Buat dan periksa geometri yang diperlukan secara terpisah jika pekerjaan penyerahan memerlukannya.

Portabilitas font. Sampel berisi teks yang masih dapat diedit. Mengubah urutan pewarnaannya tidak mengemas font atau membekukan bentuk glyph. Gunakan pemeriksaan perubahan font SVG jika wordmark berubah ketika dibuka kembali di tempat lain.

Pisahkan perbedaan tersebut saat mengedit. Perubahan paint-order mudah dibalik; memperluas stroke atau mengonversi teks ke path mengubah struktur dokumen yang dapat diedit.

Periksa salinan penyerahan di tujuannya

Mulailah dengan hasil browser, lalu buka file tersimpan dalam aplikasi atau renderer yang akan menggunakannya. Pratinjau browser saja tidak membuktikan bahwa editor, konverter PDF, atau pipeline produksi mempertahankan tampilannya.

1. Bandingkan warna permukaan dan batas luar pada ukuran akhir. Lihat bagian dalam B, O, dan bukaan lambang yang sempit.
2. Pastikan font yang diharapkan dimuat. Periksa jarak serta bentuk huruf.
3. Periksa tepi halaman. Stroke lebih lebar mungkin membutuhkan lebih banyak ruang dalam viewport atau clip.
4. Buka kembali file penyerahan hasil ekspor. Ekspor dapat mengubah gaya atau konstruksi objek meskipun dokumen kerja terlihat benar.

Jika tujuan mengubah outline, sederhanakan file menjadi satu bentuk berisian dan ber-stroke, lalu bandingkan dengan browser. Ikuti diagnosis stroke SVG yang menghilang ketika masalahnya adalah clipping, penskalaan, atau pewarnaan yang hilang. Untuk konflik aturan warna, panduan pewarnaan ulang SVG membahas tempat fill dan stroke dapat didefinisikan.

Jika tampilan ini tidak dapat dipertahankan saat diserahkan, pertahankan master yang dapat diedit dan siapkan salinan penyerahan terpisah dengan tampilan yang diperlukan direpresentasikan sebagai bentuk. Verifikasi salinan tersebut secara visual dan geometris; memperluas stroke terpusat saja tidak dengan sendirinya mereproduksi setiap tumpang tindih yang dimaksudkan atau membuat satu kontur luar.

Ketika sumber adalah logo raster

Gunakan lambang vektor asli dan tulisan yang masih dapat diedit ketika Anda memilikinya. Tidak ada manfaat mengambil tangkapan layar teks yang berfungsi dan menelusurinya hanya untuk menambahkan outline.

Jika PNG atau JPG adalah satu-satunya lambang yang tersisa, alur kerja vektorisasi logo PerfectVector dapat membantu menyiapkan kandidat SVG di tahap awal. Periksa siluet hasil konversi dan bukaan kecil sebelum menerapkan gaya ini. Konversi tidak menetapkan urutan pewarnaan, mengidentifikasi font asli Anda, atau menentukan bentuk mana yang harus berbagi outline.

Ketika tulisan dapat dibuat ulang dengan font yang benar, pertahankan sebagai objek teks terpisah selama mendesain. Panduan vektorisasi logo yang lebih luas menjelaskan cara memilih antara memulihkan artwork raster dan menggunakan master vektor yang sudah ada.

FAQ

Apa urutan pewarnaan SVG default? Defaultnya adalah fill, lalu stroke, lalu marker. Nilai normal meminta urutan tersebut.

Apakah paint-order="stroke" berbeda dari "stroke fill"? Keduanya menghasilkan urutan yang sama di sini: stroke, fill, lalu marker. Operasi yang tidak dicantumkan mengikuti operasi yang dicantumkan dalam urutan relatif normalnya.

Apakah paint-order membuat stroke luar? Properti ini tidak memindahkan atau meng-offset stroke. Isian opak menyembunyikan bagian stroke terpusat yang mengarah ke dalam. Stroke yang tersisa masih dapat memenuhi lubang dan celah.

Mengapa outline SVG saya masih terlihat terlalu berat? Stroke mungkin terlalu lebar untuk ukuran tampilan, isian mungkin transparan, atau aturan CSS lain mungkin mengesampingkan urutan pewarnaan. Periksa kondisi tersebut dan lihat bukaan kecil pada ukuran akhir.

Sources

1. W3C — Pewarnaan SVG 2 — Mendefinisikan urutan pewarnaan dan hubungan antara isian dan stroke.
2. MDN — Atribut paint-order SVG — Mendokumentasikan urutan kata kunci, jenis elemen yang didukung, dan prioritas CSS atas atribut presentasi.
3. MDN — Properti paint-order CSS — Menjelaskan pewarisan dan urutan kata kunci yang disingkat.

Hanya memiliki lambang raster? Siapkan SVG logo yang dapat diedit, periksa bukaannya, dan uji outline pada ukuran yang dimaksudkan sebelum membuat salinan penyerahan.