kabayankababayan

Menggabungkan Gambar Vector SVG

Tidak terasa usia blog ini telah melebihi satu semester. Namun demikian, tidak bosan-bosannya saya memoles setiap sudutnya agar sesuai dengan selera pribadi. Yeah, my blog my style. Karenanya saya enggan memakai tema-tema gratis yang banyak beredar, selain karena umumnya jauh melenceng dari gaya yang saya suka, juga biasanya memiliki banyak batasan.

Kali ini, saya memoles ikon-ikon media sosial yang pada tema sebelumnya dirasa kurang cantik dan profesional. Meski saya bukanlah seorang sosialita atau blogger profesional, namun penampilan blog yang rapi dan bagus akan menimbulkan anggapan di benak pengunjung bahwa saya, si empunya blog, memang peduli dengan blognya.

Awalnya, saya menampilkan ikon-ikon media sosial dengan cara menempelkan atau menyisipkan (embed) SVG ke template blog. Namun karena merasa tampilannya tidak rapi; barisnya tidak sejajar dan ukurannya timpang, maka saya beralih menggunakan font awesome. Dengan menggunakan font awesome, maka tampilan pun lebih rapi dan customization pun lebih mudah.

Namun ada satu yang mengganjal; jika menggunakan font awesome di Blogger, berarti blog kita perlu untuk melakukan request pada layanan penyedia font awesome.
Teorinya, buat request ke luar blog sesedikit mungkin. Namun karena blog ini memakai layanan Blogger, saya tidak mungkin memasang font awesome pada server. Jadi, satu-satunya cara jika tidak ingin menggunakan layanan dari luar adalah dengan menyisipkan SVG ke template.
Menyisipkan SVG ke template blog juga akan menimbulkan masalah baru, yakni ukuran template akan membengkak yang tentunya akan semakin besar pula berkas HTML yang harus diunduh pembaca. Namun pembesaran ukuran ini, tergantung gambar SVG yang akan ditempelkan, tidaklah seberapa, dan bisa kita akali dengan meringkas (minifying) template Blogger-nya.

Nah, karena telah memilih untuk menempelkan gambar SVG, kini tinggal mencari sumber gambarnya. Mencari gambar untuk blog lumayan susah, dan lebih pelik karena mesti memerhatikan lisensi gambarnya.
Beruntung, selain menyediakan content delivery network dan versi berbayar, font awesome juga bermurah hati memberikan kumpulan ikon yang bisa diunduh secara gratis.

Namun kini dijumpai masalah baru, logo yang saya inginkan ternyata tidak tersedia di dalam berkas unduhan dari font awesome. Logo yang saya inginkan adalah logo media sosial tertentu yang berada di dalam cincin. Logonya sih ada, dan cincinnya juga ada. Ternyata logo berlingkar cincin sebagaimana yang sering dijumpai di banyak blog itu menggunakan teknik stacking gambar oleh skrip font awesome. Dan karena saya tidak ingin menggunakan skrip tersebut, jadinya mesti mencari cara lain untuk mencapai hasil serupa.

Setelah mencari, membaca dan bertanya ke sana ke mari, akhirnya ditemukan cara yang relatif mudah; yakni dengan menggabungkan dua gambar menjadi satu gambar sesuai yang dikehendaki.
Jadi, berikut ini bagaimana cara menggabungkan dua atau lebih gambar SVG menjadi satu. Dicontohkan menggabungkan logo telegram-plane dan circle.

   +      =   

Langkah paling awal tentunya mengunduh kumpulan logo dari font awesome, misal versi fontawesome-free-5.0.2.zip, kemudian extract. Berkas SVG yang akan digunakan sebagai contoh, yakni circle.svg, dapat ditemukan di fontawesome-free-5.0.2/advanced-options/raw-svg/regular/circle.svg, dan telegram-plane.svg, dapat ditemukan di fontawesome-free-5.0.2/advanced-options/raw-svg/brands/telegram-plane.svg.
Selanjutnya, silakan ikuti langkah demi langkah di bawah ini.

Menggabungkan gambar vector SVG menggunakan penyunting teks

SVG pada dasarnya adalah berkas teks dalam bentuk XML, jadi ia bisa dibuka oleh sembarang penyunting teks.
Berikut cara menggabungkan dua gambar SVG menggunakan penyunting teks.

  1. Buka logo circle menggunakan penyunting teks. Isinya akan tampak serupa berikut:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/></svg>
  2. Buka logo telegram-plane pada tab lain di penyunting teks. Isinya akan serupa berikut:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/></svg>
  3. Untuk menggabungkan logo circle dan telegram-plane tersebut, kita hanya perlu untuk menggabungkan string yang berada di dalam tag <path>. Misalnya, kita salin <path> dari telegram-plane ke berkas SVG circle hingga hasil akhirnya menjadi seperti berikut:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/>
      <path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/>
    </svg>

    Jika menginginkan agar tiap <path> terisolasi satu dengan lainnya, maka kita masukkan tiap <path> tersebut ke dalam grup.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <g>
    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/>
  </g>
  <g>
    <path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/>
  </g>
</svg>

Ulangi langkah ketiga sebanyak gambar yang hendak digabung.
Mudah kan?
Memang mudah dan sederhana. Namun kadang hasilnya tidak sesuai dengan yang diangankan, seperti penggabungan langkah 1 dan 2 di atas yang hasilnya tampak seperti di bawah ini.

Seperti tampak pada gambar di atas, logo Telegram-nya terlalu besar dan akhirnya "menabrak" logo cincin. Sejauh ini saya belum mengetahui bisa atau tidaknya kita mengubah ukuran gambar SVG dengan cara menyuntingnya melalui penyunting teks.
Jadi, jika perlu untuk menggabungkan gambar SVG yang memerlukan pengolahan lanjutan, sebaiknya menggunakan piranti lunak khusus untuk mengolah berkas vector. Misalnya Inkscape, seperti yang akan ditunjukkan di bawah ini.

Menggabungkan gambar vector SVG menggunakan inkscape

  • Buka logo circle menggunakan inkscape.
  • Tambahkan logo telegram-plane dengan melakukan copy-paste ke jendela inkscape, atau dengan mengimpornya dari menu File ➜ Import... atau dengan menekan bersamaan tuts keyboard CTRL dan I.
  • Atur kesesuaian letak layer yang baru kita tambahkan tadi terhadap layer di bawahnya dengan menggunakan menu Object ➜ Align and Distribute (SHIFT+CTRL+A).
  • Atur ukuran gambar yang diinginkan dengan menggunakan fitur Transform yang dapat diakses melalui Object ➜ Transform... (SHIFT+CTRL+M) dan selanjutnya pilih tab Scale.
  • Sampai di sini proses penggabungan telah selesai dan gambar baru bisa disimpan menggunakan File ➜ Save as... (SHIFT+CTRL+S). Agar ukuran berkasnya lebih ramping, pilih format Plain SVG.

Akhirnya, dengan cara ini logo pun bisa dibuat sesuai dengan yang diinginkan.

That's it folks!
Mungkin nanti saya buat artikel lanjutan, tentang bagaimana menyisipkan gambar SVG di artikel blog dan template Blogger. Artikel kali ini saya sudahi sampai di sini, jangan ragu untuk menyampaikan ralat dan saran. Thanx for reading...