Cara Membuat Gambar SVG Responsif

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.

<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
</svg>

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).

<symbol id="icon" viewBox="0 0 60 60">
</symbol>

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

<symbol id="icon" viewBox="0 0 60 60">
    
    <path id="flag" d="M37.4 21.2c0 .5-.3 1-.8 1.3l-5 2.2v4.8c0 .8-.6 1.4-1.4 1.4-.8 0-1.4-.6-1.4-1.4V18.6c0-.5.2-.9.6-1.2.4-.3.9-.3 1.3-.1l5.8 2.6c.5.3.8.7.9 1.3z" fill="#f26322"/>
    <path id="castle" d="M30.2 0c16.6.1 30 13.8 29.8 30.4.1 14-9.5 26.3-23.2 29.6h-.2c-1.2.1-2.1-.8-2.2-2v-7.3c0-2.5-1.9-4.5-4.4-4.5-2.5 0-4.5 2.1-4.5 4.6v7.3c-.1 1.2-1.2 2-2.4 1.9C9.7 56.6.2 44.7 0 30.8-.2 14 13.2.2 30 0h.2zm24.2 30.4v-.6C54.3 16.2 43.2 5.4 29.6 5.6S5.3 16.9 5.5 30.4c0 6.1 2.3 12 6.4 16.6.3.2.6.2.9.2.9 0 1.6-.8 1.5-1.6v.4l2.5-16.4c0-.6.5-1 1.1-1h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1 .4 1.1 1l2.5 16.5.3.6c.6.6 1.5.7 2.1.1 4-4.5 6.2-10.4 6.1-16.4z" fill="#334047"/>
    
</symbol>

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).

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

<symbol id="landscape" viewBox="0 0 274 75">
    
</symbol>

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:

<symbol id="landscape" viewBox="0 0 274 75">
    <use xlink:href="#icon" x="" y="" width="" height="" />
</symbol>

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:

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

<symbol id="landscape" viewBox="0 0 274 75">
    <use xlink:href="#icon" x="0" y="0" width="75" height="75" />
    <use xlink:href="#type" x="94" y="12" width="180" height="50" />
</symbol>

<symbol id="full" viewBox="0 0 180 150">
    <use xlink:href="#icon" x="42" y="0" width="92" height="92" />
    <use xlink:href="#type" x="0" y="100" width="180" height="50" />
</symbol>

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:

<use class="square" xlink:href="#icon" x="0" y="0" width="60" height="60" />
<use class="landscape" xlink:href="#landscape" x="0" y="0" width="274" height="75" />
<use class="full" xlink:href="#full" x="0" y="0" width="180" height="150" />

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:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<style>
    
</style>

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

.landscape,
.full {
    visibility: hidden;
}

@media screen and (min-width: 500px) {
    .square {
        visibility: hidden;
    } 
    .landscape {
        visibility: visible;
    } 
}

@media screen and (min-width: 1200px) {
    .landscape{
        visibility: hidden;
    } 
    .full {
        visibility: visible;
    } 
}

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.