Tutorial SVG

 (svg-tutorial.com)
6 poin oleh GN⁺ 2023-12-08 | 1 komentar | Bagikan ke WhatsApp
  • Sebagai materi belajar SVG untuk menggambar gambar langsung dengan kode di dalam HTML, tutorial ini dapat diikuti secara bertahap dari bentuk dasar hingga interaksi
  • Alur pembelajaran berkembang dari elemen dasar seperti viewBox, polygon, dan polyline ke path, kurva Bézier, dan arc
  • Bagian transformasi membahas rotasi, translasi, penggunaan ulang, penskalaan, dan transformasi umum; bagian CSS menghubungkan animasi, hover, animasi berbasis path, hingga SVG inline di CSS
  • Topik lanjutan membahas teks, clip-path, dan gradien; dengan JavaScript, pengguna mempraktikkan jam yang menampilkan waktu sebenarnya, interaksi, diagram berbasis data, dan pemecahan menjadi beberapa komponen
  • Juga menyediakan tautan editor untuk line, circle, rect, polyline, polygon, text, serta quadratic/cubic Bézier curve dan arc, sehingga bisa langsung bereksperimen per elemen

Susunan Tutorial

Elemen SVG dan segmen path untuk praktik

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-08
Komentar Hacker News

  • Kombinasi SVG + React kurang diapresiasi. Kita bisa merender grafik arbitrer alih-alih DOM sambil tetap memakai abstraksi dan kekuatan React, dan untuk beberapa penggunaan seperti rendering grafik atau chart, menurut saya ini jauh lebih baik daripada Canvas.
    Ini terutama bagus jika tidak membutuhkan hal yang kompleks secara grafis seperti manipulasi per piksel dan hanya perlu sedikit interaksi. Untuk membuat efek hover di Canvas, kita harus menghitung sendiri mouse sedang berada di atas elemen mana, jadi merepotkan; sementara di SVG cukup memakai fitur bawaan seperti onmouseover.

    • Benar. Kadang terasa seperti sihir bahwa kita bisa memasang click listener pada SVG dan menatanya dengan CSS seperti HTML biasa, dan React / JSX membuatnya mudah digunakan.
    • Apakah ada materi pengantar yang bagus tentang topik ini? React saya juga masih nyaris level pemula, tapi sepertinya ini cukup menarik untuk didalami.
      Akan menyenangkan kalau ada contoh berjalan yang bisa memberi arahan atau inspirasi.
    • Saya pernah membuat komponen pemotongan gambar + tagging dengan Preact.js dan SVG untuk sisi klien, dan hasilnya cukup bagus. Saya bisa merekomendasikannya untuk aplikasi semacam ini.
    • Benar. HTML Canvas sering kali jauh lebih performan, tetapi kalau Anda tidak sedang membuat Figma berikutnya, bekerja dengan SVG jauh lebih nyaman.
    • Saya sedang mengodekan pola yang akan dipotong dengan GlowForge menggunakan React & SVG, dan ini bekerja sangat baik.

  • Secara keseluruhan ini materi yang luar biasa dan contohnya sangat jelas. Namun, kode yang disarankan pada bagian clip-path membuat lingkaran besar ditulis dua kali, sehingga jika ingin mengubah ukuran lingkaran harus mengubahnya di dua tempat.
    Karena sudah memakai defs, menurut saya lebih baik ditulis dengan cara yang menggunakan ulang definisi yang sama.

    • Elemen kedua juga tidak perlu; cukup render lingkaran secara normal lalu rujuk di dalam clipPath.
      Secara pribadi, saya juga ingin menghilangkan pembungkus <g>. Saya tidak pernah memahami alasan merekomendasikan struktur seperti itu, dan kalau bukan untuk kasus yang sangat jarang ketika kita ingin memasukkan elemen yang akan dirender jika tidak berada di dalam <defs>, tampaknya tidak ada keuntungan apa pun. Untuk situasi seperti defs/circle pada contoh, biasanya yang tepat adalah memakai <symbol>.
    • Itu benar dan ide yang bagus. Mungkin saya bisa menambahkan catatan terkait.

  • Sangat keren. SVG adalah format yang rapi dan fleksibel, dan karena berkaitan langsung dengan side project yang sedang saya kerjakan, saya berencana meluangkan waktu untuk mengikuti tutorialnya.
    Seperti orang lain, saya cukup menikmati membuat komponen React berbasis SVG. React dan JSX memudahkan penambahan interaksi, dan SVG memungkinkan UI yang tidak mudah dibuat hanya dengan HTML.
    Saya pernah merilis komponen React yang merender Circle of Fifths interaktif untuk side project teori musik. Masih banyak yang harus dikerjakan, tetapi sudah bisa digunakan: https://github.com/epiccoleman/react-circle-of-fifths
    Saya juga menulis artikel tentang proses membuat Circle of Fifths dengan SVG, dan saya terutama menyukai bagian penjelasan di tengah yang mengikuti proses menggambar elemen kompleks: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Sekarang saya sedang membuat generator diagram fretboard dengan cara serupa, dan berguna bisa melihat kembali artikel lama itu sebagai referensi. Hal baik dari menuliskan pekerjaan adalah kita bisa “memutar ulang” bagaimana kita memecahkan masalah.

  • Saya suka materi ini. Saya pernah membuat beberapa inline SVG di React dan menambahkan interaksi, dan itu sangat menyenangkan untuk diutak-atik.
    Tag <foreignObject> khususnya sangat berguna. Karena kita bisa memasukkan HTML biasa ke dalam SVG, hal-hal yang lebih cocok dikerjakan HTML—seperti link, gambar, dan styling flexbox dasar—bisa ditangani di dalam proyek seni SVG.
    Sebagai tambahan untuk penulis, beberapa link di situs tidak berfungsi. Link bio.link di bagian bawah halaman dan link demo kurva Bézier interaktif pada Day 11 “How to Draw Quadratic Bézier Curves with SVG” sedang tidak aktif.

    • Link demo interaktif sudah saya perbaiki. Situs itu tampaknya dibuat dengan Vue, jadi mungkin deep link tidak selalu bekerja dengan baik.
      Untuk bio.link saya tidak melihat masalah; saya penasaran error apa yang Anda lihat.
    • Link “next example” di bagian bawah halaman https://svg-tutorial.com/svg/transform juga mengarah ke /svg/path sehingga menghasilkan 404, dan sepertinya link yang benar adalah /svg/use.
    • Selalu saja ada yang rusak. Akan saya cek.
      Saya juga tidak tahu tentang foreignObject, ternyata sangat bagus.

  • Beberapa tahun lalu saat mengerjakan antarmuka, saya memakai SVG untuk sebagian grafik. Ada dua skema warna, tetapi salah satu grafik hanya tersedia dalam satu skema, jadi saya berjalan ke seberang lorong untuk meminta kode hex warna lain.
    Saya sangat terkejut saat melihat desainer membuka file SVG dan hanya mencari lalu mengganti semua warna untuk membuat versi warna kedua.

    • Saya sama sekali tidak terpikirkan soal itu. Tip keren yang suatu hari bisa menghemat banyak waktu.
    • Menarik, tapi bisakah Anda menjelaskan lebih lanjut bagian “berjalan ke seberang lorong untuk meminta kode hex warna lain”?

  • Luar biasa. Saya terutama suka contoh kurva dan clipping, yang masih terasa sulit bagi saya.
    Secara pribadi, saya lebih suka path karena bisa melakukan hampir semuanya dan tidak terlalu verbose dibanding cara lain.
    Saya sudah lama belajar, tetapi merasa masih banyak yang harus dipelajari. Karena saya sangat buruk menggambar dan juga tidak terlalu suka gambar, saya membuat seluruh side project dengan SVG demi kemudahan dan performa.
    Setelah melihat materi hari ini, rasanya saya harus cukup banyak melakukan refactor: https://eddiots.com/1

    • Senang kalau itu membantu. Komiknya juga keren.

  • Terima kasih atas masukan yang bagus, dan beberapa error yang ditemukan sudah diperbaiki. Kalau masih ada yang belum beres, akan senang kalau diberi tahu. Masih sedang sedikit menyempurnakan tahap akhir
    Misalnya, ada yang tahu kenapa pratinjau thumbnail di Twitter tidak berfungsi? Di subhalaman berfungsi dengan baik

  • Bagus sekali. Masalah yang sedang saya hadapi sekarang adalah teks + gambar, jadi akan bagus kalau ada satu-dua contoh terkait
    Penyelarasan benar-benar merepotkan. Saya juga sudah mencoba Inkscape, tetapi untuk membuat yang dibutuhkan, jelas lebih dekat ke “menulis XML langsung”

    • Saya belum banyak bereksperimen dengan teks selain contoh membuat teks mengikuti garis
      Saya tahu tentang text-anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      Dan ada yang menyarankan bahwa tag foreignObject mungkin berguna di sini: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • Teks memang jelas merepotkan. Saya buru-buru membuat kode Python yang menghasilkan tabel dengan svgwrite, dan menempatkan teks di posisi yang diinginkan rasanya seperti neraka
      Pada akhirnya saya mengoreksi beberapa nilai seperlunya dan berhenti di “segini sudah cukup”. Saya setuju dengan permintaan adanya contoh penempatan teks yang tidak trivial
      [0] Tautan GitHub ada di profil
    • Fitur penyelarasan Inkscape cocok bagi saya. Saat perlu lebih presisi, saya menekan ctrl+shift+x dan memasukkan koordinat secara langsung
      Editor XML Inkscape cukup sering crash di lingkungan saya, tetapi masih bisa dipakai kalau ingat untuk menyimpan setiap kali mengedit

  • Biasanya bagaimana orang melakukannya? Apakah orang-orang mengode SVG langsung, atau menggambarnya di tempat seperti Figma lalu menghasilkan file SVG?

    • Karena saya dilatih sebagai desainer grafis, biasanya saya menggambar langsung di Inkscape atau mengimpor dari program lain
      Butuh cukup banyak pekerjaan untuk menurunkan ukuran file di http://shapeoko.github.io/Docs/ ke tingkat yang masuk akal
      Belakangan saya juga membuat mekanisme agar gambar terbuka di jendela baru saat diklik: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      Dan saya bisa membuat agar ketika nama komponen dalam daftar komponen diklik, komponen terkait disorot pada diagram
    • Orang di bidang desain mungkin akan memakai editor favorit seperti Illustrator, Sketch, atau Inkscape. Programmer juga bisa melakukan sedikit penyuntingan dengan software seperti itu, tetapi jika ada interaksi, biasanya SVG diedit langsung
      Bentuk atau kurva yang kompleks kadang saya masukkan ke editor online untuk divisualisasikan, dan tool ini bagus: https://yqnn.github.io/svg-path-editor/
    • Untuk grafik yang lebih kompleks, tetap lebih baik memakai tool desainer. Tetapi grafik sederhana boleh saja dikodekan langsung
      Kalau butuh panah atau ikon menu hamburger, bisa langsung masuk ke kode. Kadang saya mulai dengan kertas dan pena, lalu menyesuaikan koordinat sampai terlihat cukup bagus
    • Dengan munculnya model vektor berbasis transformer baru seperti milik Adobe, pembuatan SVG akan menjadi lebih mudah daripada sebelumnya: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • Dalam proyek-proyek yang saya kerjakan, saya membuat atau mengedit file dengan Inkscape lalu menautkannya seperti gambar biasa
      Sesekali saya juga pernah menyematkannya di dalam halaman karena halaman statis tertentu membutuhkan grafik unik, tetapi grafik dalam kasus seperti itu tidak terlalu kompleks

  • Salah satu hal yang baru-baru ini saya sadari adalah bahwa di dalam aplikasi React, tag SVG bisa dimasukkan secara inline seperti tag JSX
    Saya tidak tahu apakah ini benar-benar dukungan kelas satu atau ditangani oleh Webpack, tetapi dalam beberapa kasus rasanya sangat menyenangkan membuat komponen SVG yang berisi logika. Sekarang bentuk, warna, penghilangan sebagian section, dan sebagainya pada SVG bisa diubah dengan logika berbasis React

    • Bagus kalau SVG-nya sederhana atau perlu banyak variasi
      Namun kalau kode SVG dimasukkan secara inline, browser tidak bisa meng-cache gambar. Jika SVG-nya besar atau variasinya hanya sedikit, mungkin lebih baik menyediakan endpoint terpisah untuk tiap variasi gambar
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Benar. Sejak HTML5, SVG bisa dimasukkan secara inline, dan tidak perlu sesuatu seperti Webpack. Itu langsung berfungsi
      Salah satu contoh dalam tutorial ini juga merupakan diagram berbasis data yang dibuat di React. Menggabungkan keduanya memungkinkan kita melakukan hal-hal yang cukup keren