Video Screencast 2025, Februari

Terima kasih telah menonton semua orang, itu berarti segalanya bagi saya dan situs ini. Entri blog ini adalah daftar besar sumber daya untuk semua yang kita bahas dalam seri ini "

Saat Anda menggunakan inline, semua elemen berada di DOM, seperti s dan s dan elemen HTML lainnya. Jika Anda memiliki SVG seperti: dan Anda melakukannya: var rect = "

Dalam screencast ini kami menggali artikel Léonie Watson tentang semua tentang SVG yang dapat diakses dan pada dasarnya membahasnya poin demi poin. Saya menikmati poin pertama itu "

Kami telah menghabiskan banyak waktu membicarakan tentang penggunaan inline dan elemen. Anda dapat membangun sistem ikon yang sarat dengan keuntungan. Anda dapat membuat "

Ada banyak hal yang dapat Anda lakukan dengan SVG tanpa perangkat lunak apa pun. Dengan asumsi Anda memiliki sumber gambar SVG online yang bagus, Anda dapat menggunakannya secara langsung. Tapi"

JavaScript adalah cara terakhir yang akan kita bahas dalam menganimasikan SVG. Kami melihat CSS, yang bagus dan cukup nyaman, tetapi tidak dapat melakukan sejumlah SVG "

Konsep clipping dan masking cukup sederhana. Sembunyikan bagian tertentu dari elemen dan tunjukkan yang lain. Perbedaan sebenarnya di antara mereka cukup sederhana "

Mungkin Anda pernah mendengar tentang filter CSS? Anda dapat menerapkannya untuk melakukan elemen apa pun dari CSS, seperti: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Mungkin tidak ada kasus penggunaan yang sangat besar untuk ini, selain yang sudah jelas: Anda memerlukan grafik raster di antara hal-hal lain dalam desain SVG yang lebih besar. "

Mungkin akan datang suatu hari di mana Anda menginginkan grafik yang Anda miliki adalah SVG, tetapi Anda hanya memilikinya dalam raster, seperti GIF, JPG.webp, atau PNG. Dalam video ini kami melihat contoh "

Teknik animasi SVG kecil yang populer adalah menggambar jalur. Jika Anda tidak dapat membayangkannya, inilah kumpulan dari miliaran contoh yang saya buat. Pada dasarnya "

Ada elemen di SVG. Tidak ada kejutan besar di sini: ini untuk memasukkan teks ke dalam SVG. Bukan garis besar bentuk huruf (meskipun Anda juga bisa melakukannya) tetapi "

Ini sedikit esoteris, saya hanya perlu melakukannya sendiri satu kali dan merasa bingung, jadi saya pikir saya akan membuat video lengkap tentang itu. Permasalahannya adalah,"

Video yang satu ini telah dihapus. Saya akan segera syuting ulang suatu hari nanti. Jika Anda membaca ini dan saya belum melakukannya, jangan ragu untuk menghubungi saya dan mengganggu saya "

Tip ini hanya berlaku jika Anda memiliki Adobe Illustrator CC (Creative Cloud). Saya mengonfirmasi bahwa ini berfungsi di situ, atau bahkan CC 2014 yang lebih baru. Ini sesederhana mungkin "

Meskipun menganimasikan SVG dengan CSS mungkin lebih nyaman untuk orang front-end pada umumnya, SVG memiliki cara lain untuk membuat animasi langsung ke dalam SVG "

Saat Anda menggunakan SVG sebaris, semua kode SVG itu berada tepat di HTML, dan dengan demikian di DOM. Anda dapat menatanya seperti Anda menggunakan,, atau HTML lainnya "

Kami belajar bahwa batasan penggunaan untuk memasukkan sedikit SVG adalah Anda tidak dapat menulis pemilih CSS gabungan yang mempengaruhi melalui sana. Misalnya: "

Istilah "alat pembuat" mungkin menakutkan. Ini mengingatkan kita pada alat baris perintah canggih yang membutuhkan konfigurasi dan ketergantungan sistem aneh yang rusak saat Anda "

SVG sebaris dapat "ditata" dalam arti sudah memiliki isian dan guratan dan yang lainnya saat Anda meletakkannya di halaman. Itu luar biasa dan benar-benar "

Situs fotografi stok selalu memiliki cara untuk memfilter hasil pencarian berdasarkan "vektor". Dan ingat, apa pun format yang Anda dapatkan saat mengunduh sesuatu "

Kami telah mempelajari bahwa alat build sangat bagus untuk tugas-tugas seperti mengubah folder yang penuh dengan SVG menjadi blok def SVG. Seperti yang selalu terjadi di "

Kami pasti bisa menjadi sedikit lebih aneh dengan alat pembuatan kami. Pada saat posting ini, anak poster alat bangunan adalah Grunt. Ada pesaing, "

Setelah kita memiliki apa yang kita sebut "blok defs" dari SVG - potongan SVG yang mendefinisikan semua hal yang ingin kita gambar nanti - di mana kita meletakkannya? Begitu"

Elemen tersebut melekat pada seluruh ide sistem ikon SVG sebaris ini. Kami belajar bahwa cara bersih untuk melakukannya adalah dengan meletakkan semua yang ingin Anda gambar nanti "

Menempatkan blok def SVG di bagian atas dokumen pasti berfungsi. Ini juga memiliki beberapa keuntungan, seperti fakta bahwa tidak ada permintaan HTTP yang perlu dibuat, "

SVG memiliki elemen yang sangat keren dan kuat yang disebut. Konsepnya cukup sederhana. Ia menemukan bit kode SVG lain, direferensikan oleh ID, dan mengkloningnya "

Kami telah membahas "SVG inline" - yang menghapus sintaks SVG langsung ke HTML. Anda juga dapat menggunakan SVG sebaris yang sama di tempat lain, seperti di atau "

Ingatlah bahwa vektor apa pun yang Anda dapat masuk ke SVG. Perangkat lunak Adobe hebat dalam hal ini. Mungkin ada hal vektor dalam PDF - cukup buka PDF dan Anda akan "

The Noun Project adalah tempat (sangat) fantastis untuk mendapatkan SVG. Mari kita hitung secara harfiah segala sesuatu di SVG dan benar-benar datang seperti itu. Mereka adalah "