Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cara Membuat Gambar SVG Responsif

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Dalam tutorial ini saya akan menjelaskan cara membuat gambar SVG responsif; lebih spesifik, saya akan menjelaskan cara membuat logo SVG, ikon, dan gambar, yang berubah pada layar yang terbuka.

Gambar SVG yang Responsif

Mari mulai dengan demo. Inilah yang sedang kami kerjakan (lihat versi layar penuh untuk efek maksimum):

Jika Anda mengubah ukuran penampung (ujung topi ke Rick Strahl untuk plugin jQuery Resizable) atau jendela browser, Anda akan melihat respons SVG.

Apa yang Kita Lakukan

Ikuti video untuk mempelajari cara:

  • Buat logo ini di Adobe XD
  • Ekspor aset SVG
  • Bersihkan dan optimalkan SVG menggunakan SVGOMG.

Setelah Anda memiliki SVG (unduh aset yang dioptimalkan di sini jika Anda mau) langkah-langkah berikut ini menjelaskan cara Anda membuat logo yang responsif.

1. Kode Tangan Elemen SVG

Kita akan menyerahkan kode awal SVG ini, menempelkan aset logo mana saja diperlukan. Mulailah dengan membuka elemen SVG.

Catatan: Kita perlu memasukkan senapan namespace aneh ini sehingga kita bisa menggunakan atribut href dll lebih jauh ke bawah.

2. Tentukan Beberapa Simbol

Bersarang di dalam svg, kita perlu mendefinisikan beberapa simbol; setiap komponen akan memiliki simbolnya sendiri. Inilah simbol yang terlihat, termasuk, dalam hal ini, viewBox 60x60 (cocok dengan dimensi ikon).

Sekarang kita menempel konten ikon SVG kami dalam symbol elemen, tetapi hanya elemen path untuk bendera dan kastil. Kita berakhir dengan:

Ulangi proses ini dengan membuat simbol untuk "tipe" SVG juga.

3. Tentukan Simbol Untuk Versi Logo

Sekarang kita perlu mendefinisikan lebih banyak simbol; satu untuk setiap versi logo yang dirancang sebelumnya (lanskap, dan versi lengkap).

logo versions in Adobe XD

Simbol-simbol ini dibuat seperti sebelumnya, memastikan bahwa viewBox adalah ukuran yang benar dalam setiap kasus. Sebagai contoh:

Perbedaan utama hadir sekarang: bukannya pastinya dalam path svg secara langsung, kita akan use elemen yang menggunakan referensi bagian simbol sebelumnya oleh id mereka, seperti:

Kita bisa mendapatkan nilai x, y, width, dan height dari Adobe XD (atau di mana pun Anda mendesain ikon). Di sini Anda dapat melihat posisi dan nilai dimensi untuk ikon teks:

position and dimensions

Anda akan berakhir dengan sesuatu seperti ini – dua versi sebagai simbol:

4. Mengungkapkan Simbol di Browser Anda

Kita memiliki banyak kode sekarang, tetapi jika Anda membuka SVG di browser Anda, Anda tidak akan melihat apa pun. Kita telah mendefinisikan simbol, tetapi kita masih harus benar-benar menggunakannya. Mari langsung menempatkan tiga elemen use di kanvas; satu untuk setiap versi:

Jika sekarang Anda membuka SVG di browser, Anda akan melihat ketiga logo yang ditempatkan di tempat yang sama, ditumpuk di atas satu sama lain.

5. Tampilan Ikon Secara Selektif Menggunakan Media Queries

Kita akan menggunakan media queries untuk menampilkan masing-masing ikon secara individual, tergantung pada ukuran layar, dan kita dapat melakukannya langsung di dalam file SVG.

Setelah membuka tag svg, tambahkan beberapa tag style:

Di dalamnya, tambahkan beberapa media queries yang menargetkan ikon melalui nama kelas yang baru saja kita berikan.

  • Di sini kita mulai dengan menyembunyikan landscape dan versi full secara default.
  • Kemudian pada layar minimal 500px kita menyembunyikan square dan membuka landscape.
  • Kemudian pada layar setidaknya 1200px, kita menjaga square tetap tersembunyi, menyembunyikan landscape, dan mengungkapkan versi lengkapnya.

Kesimpulan

Dan kita selesai! Simpan file SVG dan Anda akan dapat menggunakannya seperti gambar biasa (dengan elemen img). Jangan lupa, Anda dapat melihat versi layar penuh untuk mendapatkan kesan penuh dari efek responsif yang kita buat.

Pelajari lebih lanjut

Tautan yang Berhubungan

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.