Ngobrolin SVG
Ringkasan Episode
Bantu KoreksiSVG dibahas sebagai format gambar yang berbeda jenisnya dari JPEG atau PNG: ia bukan kumpulan titik warna melainkan rangkaian bentuk yang dihitung ulang, sehingga tetap tajam berapa pun ukurannya. Karena isinya sebenarnya teks berformat XML, ia bisa ditulis dan disunting seperti dokumen biasa, diberi atribut, ditata dengan CSS, bahkan dianimasikan. Bentuk dasarnya hanya segelintir — lingkaran, elips, garis, path, poligon, dan persegi — tapi dari situ hampir semua ilustrasi bisa dibangun, dan editor seperti Figma mengekspornya langsung. Wilayah pemakaiannya jelas: ikon, logo, dan ilustrasi bergaya gambar, bukan foto. Keuntungannya berlipat untuk performa: ukurannya kecil karena bisa dimampatkan seperti teks, dan ia bisa di-inline langsung ke dalam halaman sehingga muncul begitu markup-nya dibaca, tanpa permintaan tambahan ke server. Untuk logo di bagian paling atas halaman, itu bedanya terasa. Di React pun ia bisa ditempel sebagai elemen JSX biasa, asal atributnya disesuaikan. Cerita yang paling mengena adalah Font Awesome, pustaka ikon yang dulunya berupa web font. Pendekatan itu ditinggalkan karena memuat ribuan ikon demi memakai dua di antaranya jelas boros, dan karena font memang dibuat untuk teks — ketika lambat dimuat, yang muncul justru huruf-huruf aneh alih-alih ikonnya. Ditutup dengan dua contoh ekstrem: dynamic favicon yang berubah warna mengikuti dark mode atau light mode cukup dengan aturan CSS di dalam berkasnya, dan sebuah charting library yang seluruh grafiknya dirakit dari SVG tanpa JavaScript sama sekali.
Poin-poin Utama
- •SVG bukan kumpulan titik warna seperti JPEG atau PNG melainkan bentuk yang dihitung ulang, jadi tetap tajam berapa pun ukurannya — dan isinya teks XML yang bisa disunting seperti dokumen
- •Bentuk dasarnya hanya segelintir — lingkaran, elips, garis, path, poligon, persegi — dan dari situ hampir semua ilustrasi bisa dibangun, termasuk hasil ekspor Figma
- •Karena berupa teks, ia bisa di-inline langsung ke dalam halaman sehingga muncul begitu markup dibaca, tanpa permintaan tambahan ke server — penting untuk logo di bagian paling atas
- •Di React, SVG bisa ditempel sebagai elemen JSX biasa asalkan atribut-atributnya disesuaikan
- •Font Awesome ditinggalkan sebagai web font karena memuat ribuan ikon demi memakai dua di antaranya jelas boros, dan karena font memang dibuat untuk teks
- •Kelemahan ikon berbasis font terlihat saat lambat dimuat: yang muncul justru huruf-huruf aneh alih-alih ikonnya
- •Contoh ekstremnya dynamic favicon yang mengikuti dark mode lewat CSS di dalam berkasnya, dan charting library yang seluruh grafiknya dirakit dari SVG tanpa JavaScript
Hai hai hai selamat malam.
Halo, halo.
Selamat berjumpa lagi bersama kita bertiga Trio Webweb.
Selamat Hari Selasa.
Selamat Hari Selasa.
Tentu saja Hari Selasa adalah waktunya untuk ngobrolin web.
Ngobrolin web.
Iya.
Oke.
Seperti biasa ya temen-temen kalau ada yang sudah hadir boleh komen-komen, aksen-aksen dulu.
Kita sambil ngobrol-ngobrol santai dulu sambil menunggu temen-temen yang lain ngecek-ngecek sound juga.
Gimana suara kita atau visual kita.
Kalau ada yang aneh-aneh tolong dikabarin.
Iya.
Ada penumpakan aneh.
Iya. Ini ada, apa, UTF-8 yang tidak muncul.
N-Ping Weeping.
N-Ping Weeping itu gimana ini?
Hai gitu ya.
Icon customnya.
Ada masih apa lagi ini?
Alfavan, namanya lucu sekali.
Ada Famozi.
Nah ini baru, halo-halo.
Gimana kabarnya semuanya, mudah-mudahan dalam kalian sehat ya.
Malam hari ini kita akan membahas tentang salah satu format gambar yang jarang diomongin ya.
Kita pernah bahas image, tetapi kita belum pernah bahas.
Kan image secara umum, belum pernah, khusus-khusus S.W.G.
Iya, kalau image itu biasanya kan dikenal ada dua ya, ada yang tipenya vector, ada yang tipenya, satu lagi apa?
Raster.
Lihat transkrip lengkap (1936 segmen lagi)
Raster, nah kalau raster itu biasanya digunakan untuk foto yang real ya.
Kayak dari hasil dari kamera, foto profile gitu kan.
Tapi kalau yang vector itu biasanya gambarnya itu bisa di, apa ya, gambarnya bisa di gambar.
Berdasarkan koordinat.
Berdasarkan koordinat, berdasarkan matematis ya.
Itu semua sebenarnya gampangnya kan perhitungan.
Itu ada kode koordinat.
Jadi scaleable, makanya nanti kita lebih bahas lebih jauh soal scaleable-nya itu kayak gimana.
Betul.
Salah satu perbedaan utamanya adalah kalau yang raster itu kalau di zoom meskipun, ya walaupun ukurannya besar,
di zoom sampai maksimal dia akan ada kotak-kotak pixel gitu kan.
Kalau di zoom melewati lebih besar dari ukuran aslinya.
Betul. Kalau vector biasanya enggak, karena dia pakai perhitungan kan.
Misalkan kita bikin kotak atau bikin lingkaran gitu kan.
Begitu di zoom dia kualitasnya tetap bisa sama karena dia menghitung ulang gitu.
Jadi kayak apa ya, kayak ada rumus matematikanya lah gitu ya.
Dan menariknya kita, ya kayak function.
Dan menariknya kita bisa nguding, bisa kayak tulisan dokumen HTML gitu ya.
Ya itu memang memang sebetulnya.
Jadi bisa dikasih atribut, bisa di-animate, bisa dimanipulasi dengan CSS.
Ya banyak. Nanti kita lihat.
Betul sekali.
Ini langsung ada pertanyaan. Apakah 5-10 tahun depan?
Ini adalah topik yang akan kita bahas di beberapa.
Mudah-mudahan minggu depannya.
Ini lebih baik kita bahas nanti setelah kita balik dari I/O aja.
Oh gitu ya, kenapa?
Karena ada AI-AI.
Soal AI dulu.
Diserap dulu ya, diserap dulu ilmunya ya.
Jadi bisa bawa ilmu baru gitu.
Oke, siap-siap.
Tapi kita tadi baru bahas ini juga.
Apakah nanti semua webteam banyak yang dipecat, diganti, kita co-pilot atau berat,
atau semacamnya, large language model.
Ya, stay tuned.
Jauhnya iya dan tidak.
Mungkin.
Siapa tahu kita bisa ganti profesi ya, jadi ternak lele.
Oke.
Nah, kita akan bahas malam ini tentang SPG.
SPG adalah salah satu forma.
Scalable Factor Graphic.
Ini sudah cukup lama sebenarnya.
Kalau teman-teman mengikuti, sebenarnya formatnya sudah sangat lama.
Disini kita akan lihat ya.
Mimnya itu SPG plus XML ya?
Mimnya?
Oh, mime type apa?
Oh, mime type.
Mime type-nya SPG plus XML.
Ya, SPG plus XML.
Oh, iya, iya.
Itu punya file type sendiri ya?
Oh iya, jadi itu...
- XML language.
Nah, 99.
Siapa yang sudah lahir di tahun 99?
Selain saya.
Selain saya dan Ivan.
Kita bertiga dulu lahir.
Nah, yang menonton ini pada dulu.
Oke.
Nah, jadi ini introduction untuk intro ke SPG.
Ini sebenarnya ada lengkap di MDN.
Tapi entah kenapa.
Ya, seperti biasa.
Agak kurang user friendly mungkin ya.
Menurut pendapat ke pribadi, kalau artikel di MDN itu bagus.
Lengkap.
Sangat teknis mungkin ya.
Bagus kalau kita sudah paham, kita sudah tahu.
Formal.
Tapi kalau misalnya kita masih 0 banget gitu.
Lihat tuh kayak ngantuk doang.
Terus suka nggak paham gitu.
Ya nggak tahu, mungkin aku aja yang RAM-nya kurang.
RAM-nya kurang.
Kadang, apa ya?
Ada yang visual learner.
Ada yang text learner.
Ada yang animation learner juga kan.
Itu pengisian ya.
Animation learner.
Cuma punya introduction-nya semua lengkap di MDN.
Tapi ada alternatifnya nih.
Saya saranin kalau pengen lihat tentang...
Pengen belajar dari awal tentang SVG,
coba buka yang O'Reilly.
O'Reilly.
Itu satu buku sendiri Tuntut.
SVG.
Enggak, justru lebih simple sih.
Satu halaman.
Ini ya, OEB yang tadi sudah dibuka nih.
Nah, ini.
Nah, ini nih.
Kayak lebih simple aja udah atributnya.
Yang umum digunakan, apa saja.
Terus...
Berarti ada skema aja ya.
Ini skema kan ya.
Itu kan spesifikasi semua sih.
Berarti ada spek dan skema-nya dong ya.
Enggak.
Ini, disini udah disebutkan ada
7 shape element in SVG.
Ada circle,
ellipse. Ellipse itu apa ya?
Lonjong gitu ya.
Telur.
Ada garis. Path itu juga sebenarnya garis ya.
Tapi beda. Path itu...
Bisa lebih dari satu titik.
Garis itu satu gitu.
Kalau path itu bisa melengkung.
Oh, kalau lain berarti
hanya ada X1, Y1, dan
X2, Y2.
Kalau path itu bisa lebih dari itu ya.
Dan kalau polygon,
itu nyambung.
Nyambung balik ya. Path tapi
jadi nyatu ya.
Bisa diisi.
Biasanya kalau kita
pakai software
untuk bikin beri gambar,
grafik kayak Figma
atau Photoshop atau AI,
Adobe Illustrator,
itu kita pakai pensil gitu ya.
Nyambung-nyambung sampai
balik lagi ke
posisi start-nya.
Itu udah bisa diisi,
bisa difill, bisa diisi warna.
Kalau nggak nyambung nggak bisa diisi warna kan.
Dalemannya.
Terus ada
polyline. Polyline ini apa ya?
Ah, belum pernah pakai.
Polyline.
Kita cari aja disini.
Nah, ini.
Arbitrary straight line
shape without closing final
stroke. Oh, ini nggak tutup.
Jadi kayak path juga dong dia.
Path juga nggak tutup kan.
Terus apa path? Coba baca dulu path.
Oh iya.
Itu kayaknya bentuknya nggak kaku
gitu ya. Apa sih?
Dari titik A ke titik B.
Tadi yang polyline, dia dibawa
polyline ya tadi.
Oh ini. Arbitrary shape
built from line and
curve segments. Oh bisa
lengkung ya, lengkung.
Eh, berarti
dia nyambung nggak? Dia balik ke awal nggak?
Nggak. Kalau path bebas.
Bebas. Oh, berarti?
Dia garis doang. Bisa
bisa melengkung
dan bisa diisi. Bisa lurus.
Kan ada D. D itu apa sih?
Kan aku nggak salah,
path itu temennya ada D.
Nah D itu buat
itunya ya? Apa?
Direction or data.
Direction. Oh. Direction
or data itu juga nggak jelas ya.
Apaan itu? Data.
Everything is data.
Dan terakhir ada rectangle.
Itu rectangle ya.
Itu kotak.
Kotak mau kotaknya
trapezium, jajaran jenjang.
Itu juga
termasuk kotak ya. Jadi ada
4 koordinat di sana.
Trapezium itu kayak apa sih? Trapezium yang begini.
Jajaran jenjang? Atas, yang atas
lebih sempit.
Jajaran jenjang
oleng ya, miring. Miring.
Itu pelajaran
SD ya.
Tuh, makanya penting matematika kan, meskipun
menjadi program.
Apa? Matematika SD ya? Cukup ya?
Jadi programnya cukup matematika SD.
Oh, SMP.
Ini topik yang lainnya.
Sinus-kosinus di mana tuh?
Waduh.
Tergantung. Tergantung tahunnya.
SMP kayaknya ya.
Jaman saya muda dulu.
Wiss. Jaman saya muda.
Nah ini
seru ya. Kita share
kali ya.
Lanjut, lanjut, lanjut.
Kita bahas sama lagi.
Nah, mungkin kita bisa bahas
dari ini ya,
kegunaannya. Kan tadi kita udah sebutkan
kalau yang tipe rastar itu
biasa untuk foto, untuk
ilustrasi yang ya pokoknya
gambar nyata lah real gitu ya, mendekati
nyata. Kalau SPG
kan lebih ke
ilustrasi ya kali ya. Ilustrasi
kayak gambar kartun, ikon,
ya kan?
bentuk-bentuk. Ya, bentuk-bentuk
dan hamburger itu.
Kayak hamburger menu atau
jempol. Ya.
Kelebihannya juga dia bisa lebih kecil karena
itu kode kan.
Tulis apa? Text kan.
Jadi bisa di kompres
dan jadi lebih kecil gitu.
Dibandingkan kalau rastar.
Terutamanya banyak
kegunaan. Kalau khusus untuk web dan
performance ya. Karena dilihat dari sisi performance.
Contoh aja
kalau logo ya.
Logo itu jaman dulu itu
bentuknya bisa
kalau rata-rata ya
dia transparan pasti pada pakenya dulu
PNG. PNG.
Atau JPEG kalau gak transparan.
Atau warna logo dan belakangnya
sama-sama putih. Atau sama-sama hitam.
Ya. Betul.
Itu aneh.
Nggak, jaman dulu kan belum ada
transparan sih. Dan itu mahal.
PNG itu kan mahal.
Mahal-mahal.
Terus itu
kegunaannya. Lalu bisa
untuk icon-icon jaman
kemudian web itu kan
banyak menggunakan icon-icon. Ingat dulu
saya tuh
supaya image itu
bisa dibikin supaya
kecil. Jangan dikirim satu-satu.
Belum ada TTP2 ya. Jadi
masih dikirim sebagai satu image.
Jadi sprite namanya.
Sprite.
Image-nya besar.
Terus isinya kecil-kecil. Dipotong-potong.
Nanti kita setel sendiri
pakai CSS.
Kemudian lahir
image tapi
dibuat jadi font.
Ya. Web font.
Font Awesome. Font Awesome tuh paling
terkenal. Paling awesome.
Nah.
Pengembangannya untuk
performance itu rata-rata
diajurkan supaya
untuk
image yang penting
atau highest-highest priority.
Contohnya kalau website-nya
kita nge-load dan itu
di atas above the fold.
Contohnya logo deh. Karena logo itu
supaya secepat mungkin bisa muncul.
Jadi kalau misalnya website-nya nge-like, tahu itu
website-nya benar gitu ya.
Itu logonya diubah jadi
SVG. SVG.
Apalagi biasanya logo
kan relatif simple ya. Logo type
atau bentuknya ya
apalah. Simple lah.
Masih bisa dijadiin. Selama
logonya nggak ber...
ukuran
logonya gede tuh semuanya
semua. Selama logonya bukan
muka orang, foto muka orang.
Iya. Jangan terlalu banyak
garis ini.
Lengkung-lengkungan atau gimana gitu
terlalu rame. Bisa dibikin
jadi SVG lebih-lebih
lebih kecil.
Lebih cepat. Bahkan karena ada SVG
nggak perlu di-load sebagai file.
Tapi dibuat jadi. Bisa di-inline nih.
Langsung di-set inline.
Jadi bisa munculnya
tercepat. Jadi begitu HTML-nya
nge-load, dia langsung di-parsing, langsung muncul.
Jadi nggak perlu di-request.
Another example itu
Fevicon. Fevicon.
Jaman dulu.
Fevicon itu bisa SVG ya?
Bisa SVG sekarang ya. Buka link saya.
Siap-siap-siap.
Terakhir Fevicon Dynamic
Fevicon.
Dengan SVG.
Maksudnya gimana.
Jadi
di dunia sekarang kan sudah
ada dark mode
bright
light mode.
Jadi yang bawa siapa sih ini?
Si Apple kayaknya. Dark mode, light mode itu ya.
Menyusuaikan kondisi.
Bahkan juga
di handphone juga bisa dark mode.
Right mode tergantung jam
tayang atau jam buka.
Mas Nisa sudah...
- Loh, mati.
- Loh, ilat.
- Dia mati. - Clip hangar banget
lagi di tengah-tengah.
- Udah apa ya kira-kira?
- Udah buka
layarnya. Tapi dia nggak bisa
lihat. Mungkin mati lampu.
- Oh.
- Iya.
- Jadi intinya, nggak tahu nih bener apa nggak ya.
Kita coba nyamung-nyamungin aja ya.
Jadi intinya ya iconnya itu
bisa berubah sesuai dengan keadaan.
Yang tadi light mode, dark mode, atau lagi
apa? Lagi load atau lagi
loading atau lagi apa?
Ini sudah selesai
koneksi putus ya.
Lanjut, lanjut, lanjut.
- Gimana tadi mau tanya apa?
- Jadi kan lihat ya, SVG
Fevicon-nya kan bisa sesuaikan dengan
sesuai dengan
dark mode atau light mode.
Kenapa bisa seperti itu? Karena
di SVG kan dia formanya XML
dan bisa di-styling.
- Bisa di-styling pakai CSS.
- Pakai CSS. Jadi
di dalam
file SVG-nya
langsung. Bisa di-scroll langsung
kebawah, di-scroll kebawah.
- Ini doang?
- Iya, klik kanan.
View source bisa nggak?
- Ini dia, path kan?
- Iya, itu di-style.
Coba buka style tag-nya.
- Nah ini.
- Jadi dia bisa target
ID dari path.
Terus kemudian bisa dibuat
preference color scheme. Jadi kalau
color scheme-nya dark, stroke-stroke
nya itu bisa dikasih
ubah warna.
- Itu query, apa?
Query CSS biasa ya. Jadi bukan
teknologi atau library.
- Jadi ganti warna, jadi neon, kan?
- Warna apa dulu yang aneh itu?
Yang ada nama orang itu?
- Rebecca Purple.
- Oh, kan berubah kan matanya?
Langsung.
Bisa inline.
Jadi bisa dibuat berkedip-kedip gitu ya?
Popicon-nya.
- Kalau bisa animation, mungkin bisa kali ya?
- Bisa kali ya.
- Ada contoh bagus nih animation, coba
di-chat ya.
Kan kita bayangin SVG itu selalu
shape ya tadi ketujuh shape yang kita lihat.
Tapi kan sebetulnya
itu didalam
bisa pakai text element juga.
Penjelasannya ada tuh tadi di
article O'Reilly. Coba buka demo-nya aja
langsung.
Bisa di-animate.
- Wow.
- Circle text-nya.
- Jadi berasa kayak
ini ya, kayak Flash gitu ya.
- Kayak Flash.
- Itu loading dulu dia.
Wow.
Lucu ya.
- Itu ringan.
Karena ya itu kan element
biasa. Jadi
kalau dibandingin apa ya?
Bikin GIF atau video animation.
Ya sebenarnya bisa kan pakai video atau pakai apalah.
Cuma kan bakal lebih berat.
- Ya.
- Nah.
Jadi untuk finalize tadi,
SVG,
ini-nya XML,
dan bisa di-styling.
Jadi kita bisa menyesuaikan.
- Bisa ditarget dengan CSS.
- Jadi dari sisi web performance,
tadinya kita
kalau misalnya profile SVG,
kan pernah tuh ya SVG 48.48
file-nya ini.
128.128 file-nya ini.
- Iya.
Betul.
- Kalau dengan
progressive dynamic SVG
seperti ini, nggak butuh.
- Vector.
Dan sudah menyesuaikan sama.
- Bisa gede, bisa kecil, sesuai sama ukuran yang di-request ya.
- Bisa detect OS juga kan.
- Betul, betul.
- Color mode dari si OS-nya.
Jadi bisa lebih dynamic lagi.
Itu.
Keuntungan menggunakan SVG.
Untuk vertical.
Bisa untuk, hal yang sama juga
bisa diaplikasikan ke
SVG yang lainnya,
termasuk logo.
- Termasuk logo.
Oh iya, benar. Logo-nya
kalau misalkan kita light mode,
mungkin logo-nya
atau dark mode, nggak cocok itu dengan
warna logo yang
biasa, ya harus
di-invert. - Bisesuaikan.
- Bisesuaikan.
- Jadi nggak perlu 2 file kan.
Cukup 1 file.
Atau nggak perlu file.
Jadi inline semua.
- Dan lanjutannya, ada yang
lebih ekstrim, kita bisa
ini, bikin
apa namanya, chart.
Charting library. Ini
buatannya Pak Aris-Aris.
Dia bisa bikin
charting library tanpa JavaScript.
Pakai. - Orang gila ya.
- Orang gila.
Ini di New York Times article dia bikin.
- Oh, sebelum
beliau pindah ke virtual ya.
- Jadi, bentuknya kayak gini nih.
Nah ini adalah SVG semua.
Digambar dengan SVG.
Sekarang programatik.
Namanya Pancake.
- Nah poliline tuh tadi.
- D3.
- D3.
- D3 kan bisa di-export jadi SVG.
- Benar, benar. Bisa, bisa.
- Ini sudah selesai di-render.
Dia di-export jadi SVG hasilnya.
- Outputnya SSPG bisa.
Betul.
Dan kita bisa juga main-mainin
pakai library yang
D3 tadi untuk membuat
misalkan circle atau rectangle.
Itu menggunakan SVG juga bisa.
Karena ya semuanya sama kan.
Apa namanya?
- Tempat matematika. Vector.
- Maksudnya, tektek XML
atau HTML kan mirip kan. Jadi bisa pakai
div. Divnya bisa diganti circle gitu kan.
Ini mana dia?
Apa namanya? Nah ini dia.
Pancake namanya. Pancake chart.
source.sh.
Wah dia belum diversal nih. Masih pakai surga.
Open PR, open PR.
- Pasti open deh.
Udah nggak diurus lagi.
- Udah nggak diurus lagi. Ini
kita lihat aja ya. Kita lihat isinya
seperti apa. Wah nggak kelihatan.
Nah itu. Pet-pet aja nih isinya.
SVG aja udah.
- Dan ini auto-generate ya.
Jadi dia sudah bikin
bookie. Apa namanya? Functionnya.
- Algorithmenya dia bikin.
- Itu dia nulis sendiri gitu ya. Dia cuma tulis.
- Iya.
- Tulis patternnya ceritanya.
- Betul. Ini juga SPG.
- Cuma kan itu ada perhitungan ya kan.
Misalnya under the hood dia sebetulnya
ngitung algoritma-nya kalau pengen bikin bentuk
misalnya apa, surfing dari angka
10 ke angka 21.
Itu mustahilnya titik-titiknya
apa aja berarti dia kan udah bikin
abstraksinya ya.
- Dia bikin functionnya.
Dia mau buka. Dia supaya bisa melengkung ya
harus pakai function kan.
- Betul.
- Function ini maksudnya x^2 + y^2
sama dengan x^2.
Kayak gitulah contohnya maksudnya.
- Iya.
Ini adalah salah satu contoh yang lebih
ekstrim lagi kan. Kalau tadi cuma icon tapi
ini sekarang udah bisa jadi charting
library yang
jenisnya banyak, datanya
banyak, dan tetap bisa
performanya juga bagus gitu kan.
Tadi sempat
dibahas juga sama Ivan tentang
Webphone.
Fun Awesome. Fun Awesome ini awalnya
kan adalah Webphone. Sekarang dia sudah
berganti jadi SPG kan.
- Iya.
- Karena udah nggak recommended ya.
- Coba. - Udah nggak recommended.
- Ada nggak ya versi 2 atau versi 1-nya?
- Udah nggak ada. Palfersen coba.
- Webex Time Machine gitu.
- Oh. Ini ada, masih ada.
- Itu ada.
- Itu masih ini loh.
- Download.
- 2001 tuh. Masih icon.
- Iya. Coba ya.
Free icon.
- Tapi itu masih berupa phone file kan ya
dulu. - Iya.
Dua belas tahun yang lalu. Sebelas tahun yang lalu.
Ada yang lahir belum?
- Masa sebelas tahun.
- Udah lah.
- Di antara kita maksudnya.
- Anaknya udah lahir.
- Umur sebelas.
- Umur sebelas.
Iya. Ini
dia mulai convert ke
SPG. Kapan ya?
Font Assam versi berapa ya?
- 5 kali ya.
- 5 ya.
- Oh ya. SPG support.
- SPG support.
- 7800 icon.
- Jadi karena bentuk
shape itu di ekspresikan dengan
kita sebaiknya pakai SPG.
Jangan pakai phone file ya.
- Kenapa?
- Phone file buat text.
- Oh itu ya.
Accessibility.
- Ya. Performance ya. Yang jelas ya.
Oh bukan. Paling utama
sih performance.
- Butuhnya cuma 2 icon. Downloadnya
2000 icon.
- Performance tapi betul juga. Accessibility juga.
Kan suka ada tuh kalau loading-nya lambat.
Malah
FA, FA-
FA-hamburger
lah. Itu kan.
Iya.
- Tadi itu yang tadi
di komen yang pink
waving. Nggak ada.
- Nggak muncul ya.
Iya iya iya.
Terus sekarang
ada
trend-nya malah
sekarang ke emoji ya.
Banyakan udah nggak pakai.
Jarang. Maksudnya ada beberapa website
yang malah menggunakan emoji sebagai
ilustrasi.
- Udah standard ya?
- Udah standard ya?
- Udah standard. Tapi kan
sebenarnya ada masalahnya juga.
Karena antar OS kan
- Berbeda?
Atau tidak? Belum ada?
- Versi-versinya. Nah
buat besok-besok lah kita kayaknya
ngobrolin Unicode atau ngobrolin
emoji.
- Siap, siap, siap. Nah ini
beberapa contoh ya. Penggunaannya tadi ada icon.
Ini juga ada buat
menggantikan. Apa? Favicon
ada buat icon buat
navigasi web dan lain-lain.
- Favicon, icon biasa.
- Bahkan ada sampai
charting library.
- Charting sama tadi art
atau animation lah.
- Iya betul-betul. Animation
juga lumayan ya sekarang.
Banyak juga yang ada
library-nya untuk SVG ya.
- SVG di-animate gimana sih caranya?
- Gitu atau gimana?
- Ini pakai transform bisa.
- Pakai transform ya?
- Ternyata transform deh CSS itu.
- Iya mana? Oh yang tadi ya?
Circular ini ya?
- Iya.
- Kayaknya ada contoh kode-nya.
- Pakai JavaScript apa?
Kalau D3 kan ada ya?
- Iya.
- Gak kelihatan. Itu scriptnya.
Gak kelihatan. - Iya, gak kelihatan.
- Ya, gitu lah.
Tapi seru ya.
- Oh ini transform.
- Transform ya?
- CSS transform.
- Jadi CSS pun udah
lumayan powerful ya. Sampai animasi segala
udah didukung ya.
- Sebetulnya
transformasi sih.
Bukan animation.
Soalnya kayaknya beda itu ya.
Beda API.
- Animation dia keyframe
ya.
- Oh iya ada satu lagi use case
yang biasanya juga
cukup sering saya gunakan ini.
Dari NyanJS.
Biasanya kalau dari
file, dari Photoshop
kita mau import gak bisa kan.
Kita export dulu
sebagai SVG, terus kita buka di Figma
atau di software lain.
Itu juga bisa jadi file
perantara.
- Tapi itu kan sebenarnya ala-ala
kan. - Ala-ala doang.
- Dalemnya use kayak reference
ke image rasternya.
Pernah kecewa.
- Pernah kecewa.
- Pernah jadi korban Fox.
- Atau mungkin kalau dari
Photoshop agak-agak berbeda ya. Karena
yang satu raster, yang satu vector. Mungkin dari
Adobe Illustrator, atau dari
Inkscape, ya dari software-software
yang sama-sama vector.
Bisa menggunakan SVG.
Bahkan Inkscape itu default
file-nya itu
dia pakai SVG.
Jadi kalau misalkan kita
kan ini kalau di web kan biasanya
kita programatically kan.
Kita coding atau kita
tulis kodenya kan. Kalau di
Inkscape atau di Figma itu
kita bisa gambarin dengan ada
GUI-nya lah.
Jadi kalau misalkan temen-temen
nanti ada rencana mau bikin
aplikasi gambar, ya bisa
pakai format SVG.
Mungkin kayak
Excalidraw gitu-gitu, mungkin formatnya
SVG kali ya.
- Mungkin ya. Eh, itu canvas sih
tapi. - Canvas ya.
Nah, bedanya canvas sama SVG
beda ya. Yang satu buat
buat apa?
- Gua apa? Mas Riza nih.
- Apa tuh? - Normal kok.
- Oh, Mas Riza ya. Oh, gua buat nih.
Di tempatnya. - Kenapa?
- Macet-macet antara Mas Riza sama
Eka, Gobbini. Kayaknya.
Kita malah Ivan yang macet.
- Iya, maksudnya, koneksi gua lagi
ini, kayaknya lagi nge-switch itu tuh.
- Oh, pindah, ini
pindah koneksi.
Oke.
Nah, kita bahas
ini aja kali ya. Apa?
Bagaimana penggunaan
SVG di React.
Ini dia.
- React Rectangle.
- React Rectangle.
Sebetulnya ya
sama aja kan ya?
- Sama.
- Di framework atau UI
library apapun. Cuma ini mungkin
lebih ke beginner friendly
aja sih buat yang bingung
kenapa SVG itu kan bisa dianggap
bisa di loading sebagai file image
juga. Jadi bisa
dimasukin ke dalam image tag.
Terus dia bisa
di inline seperti biasa.
Tapi kan jangan lupa React
itu kan sebenarnya menyerupai HTML
tapi bukan. Dia kan JSX
kan. Jadi apa? Bisa
di inline, ya sebenarnya
sama kayak elemen
JSX lainnya. Nah,
jangan lupa kayak atribut-atributnya
juga harus disesuaikan
sama JSX. Jadi nggak boleh
ada dash-nya atau
apapun yang aslinya, atributnya
ada dash-nya, xlink drive
atau apapun harus di-convert
jadi camel case ya.
Terus bisa
dijadikan komponen juga. Coba
scroll ke bawah ya.
Scroll ke bawah, zoom in
dikit biar besar. Nah,
atas dikit.
Nah, itu yang pertama sebenarnya
kita bisa pakai
kayak image biasa.
Tapi ya sebenarnya kurang recommended
ya karena semua keuntungan
yang kita bahas tadi kan jadi nggak
berlaku.
Tapi ya bisa. Maksudnya
kalau bisa atau nggak bisa-bisa aja.
Oke.
Nah,
terus bisa di
import.
Iya, apa React kalau pakai
CRA kan begini ya?
Logo SVG ya. Ini demo-nya ya.
Logo
React di demo kan ini kan.
Iya, yang muter-muter itu.
Apa?
Nyemput itu langsung kebayang gitu.
Langsung ada mental image-nya.
Ya, itulah.
Nah, terus ada
ini library yang
teken banget sih ya, SVGR
mengkonversi
SVG biasa
jadi React Komponen.
Jadi ya bisa dipakai
sebagai komponen
biasa, komponen React biasa.
Oh, jadi panggil komponen
gini, nanti dia akan expand seperti ini.
Dia akan meng-inline.
Gak, kayaknya jadi SVG.
Oh, nggak ya. SVG ya.
Jadi kayak gini.
Nggak pakai Dangerous
set HTML.
Nggak usah pakai Dangerous list.
Blah-blah-blah.
Nah, terus kalau mau
create komponen manually juga
ya, boleh-boleh aja.
Bisa-bisa aja.
Aman ya.
Tetap, apa, di React
kita bisa langsung tulis kayak gini ya.
Tanpa perlu ada rabli-rabli apa-apa.
Cuma ada beberapa atribut
yang nggak bisa kan.
Maksudnya harus, harus
diubah biar apa?
JSX-friendly.
Kelas jadi kelas name, contohnya.
Yang jelas, kelas jadi kelas name.
Terus, apa, xlink-ref.
Oh.
Berarti...
titik dua
itu harus diubah kayak cuma
sintaksnya doang berubah dikit.
Ya. Dan bisa
ditambahkan logika juga seperti ini kan.
Kalau mau, misalkan lagi aktif
dia warnanya apa, lagi pasif dia warnanya apa.
Pakai JavaScript aja
di sini ya.
Atau misalnya apa?
Icon kayak new email
atau notif atau apalah gitu.
Ada angkanya didalemnya
tergantung misalnya unread items-nya
berapa itu ya bisa diubah juga.
Yang bikin orang FOMO gitu.
Yang Gmail itu kan biasanya ada
itu kan ada, ada
badge-nya kan.
Buat orang OCD kan jadi FOMO gitu.
Harus ngeklik.
Pengen ngeklik jadinya ya.
Bisa bikin distracting juga misalnya di
animate atau di apa, di rotate.
Bisa loncat.
Genggung.
Mencari perhatian itu ya.
Terus apa lagi penggunaannya?
Bisa buat
Sprite. Sprite ini kan
tadi Ivan udah sempet bahas juga ya.
Sprite ini
sebenarnya konsep dari
game kan. Bukan minuman ya.
Sprite.
Jadi kita punya banyak icon.
Habis itu kita
crop. Kita crop
untuk digunakan misalkan icon
yang koordinat 1.1
X-nya 1, Y yang 1.
Atau cell 1 gitu kan.
Cell 2, kolom
2 gitu dan seterusnya.
Ada nggak contohnya di sini?
Gak ada gambarnya ya.
Penjelasan aja ya.
Jadi salah satu kelebihannya
si SPG ini kita bisa melakukan
crop dengan
cara, iya.
Di sini bisa banyak.
Di sini bisa banyak
dan bisa di crop juga dengan
program, dengan kode.
Kalau misalkan kayak
raster PNG gitu
mungkin bisa pakai CSS
sekarang ya untuk kita dapetin
di ujung kiri, ujung kanan, tapi
nggak spesifiknya.
Bisa ya?
Oh iya, yang Sprite itu juga bahkan
nggak SVG ya?
SVG Sprite itu kelebihannya sih
kalau menurutku adalah
kita bisa pakai ID kan.
Jadi nggak perlu
secara manual. Maksudnya
kalau jaman dulu atau buat game atau apapun
PNG atau
JPG kalau mau pun
sebenarnya bisa dibikin jadi Sprite kan.
Cuma kalau SVG kan nggak perlu karena
maksudnya kita nggak perlu
menspesifikasi
koordinatnya satu persatu. Pusing juga
kan misalnya kita punya SVG besar
ikonnya kita ngitung
manual, misalnya kita pengen
pakai ikon
yang, apa?
image yang ada di tengah-tengah.
Kita nggak perlu memikir koordinat
semua tinggal dikasih ID.
Masing-masing isinya dikasih ID
terus kita tinggal pakai
pas kita mengkonsumsi maka
tinggal pakai SVG terus pakai itu.
Itu tuh di contoh kodenya.
Use bla bla bla
/icons.svg
ada itu-nya
ada pound sign-nya
ada hash-nya, nah, terus tinggal
panggil aja ID name-nya.
Oke.
Oh, lucu juga ya.
Menarik-menarik.
Kita nggak perlu mengitung apapun manual.
Iya. Nah,
ini ada pertanyaan bagus.
Jadi lebih bagus pakai elemen apa untuk
embed image SVG?
UMG kah, picture, figure,
atau objek, atau apa?
Langsung aja SVG-nya.
Iya.
Langsung SVG ya. / Memang jelas.
Nggak usah pakai image ya. / Iya.
Kalau image itu malah
jadi nggak dapet keuntungannya
nggak dapet advantage-nya si SVG sih.
Iya, langsung SVG gini aja.
Iya, langsung SVG.
Oh, cuma pernah lihat sih. Kenapa ya
SVG di-wrap pakai objek.
Cuma nggak ingat use case-nya apa.
Nah, kalau picture itu kan
sebetulnya untuk art direction ya.
Biasa dipakai
picture itu kan
di dalamnya ada kayak image
source set, macem-macem, jadi buat
fallback. Mungkin buat fallback kali ya.
Buat fallback. Bisa jadi, bisa jadi.
Kalau ada yang
belum support.
Belum support
apa?
SVG. / Elemen-elemen lainnya.
Tapi
modern browser udah semua kan?
Sudah. / Udah lah.
Itu udah standard kan?
SVG ini nggak ada baseline-nya, belum ada baseline-nya.
Justru ini paling baseline kali.
Yang ini nggak ada ya.
Nggak ada
widget baseline-nya di sini ya.
Kita harus pakai NIU.
Open PR nanti.
Karena dulu semua disambahin.
Kita lihat ya
SVG.
UI semua.
UI pun justru.
Udah justru semua. Jadi nggak usah khawatir kalau
berarti nggak perlu fallback dong.
Tetap ya.
Bukan. Picture itu
isinya banyak ya.
Mungkin misalnya
misalnya atasnya ada image yang
pakai Aviv gitu.
Pakai Aviv atau WebP.
Mungkin fallbacknya SVG
mungkin bisa aja.
Nah ini nih
kalau penjelasan
picture itu
jadi picture itu
berisi satu
atau lebih
image element.
Apapun yang bisa
menampilkan image.
Nah itu tuh
urut dari atas ke bawah
ya standard lah.
Jadi kalau yang di atas support.
Kalau support udah ditabrikan gini.
Kalau nggak dia ke bawah lagi.
Mungkin bisa aja
paling bawah SVG sebagai
fallback yang paling praktis.
Yang paling praktis. Yang paling banyak dibung
di mana-mana.
Tapi kita jangan
perlu mengetahui
kekurangan
dari SVG bahaya ini.
Nah tadi tuh
pas sebelum live katanya
pedang bermata dua kata Ivan.
SVG adalah pedang bermata dua.
Dia support
browser-nya cukup lama.
Sudah bagus, sudah standard, sudah
bisa dipakein
XML, bisa di-sprite,
bisa di-animate, segala macem.
Tetapi SVG itu
bisa punya security vulnerability.
Coba buka link saya The Dangerous of SVG.
Karena
di SVG itu kan XML.
Dia XHTML bisa dirender
oleh si browser.
Di dalam file
SVG.
Di file SVG
juga bisa disusupin
JavaScript.
Bisa di-inject.
Membaca cookies.
Bisa masukin script.
Waduh, kita baru tahu ini.
Ya ampun.
Bisa dimasukin style.
Bisa dimasukin
style. Bisa dimasukin
XHTML ya.
Bisa di-running
oleh si browser. Bisa di-render.
Bisa di-execute.
Bisa dimasukin script.
Makanya sampai sekarang
kalau teman-teman pakai WordPress
untuk upload
image, kalau standard
bukan ditaman plugin ya.
Upload image via media library
yang WordPress, SVG itu
belum bisa.
Perlu diberikan
apa namanya
raw access tertentu.
Dan pakai plugin supaya
tidak membolehkan.
Untuk dalam control
environment aja kalau mau upload
SVG. Jadi kalau mau pakai SVG
atau buat teman-teman
yang pakai
yang ingin mengutamakan SVG
pakai lah SVG yang kalian
tahu source-nya
buat sendiri atau pakai sendiri
hanya pakai untuk yang kalian
load dari internal website sendiri.
Jangan terlalu upload
dari user.
User generated content jangan ya.
User generated content bisa upload SVG
jangan. Jangan.
Jangan juga ngambil
file SVG dari website
orang gitu ya.
Sanitize dulu.
Sanitize dulu.
Dihapus dulu.
Terus jangan simpan
file SVG-nya di folder
yang
bisa di access
dari luar contohnya.
Public maksudnya.
Jadi hati-hati
dengan SVG.
Padang bermata dua.
Padang bermata dua.
Baru sadar ini selama ini
pakai SVG. Ya, cuma emang
apa? Nggak pernah
handle user submitted SVG
sih untungnya.
Caranya gimana ya?
Kalau saya biasanya
kalau ada file SVG yang mau
dimasukin ke web
saya compress dulu pakai
SVG-OMG.
Itu termasuk ada ininya nggak?
Ada, ini dia
masuk ke ini nggak ya? Maksudnya
copy aja tadi ya?
Benar-benar.
Ini
tap paste, markup,
paste.
Oh, alert tuh. Dia baca
jadi text ya.
Ditampilkan?
Ya,
berarti ini
aman ya. Kita download dari sini.
Bukan aman ya.
Download dulu jadinya apa?
Itu ada markupnya. Coba
ditap markup jadi apa tuh?
Oh iya, cek.
Kiri atas.
Itu masih ada.
Tapi di decode.
Aman, aman. Udah di
decode HTML entities.
Ya, nggak bisa jalan ya.
Error ya.
Bukan error, ya itu text.
Dianggap sebagai text.
Ya kan, bisa aja.
Ada use case yang
inosen. Misalnya kita
nama perusahaan atau nama text yang
pengen kita tampilin, ada apa?
Ada itunya, bracketsnya,
kan bisa aja.
Jadi nggak di execute
sebagai JavaScript, ya ditampilin
aja itu.
Jadi kalau misalkan teman-teman punya file SVG
untuk memastikan bahwa tidak
ada hal-hal yang aneh, bisa
pakai, salah satunya bisa pakai tools ini ya.
Selain untuk
compress, tapi juga untuk
keamanan juga.
Jadi SVGU itu
tools library
SVGeo Primersers juga umat ya?
Featuresnya apa sih?
Featuresnya apa lagi?
Mungkin ada remove apa lagi coba?
Ya, bisa remove metadata, remove
command, jadi dia compress.
Oh lagi, clean up,
attribute, style to
attribute, clean up IDs,
remove raster image.
Nah, ini nih
kalau yang apa, dari Figma atau
ember image,
hilang semua itu.
Banyak sekali.
Soalnya kan itu ya, mungkin sejarahnya kan
SVG itu banyak yang
degenerate oleh software ya,
jarang malah yang ditulis
sama programmer,
sama manusia.
Remove script element.
Dah, hilang.
Hilang.
Kalau jadi remove,
hilang.
Kalau nggak di remove, di apa?
Encode ya?
Encode.
Jadi
di render sebagai text biasa.
Jadi, kalau menerima SVG,
dari siapapun,
pakailah dulu ini.
Hapus script.
Ya.
Betul.
Selain jazz entice, juga kan banyak kalau misalnya
download dari
software kan, suka banyak
grouping atau metadata yang
nggak perlu, yang bikin
jadi ini jadi lebih rapih.
Ya.
Ini ada pertanyaan yang cukup panjang.
Sering convert SVG jadi JSX
termasuk logo, cuma bakal ke crowd
Google tidak ya? Penasaran juga
karena si JSX ini tidak diperlukan
sebagai aset disimpan di public folder
atau di host di cloud storage.
Ini patinya hubungannya sama
SEO kan ya?
Ya.
Rata-rata, kalau misalnya
untuk Google image tentunya
saya nggak tahu apakah SVG
jadi
belum pernah that case-nya ya, saya nggak tahu.
Belum pernah research juga.
Apakah misalnya...
Kalau ke crawl sih pasti ke crawl ya.
Pasti.
Apa yang di crawl.
Biasanya...
Ya kan JSX itu di convert jadi HTML biasa.
Jadi dianggap sebagai HTML sih.
Ya maksudnya gini.
Funksinya apa sih
kalau misalnya si Google itu
nge-crawl atau bisa masuk
di hasil pencarian.
Konteksnya apa?
Apakah kita ingin image kita itu
muncul di hasil pencarian Google image.
Image.
Logo.
Kalau logo...
Di sini soalnya dicontohin logo.
Termasuk logo misalkan, contohnya.
Apakah logo kita mau hasilnya muncul
di Google image?
Iya, bisa aja kan.
Kalau misalnya kita...
Yang penting harus ada all attribute.
React logo.
All attribute mungkin.
Jadi harus ada all attribute.
Jadi kalau logonya itu
kalau dirender sebagai SVG mungkin
kayaknya nggak masuk jadi
image.
Tapi tetap di crawl dan bisa dicari
dengan keyword itu kan.
Karena di SVG nggak ada
all attribute.
Ada nggak sih?
Nah ada link-nya tentang accessibility.
Cok nih bridging-nya.
Coba deh.
Mantap. Accessibility yang ini.
Yang smashing
magazine.
Iya, yang teratas dulu.
Attributnya apa?
Popo-nya ada.
Ya, di bawah.
Pattern, image, artwork.
Kalau pakai image.
Ini kan pakai image kan.
Pasti bisa.
Lanjut, lanjut.
Terus pakai image juga.
Masih pakai role image.
Pattern 3, ini pakai area label.
Pattern 4 masih image juga.
Masih image. Nah ini image semua.
SVG ada role.
Oh, ada title.
Oh ternyata pakenya title.
Oh ini buat keterangan ya.
Keterangan dari image-nya.
Kalau misalnya
image ini logo kita
dibikin. Selama masih ada
text itu bisa jadinya.
Masuknya.
Itu dibaca
di crawling sebagai text
biasa. Text yang bagian
dari SVG itu.
Menarik banget.
SVG, role image.
Ada title, terus ada area described.
Soal area ini kita pernah bahas
di episode kapan ya?
Waktu bahas accessibility.
A11I.
A11I.
Oke, berikutnya.
Ini ada, kenapa?
Lanjut, lanjut.
Ada contohnya lagi. Link di bawahnya tuh.
Hmm.
A101.
Hmm,
buat the accessibility ya.
Oke, dan lain-lain itu
nama-nama screen reader yang
populer, yang banyak dipakai.
Nah, jadi
itu ya udah cukup helpful
grafik Hibiscus Blossom
atau image Hibiscus Blossom.
Nah, coba ke bawah lagi.
Ini masih image juga
sama.
Coba inline SVG jadinya apa?
Nah, inline SVG.
Will not request
recognizes.
Nah, tuh, ada
recognize ya. Tidak di recognize ya.
Oh, karena bukan ada title-nya kan.
Oh, berarti
ini ya.
Atribut yang penting ya.
Described by.
Ini contoh.
Nah, SVG.
Ada title, ada described
by-nya mana?
Di atas.
Oh, ini ini.
Ya, maksudnya
area described by itu, habis itu
itu adalah element ID, my title.
Terus, dia akan
ke my title itu kan.
Title itu apa isinya.
Jadi, ini dibaca
heart,
shape of red heart.
Ya,
baru description-nya.
Shape of red heart.
NVDA itu
gak coba.
There's nothing.
Or NVDA, there's nothing.
Gak dibaca sama sekali ya.
Gak peduli.
Gak peduli dia.
Diskip.
Ada area role.
Area role image ya.
Area role image ya.
Jadinya ini.
Oh, NVDA
jadi peduli, jadi ngebaca.
Oh, nice.
Don't ask me why
announce the heart twice.
Description-nya tetep gak dibaca.
Tapi dia nams heart.
Sampe artikel pun
agak bingung.
Tapi false offer juga agak
misleading ya. Agak sedikit misleading.
Karena dia gak recognize
SVG sebagai image.
Dia mengedit
sebagai group ya.
For practical purpose
ya cukup reasonable lah.
Misalnya kita ada icon
thumbs up
itu jempol.
Itu dibaca itu icon jempol.
Siap-siap.
Apa nih? Lanjut.
Nah, ini ada ini nih.
Ada saran topik.
Saran topik.
Bahas 3DS. Masih ada hubungannya kan?
Eh, gak ada ya. Gak ada.
Cuman ada hubungannya grafik lah.
Kita perlu bahas tentang
ini juga nih. VR.
VR, AR,
XR ya. Yang
3D gitu ya. Kayaknya menarik juga ya.
Terima kasih ya.
Apalagi udah DI tuh kan.
Beli Vision Pro dulu.
Vision Pro.
Oh iya, iya, iya.
Ya, gara-gara Apple ya.
Dipuja puja, luar biasa.
Tapi nanti ada yang beli aja.
Terus
it, it, it.
Web GPU juga udah makin
canggih ya.
Eh, web apa sih yang baru? Web GPU
yang versi baru.
Nah, itu bakal ngaruh banget ke
AR, VR, XR, dan
RRR lainnya.
Iya. Kalo di
apa? Di device
yang si punya-nya
Facebook apa namanya?
Lupa.
Iya, Meta.
Kan dia punya
punya merk sendiri kan.
Nah itu udah dilengkapi dengan
tentu saja udah dilengkapi dengan
browser yang bisa 3D.
Oh dia bikin browser sendiri?
Enggak, enggak, enggak.
Browser, kayaknya
Firefox ada versi
yang web XRnya ada.
Kayaknya Chrome juga ada.
Jadi
cara yang paling sederhana
untuk masuk ke dunia
AR, XR, dan lain-lain, ya itu
manfaatkan web browser.
Salah satunya pakai 3DS.
Kalo misalkan mau bikin native,
harus belajar di Unity.
Agak ribet tuh.
Gitu.
Itu juga salah satu yang
topik yang, gitu ya,
topik yang menarik juga
untuk dibahas. Nah, ini ada pertanyaan
tapi kita nggak bisa jawab.
Kenapa SPG lebih ribet dibandingkan
gambar di Flutter padahal Android itu sendiri
XML. Iya.
Bisa. Kita nggak tahu.
Satu buat
XMLnya buat configure
dan buat layout.
Satu buat rendering.
Completely different thing.
Mungkin si renderingnya nggak
atau tidak memudahkan developer
untuk menggunakan SPG.
Mungkin belum
terlalu populer si
menggunakan format SPG.
Makanya prioritasnya agak diturunin
untuk developer experience-nya.
Mungkin gitu ya.
Karena jarang masih jarangnya.
Seperti kita bisa featuring jadi Flutter lagi nih.
Eh, belum pernah. Iya, ini juga ada nih.
Performa Flutter Web itu gimana?
Kita nggak tahu.
Jujur saja kita nggak tahu.
Kita juga nanya nanti.
Jadi,
kalau featuring jadi Flutter, kita sambil
tanya-tanya juga ya.
Terakhir jawabannya
masih suram katanya.
Flutter Web itu masih suram.
Itu kan soal usage,
bukan soal performance.
Nggak, masih
developer experience-nya
masih kurang bagus.
Jadi, masih belum direkomendasikan
untuk digunakan. Terakhir itu.
Itu sebelum Google I/O ya.
Kemarin Google I/O juga ada beberapa hal
yang terkait dengan Flutter.
Salah satunya
yang multi-platform kan.
Itu sempat kita bahas juga
yang direndernya ke
Canvas yang kemarin itu.
- Iya, iya, iya.
- Nah, itu juga
kita nggak tahu tuh gimana tuh.
Karena aksesibilitinya jadi
berkurang ya.
- Jadi nggak ada sama sekali.
- Jadi nggak ada sama sekali. Nah,
buat SVG dari Canvas langsung jadi.
Oh iya, iya. Bisa pakai SVG ya?
Bisa.
- Nah, jangan lupa pakai, apa, dioptimize
dulu biar nggak, biasanya kalau yang
auto-generate-nya lepotan.
- Hmm.
Terus NFT juga,
NFT masih itu ya?
Sekarang kan?
- Mesti ada yang main.
- Mending daripada NFT. - Masih banyak lah.
- Itu AI-generated image.
Kalau kan ada mid-journey untuk
generate image. Siapa tahu,
next-nya adalah meet something yang
generate-nya SVG.
- Oke, NFT. Masih.
- Oh, SVG.
- Oh iya, benar juga.
Jadi nggak pakai raster ya?
Image-nya SVG ya?
Wah, ide bagus, ide bagus.
- Kombinasinya bisa lebih,
bisa combine jauh lebih banyak ya.
- Iya.
- Satu NFT compute itu bisa generate
kira-kira macam variasi tuh.
- Hmm, benar, benar, benar, benar.
- Randomly generated. Kan tadi ada
PET, ada Polygon, ada Polyline.
- Iya, iya, iya.
Nah, ini juga ada yang menarik nih, tentang
JPEG XL. Yang
lagi rame ya, yang lagi rame,
kalau nggak salah,
coba tolong dikonfirmasi,
kalau nggak salah, salah satu browser,
saya lupa brosernya apa, mereka masih
support JPEG XL, dan
performanya lebih bagus daripada
WebP,
kalau nggak salah.
Sebagai informasi tambahan, JPEG XL
ini kan di-remove ya,
jadi tidak didukung oleh
Chromium, Chromium
Family kan, keluarganya Chromium
udah di-drop kan, tadinya
support habis itu udah di-drop kan.
Nah, yang bikin kontroversi adalah browser
non-Chrome, yang
bilang kalau JPEG XL itu lebih bagus
daripada WebP
atau Aviv yang
digadang-gadangkan
jadi format masa depan. Format masa
depan.
Itu ada di
Twitter, kalau nggak
salah, di Twitter.
Itu Gkarsi
Wild juga yang
jemputnya, coba ya, JPEG XL.
Ada mediumnya tuh?
Ada ya?
Mana-mana.
Tapi sebenernya itu
itu masih, itu kayak
interchangeable sama JPEG nggak ya?
Kayak algoritm.
Iya, JPEG versi berikutnya.
Ada kan, ada JPEG yang biasa,
ada JPEG 2000,
ada JPEG XL. Yang tidak
disupport itu hanya JPEG XL, yang JPEG 2000
disupport.
Oh iya benar, Apple.
Apple emang suka beda-beda ya dia.
Suka beda sendiri gitu ya.
Iya, karena dia bikin
engine, dia bikin software buat
hardwarenya sendiri. Jadi ya udah kan
benar-benar suka-suka.
Yang paling optimis untuk
engine-nya dia.
Ini, ada nih.
Ada hasilnya.
Edit support HEAC.
Kan si Apple kan dia supportnya
HEAC kan, karena Apple foto itu
pakai ini kan.
Sama nambahin JPEG XL yang baru,
si Safari yang baru.
Di WWDC kemarin.
Kalau nggak salah
Jake Archibald juga komen dia
kemarin.
Sekarang ini di mana sih?
Dia udah pergi dari Google.
Dia ternak lelih ya sekarang.
Ternak lelih dia.
Avocado Farm.
Mana ya?
Wah nggak ada ya.
Dia sempat komen atau apa gitu?
Pernah lihat.
Tapi nggak di mark saya sekali.
JPEG XL itu format file-nya JXL.
Ini ada detailnya.
Ada hasilnya.
Mungkin kita bahas tentang JPEG XL
aja dulu kali ya. Masalah kontroversinya
nanti belakangan.
Cari sendiri.
Kok?
Sebentar.
Ada nih.
JPEG XL dot
info.
Sebentar.
Ya berasa dasar support JPEG
XL tulisannya.
Mana dia?
Oh internetnya mati.
Kok bisa?
Maaf. Halo, halo. Cek, cek, cek.
Bisa, bisa denger kok.
Putus-putus?
Enggak, lancar.
Kok kalian putus-putus suaranya?
Enggak tau sejauh ini sih.
Ini siapa yang koneksinya ngaco coba?
Matiin dulu ya hitiknya ya.
Videonya. Kameranya.
JPEG XL is next generation
general purpose image compression
codec by JPEG committee.
It was based on Google pick
proposal. Loh, dari Google ya.
Terus dia abis itu.
Loh, kok seru.
Nah cuma ini nggak ke screen, Sir.
Delay kayaknya.
Ayo.
Ini nih ada comment.
Loh, apa lagi ilang?
Iya, ini kayaknya
koneksi Mas Riza.
Mulai.
Udah masuk lagi ya?
Muter-muter.
Itu SVG nggak tuh loading screen-nya?
Spinner-nya SVG.
Spinner-nya SVG itu.
Halo.
Udah.
Oke.
Coba mesen lagi ya.
Ini koneksi.
Bukan hanya Ikan.
Menular-menular.
Menular.
It was based on
Google pick proposal. Ternyata dari
Google ya. Abis itu dia
remote code ya.
UIF proposal.
Ya, proposal kan.
Bisa di-retract.
Oh, ada mimei-nya
sendiri. Media type-nya.
Image JXL.
Oh, ini
JXL.
Key features-nya.
High fidelity.
Lossy.
Jadi, beda sama PNG yang lossless ya.
Ini cocok
buat nampilin foto-foto yang
istilahnya yang
resolusi tinggi ya.
Google pick
masih ada nggak sih?
Google pick itu apa?
Google pick apa? Belum ada.
Itu apa?
Jaman dulu punya produk.
Image format and photo
and the internet.
2022 masih update
terakhir, Oktober.
Jangan bilang update date me.
Dependabot.
Enggak, dependabot.
Merge pull request.
Pull request dari dependabot.
Tetep keke.
Ya, jadi intinya
ada satu format namanya
JPEG SL. Ya, itu lanjutannya dari
JPEG. Tapi
si Google Chrome
memutuskan untuk tidak mendukung
tidak mendukung support si
JPEG SL ini beberapa
tahun yang lalu.
Ya, sementara
Apple malah menambahin
di Safari yang
versi terbaru.
Itu yang bikin kontroversi.
Selamat pusing-pusing ya.
Jadi banyak
banyak ininya ya.
Tapi itu terbantu sama tadi tuh. Kita
bahas sekilas kan, picture element.
Nah, di situ. Picture element
comes to the rescue kan. Kita bisa
men-specify beberapa
format. Kalau misalnya ya mostnya
sebetulnya realistically lebih
simple kalau tetap pakai yang di support
semua aja kan. Tapi misalnya
kita beneran
udah harus-harus banget
pakai JXL itu, ya udah
kita bisa pakai picture tadi, picture
element, terus bisa specify
JXL. Abis itu bawahnya
kasih fallback JPEG
atau format lain.
Benar.
What? Mau?
Bukan,
JXL itu yang untuk codecnya.
Jadi kalau misalnya operating
systemnya
bisa buka
JPEG XL enggak?
Oh, di private chat, oke.
Lib JXL.
Ini berarti
kita harus ngobrol dulu.
Tiga jam yang lalu.
Iya.
Remove litmy tuh, tapi.
Bukan update.
Curiga banget ya.
Kalau ada update-update gitu, curiga banget.
Cuma litmy doang.
Tapi sudah standard loh
by ISO blablabla.
Iya, udah standard.
Kan based on proposal. Proposal itu kan ya
ya.
On the way ya.
On the way, tapi bisa aja.
Bisa aja Chrome-nya, nggak mau
ada.
Bukan ini bukan suatu
browser, tapi untuk jadi
jadi library-nya, codec-nya
supaya bisa baca.
Jadi kalau misalnya
yang kirim file Lib JXL, bisa
dibuka gitu. Kita buka di
laptop kita masing-masing.
Oke, bro. Insert JPEG XL.
Nah, ini dia ketemu.
Oh, ini belum masuk. Bahkan belum masuk
OS ya? Belum.
Oh, masih baru banget.
Masih baru.
Ubuntu 2.3 aja belum nih?
Iya.
Yang paling populer, salah satu
yang paling populer.
Nah, ini ketemu nih.
Nah, ini dia.
Interesting move.
JPEG XL outperform Aviv
at size larger than ideal for
the web. But provided that
browsers keep up, keep the
implementation safe and up to date, more
format is better for developer.
Ini dia nggak
tweet, ini setelah out dari Google
pas masih. Setelah, setelah.
Iya, setelah. Ini baru kok. Baru.
6 Juni. Iya,
WWE DC kemarin.
Oh ya, setelah itu denounce ya.
Itu ada penjelasannya.
JPEG XL folks sometimes
claim it outperform
Aviv at web-optimized
size.
Ini yang bikin perang nih.
Twitter war, Twitter war.
Biarin aja mereka perang.
Yang penting kita nanti setelah
setelah damai ya kita pake lah
kalau emang beneran bagus kan.
Kalau...
Tahun depan mungkin bisa jadi topic
IOXN gitu.
Iya, siapa tahu
kalau Google-nya wait and see
juga, kalau emang perspektnya
bagus, bisa aja diadopsi.
Iya, siapa tahu kalau misalkan safari
support, habis itu firefox support,
pasti mereka nggak tinggal diem dong.
Apa lagi?
Sebenernya sekarang kan Chromium
udah championing Aviv ya.
Nah kalau DXL punya
keunggulan dibanding Aviv,
yang emang unggulnya jauh banget
dan repot port ngejar ya bisa aja kan.
Akhirnya ya udahlah.
Adopsi aja.
Oke.
Kita sudah satu jam,
ada yang mau dibahas lagi tentang
SPG atau
komen-komen yang bisa kita highlight?
Tuh, SPG adalah
format masa depan.
Ya kita nggak pernah tahu ya, masa depan.
Format masa lalu, masa sekarang,
dan masa depan. Asik.
SPG tuh evergreen sih.
Evergreen.
Bahkan, apa?
Inter Explorer aja support ya udah aman.
Itu sih, mungkin
bonus satu resource, jadi
aku tuh suka banget sama
artikel cara apa, Sarah
Sweden membahas SPG.
Kalau suka bingung dan pingin
ngedelmin, coba deh buka
link blog yang atas itu,
SPG Basic Concepts.
Yang ini ya?
Bukan?
Iya nggak tahu, belum di-screen ya.
Sorry, sorry, sorry. Ini?
Bukan? Ini?
Nah, jadi si Mbak Sarah
Sweden ini punya artikel
banyak banget tentang SPG.
Bukan satu ini doang sih. Cuma maksudnya
itu salah satu yang paling beginner-friendly.
Dan penjelasannya kayak jelas
banget, contohnya lucu-lucu.
Kayaknya dia bikin custom icon
sendiri buat sebagai
contoh, terus ada contoh kodenya juga.
Dan itu banyak.
Maksudnya, dia
deep dive banget emang, jadi
itu baca kalau lagi santai aja sih
sebetulnya, kalau lagi buru-buru sih.
Itu tadi yang artikel, yang apa?
Content Aureli aja yang mau copy paste
cepet-cepet. Tapi kalau misalnya
bingung, kan SPG itu
agak overwhelming ya, suka ada
view box lah, ada clipping,
ada apa-nya, ada macem-macem
konsep yang nggak langsung jelas.
Jadi cari aja
artikel, semua artikel di
blog dia tuh. Ada kayak
mungkin, berapa ya di atas?
Hampir 10 artikel ada kali tentang SPG.
Jadi, kalau
ada liat SPG yang bingung, copas
aja masukin CGP kita atau Google Bar,
minta aja jelasin.
Itu juga bisa.
Jelasin, jelasin
tag-tag itu isinya apa gitu,
supaya kita mengerti.
Ini website-nya enak banget buat dibaca ya.
Dia designer ya,
berarti ya?
Iya, nggak sih front-end.
Oh, front-end.
Pemilihan font-nya juga bagus tuh.
Iya, pemilihan font, warna, dan lain-lain kayaknya
ya, sederhana, hitam putih, cuman
kok enak dibaca gitu.
Bikin betah gitu.
Seru-seru.
Kayak ngobrolin web juga kan.
Asik.
Bikin betah.
Bikin betah.
Amin, amin, amin.
Yang betah kita nggak tahu.
Saya nggak tau nggak.
Iya, iya, iya, iya.
Banyak belajar.
Meskipun betah, kita harus tetap
ini ya, harus
berpisah ya, untuk malam hari ini.
Karena kita bisa ketemu
lagi minggu depan.
Bahasannya tentang apa ya.
Tunggu saja, announcement
kita di hari Selasa.
Oh iya, links laido ya.
Kalau yang pengen
usul topik, atau malah
bikin bintang kamu featuring,
bisa di situ.
bit.ly/ngobrolinweb
Ya, ditunggu saran-sarannya.
Tadi ada beberapa saran yang udah
kita tulis juga. Terima kasih
buat teman-teman semua yang sudah
hadir dan sudah meramaikan
acara kita malam hari ini.
Mudah-mudahan apa yang kita sampaikan
bermanfaat dan bisa digunakan untuk
pekerjaan sehari-hari ya.
Kita ketemu lagi minggu depan.
Selamat malam, selamat istirahat.
Dadah.
Bye.
Tunggu, tunggu, dadah terus, dadah terus.
Susah ini.
Nah.
Oke.
Nah, minggu depan apa ya?
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
7 Des 2022
Ngobrolin Font
Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat hala...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
1 Mei 2024
🔥 UI Component Library: Pakai atau Gak?! Untung Rugi, Tips Memilih, & Pengalaman Developer!
Episode ini membahas secara mendalam tentang UI Component Library, mulai dari definisi, perbedaan dengan CSS framework d...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .