Implementasi gradien SVG

Apakah mungkin membuat ulang semacam ini gradien kabur dalam SVG?

svg gradient Jared Garcia
sumber

Jawaban:

Iya dan tidak.

Dimungkinkan untuk membuat mesh gradien di Inkscape, dan menyimpannya sebagai SVG. Namun standar SVG yang digunakan di browser belum mendukung gradien mesh. Ini mungkin berubah di masa depan, tetapi untuk saat ini tidak.

Metode lain yang bekerja di browser, adalah menambahkan beberapa benda padat, memburamkannya, dan menempatkannya di topeng kliping. Ini masih merupakan solusi vektor murni, tidak dirasterisasi.

Berikut adalah SVG untuk versi yang berfungsi di browser, jika Anda menginginkannya.

Sunting : tautan di atas ke SVG tidak lagi tersedia, jadi saya telah menghapusnya.

Billy Kerr
sumber

Itu keren! SVG dalam tautan tidak terlihat seperti sisipan yang disediakan dalam jawaban Anda ... namun terlihat jauh lebih ringan. Ada alasan untuk ini?

Jared Garcia

@ JaredGarcia Saya tidak tahu mengapa - tangkapan layar saya cocok dengan SVG persis di komputer saya di Inkscape - tetapi pastikan Anda menggunakan versi Inkscape terbaru - sekarang di versi 0.92

Billy Kerr

Ah, saya melihatnya di browser di ponsel saya langsung dari tautan unduhan itu. Saya akan membukanya di Inkscape dan memeriksanya.

Jared Garcia

@JaredGarcia memposting itu sebagai pertanyaan baru sehingga dapat dijawab dengan benar.

Andrew T.

Memburamkan browser sangat mahal. Anda bisa mendapatkan efek yang sama dengan melapisi gradien latar belakang. Ini bahkan animatable. Dan Anda dapat menggunakan mode campuran latar belakang untuk efek ekstra di browser modern.

PieBie

Dapat dibuat dalam Illustrator dan Inkscape sebagai Gradient mesh. Ketika disimpan sebagai SVG di legacy Illustrator, itu diubah menjadi gambar bitmap. Jelas Illustator mengetahuinya sekitar 6 tahun yang lalu, tetapi bahasa SVG tidak.

Ketika disimpan di Inkscape sebagai SVG biasa, bukan sebagai Inkscape SVG, itu tetap sebagai gradien mesh dan membuka file SVG dengan editor teks mengungkapkan ada perintah meshgradient. Lihat cuplikan kode

Jadi, tanpa mengetahui standarnya, saya dapat mengatakan "Ini setidaknya diimplementasikan dalam SVG Inkscape."

Semoga seseorang yang sadar pengembangan status SVG programmer memberitahukan sesuatu yang tepat.

pengguna287001
sumber

Anda dapat langsung memasukkan kode di sini dengan pemformatan kode yang tepat. Tidak perlu memposting tangkapan layar.

Wrzlprmft

Sayangnya, jala gradien Inkscape belum didukung di Google Chrome, atau Firefox.

Billy Kerr

Bisakah Anda memposting kode svg

Jared Garcia

@ JaredGarcia, saya belum. Saya mengisi hanya 10 node dari 25 untuk melihat bahwa itu memberikan tampilan yang tepat. Anda bisa membuatnya sendiri. Impor gambar ke Inkscape, buat kuadrat dengan ukuran yang sama, atur tipe isinya = gradien mesh, tambahkan 3 baris dan kolom lebih banyak dengan alat mesh, dengan alat simpul pilih satu per satu node dan dengan color picker ambil warna dari gambar yang diimpor. Simpan sebagai SVG biasa, buka di Win Notepad untuk melihat kode.

user287001

Jika tujuan Anda adalah memiliki gradien mesh yang ringan dan dapat diukur, maka Anda dapat mencoba metode ini:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

Ini bukan vektor tetapi mungkin juga karena ukuran file super kecil dan skala gambar tanpa batas.

peterhry
sumber

Selamat datang di GDSE - glaf untuk memiliki Anda di sini! Silakan melihat-lihat tur dan dapatkan gambaran bagaimana kami ingin bertanya. Bagaimana cara bertanya dan menjawab bagaimana menjawab pertanyaan. Mungkin juga merupakan ide yang baik untuk melihat keseluruhan kode perilaku sementara Anda mencari pusat bantuan . Jawaban Anda adalah jawaban yang baik dalam hal penerapan apa yang telah Anda bagikan, tetapi di sini di GDSE kami lebih suka menggunakan tautan untuk referensi saja atau untuk mengikat sumber daya, karena tautan berubah atau hilang dengan mudah: bisakah Anda meringkas konten yang Anda ikat dalam isi jawaban Anda?

GerardFalla