Tutorial SVG

Ringkasan Tutorial SVG

• Ini adalah tutorial SVG buatan Hunor Márton Borbély, yang memungkinkan pembaca mempelajari cara mengodekan gambar SVG langkah demi langkah, mulai dari bentuk dasar hingga animasi yang kompleks.
• Mencakup berbagai topik seperti menggambar bentuk dasar, membuat pohon Natal, manusia roti jahe, dan rumah, serta memperkenalkan beragam fitur SVG seperti clip path, gradien, kurva Bézier, dan menggambar teks mengikuti jalur.
• Juga mencakup cara menggabungkan SVG dengan teknologi lain, seperti menggambar jam menggunakan JavaScript, menambahkan interaksi ke elemen SVG, dan membuat diagram SVG dengan JavaScript.

Opini GN⁺

• Tutorial ini merupakan materi yang baik bagi insinyur perangkat lunak pemula untuk mempelajari pengodean gambar SVG secara sistematis, dari dasar hingga teknik tingkat lanjut.
• Terutama karena disertai contoh-contoh praktis seperti cara membuat jam yang menampilkan waktu nyata dan menambahkan interaksi ke elemen SVG, materi ini tampak akan memberikan pengalaman belajar yang sangat bermanfaat dan menarik bagi para pembelajar.
• Bagi orang-orang yang ingin mempelajari SVG, tutorial ini akan menjadi materi belajar yang menarik untuk memperluas pemahaman tentang desain web grafis dan meningkatkan kemampuan menambahkan elemen visual yang unik ke halaman web.

[GN⁺]

Komentar Hacker News

• Kombinasi SVG dan React masih diremehkan. Kita bisa memanfaatkan semua kemampuan dan abstraksi React, serta merender grafis arbitrer alih-alih DOM. Setelah mencobanya untuk merender grafik dan chart, dalam situasi tertentu ini jauh mengungguli Canvas. Misalnya, ini berguna saat membutuhkan interaksi sederhana tetapi tidak memerlukan grafis kompleks seperti manipulasi tingkat piksel.
• SVG adalah format yang fleksibel, dan layak meluangkan waktu untuk mempelajarinya lewat tutorial terkait. Jika digabungkan dengan komponen React, SVG memungkinkan pembuatan UI keren yang sulit diwujudkan hanya dengan HTML.
• Saya menggunakan komponen "Circle of Fifths" interaktif yang dibuat dengan React untuk proyek sampingan teori musik. Komponen tersebut bisa digunakan, dan posting blog tentang proses membangun Circle of Fifths dengan SVG sangat membantu.
• Pada contoh penggunaan <clip-path> di SVG, mendefinisikan lingkaran besar dua kali itu tidak efisien. Saat mengubah ukurannya, kita harus mengedit di dua tempat, jadi jika sudah menggunakan defs, lebih baik definisikan lingkarannya sekali saja lalu pakai ulang.
• Menulis inline SVG dengan SVG dan React itu menyenangkan, dan dengan memakai tag <foreignObject>, kita bisa memanfaatkan SVG di dalam HTML, sehingga berguna untuk hal-hal yang lebih dikuasai HTML seperti tautan, gambar, dan styling flexbox dasar.
• Beberapa tahun lalu, saat memakai SVG untuk pekerjaan antarmuka, saya membuat desainer terkejut hanya dengan mencari dan mengganti kode warna di dalam file SVG untuk dua skema warna.
• Saya mengucapkan terima kasih atas umpan balik positif terhadap tutorial ini, dan telah memperbaiki kesalahan yang ditemukan. Saya masih menyempurnakannya, dan misalnya penasaran apakah ada yang tahu kenapa pratinjau thumbnail di Twitter tidak berfungsi.
• Saya punya sedikit keluhan tentang istilah "tag" SVG. Saat pertama kali mulai dengan HTML, saya menyebut semuanya "tag", tetapi setelah XHTML muncul saya mulai menyebutnya "elemen". Saya masih memikirkannya sebagai "tag", tetapi sekarang saya mengatakan "elemen".
• Saya sangat menyukai contoh tentang kurva dan clipping. Saya lebih suka path karena bisa melakukan hampir segalanya dan tidak sebertele-tele metode lain. Saya tidak pandai menggambar dan tidak suka gambar, jadi demi performa dan kenyamanan saya membangun seluruh proyek sampingan dengan SVG. Tutorial ini membuat saya sadar ada banyak bagian yang perlu direfaktor.
• Saya ingin melihat contoh yang memakai teks dan gambar bersama-sama. Saat ini saya sedang berkutat dengan masalah ini, dan penyelarasan adalah persoalan yang rumit. Saya pernah memakai Inkscape, tetapi saya lebih cenderung menulis XML untuk menghasilkan yang saya butuhkan.
• Saya penasaran apakah menulis SVG secara langsung itu praktik yang umum, atau justru yang umum adalah menggambar misalnya di Figma lalu menghasilkan file SVG.