Dibuat pusing sama SVG Path element

Sebenarnya tulisan ini saya siapkan sudah sejak lama, tapi baru malam ini -10 Januari 2021- bisa saya selesaikan dan saya publish. -Males-, ya itulah alasannya jika saya sedang tidak ingin membuat-buat alasan mengapa halaman blog ini sangat tidak produktif. Mungkin jika blog ini tidak saya pasang domain berbayar (halah, bayar domain 60ribu setahun aja lho pake disebut-sebut berbayar :P), mungkin blog ini ditinggalkan juga oleh pemiliknya seperti blog-blog lain yg bertebaran di luar sana. Lagian, saya juga sadar diri bahwa pengunjung blog ini juga sedikit tidak ada, jadi saya pun menulis ini juga untuk diri saya sendiri.

Github.com

Jadi, akhir-akhir ini saya kan lagi seneng ngoprek web, baik itu website pribadi saya, bikin toko online milik istri, juga web untuk di kerjaan (meskipun job saya sebenarnya bukan di web development). Karena sering ngoprek web itu saya jadi nyemplung ke github, lalu lihat-lihat beberapa repository yg kira-kira bisa saya pake di kerjaan saya atau mungkin juga buat website pribadi saya. Ada banyak repo yg bagus tapi saat ini saya tertarik pada 2 repo: yg pertama adalah Android-SmartWebView dan repo yg kedua adalah besrourms.github.io.

Repo yg pertama adalah aplikasi android untuk mengemas website menjadi aplikasi android, dan repo yg kedua adalah personal website milik seorang web-developer Mohamed Safouan Besrour. Untuk yg pertama tidak akan saya bahas kali ini, kalo nggak males akan saya tulis di lain kesempatan.

besrourms.github.io

Repo besrourms.github.io ini menarik bagi saya karena dengan memanfaatkan HTML & CSS, MS Besrour bisa membuat animasi untuk personal website-nya. Belum pernah saya mengunjungi website sebagus ini, dan saya ingin menggunakannya juga untuk memperkenalkan diri saya di halaman personal website saya tentu dengan beberapa modifikasi.

Namun ada dua baris kode HTML yg membuat saya bingung,

<li>
    <a class="instagram" href="https://instagram.com/besrourms/" rel="noopener noreferrer external" target="_blank">
    <svg clip-rule="evenodd" fill-rule="evenodd" fill="currentColor" stroke-linejoin="round" stroke-miterlimit="1.414" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z">
    </path></svg>
    </a>
</li>

Yg saya tau bahwa baris code di atas berfungsi untuk menampilkan link & logo Instagram, namun saya tidak tahu bagaimana logo IG tersebut bisa muncul padahal hanya dengan baris code html tanpa berisi sebuah alamat image URL dari logo IG. Hmm...lalu bagaimana caranya mengubah logo IG itu menjadi logo Blogger dan menautkan link alamat blog saya ini?  

Karena saya penasaran dengan HTML tag <svg> dan <path>,  langsung saja browser saya arahkan ke Google dan membawa saya ke sebuah halaman dokumentasi milik Mozilla Developer web yg berisi tutorial lengkap mengenai SVG Path. 

Tapi...rasanya tidak mungkin kalau saya harus membuat gambar logo Blogger dengan menuliskan semua attribute path-nya, apa ada cara yg lebih masuk akal untuk saya kerjakan?

Setelah ngubek-ubek Stackoverflow, akhirnya saya menemukan pencerahan. Inkscape, ternyata adalah jawabannya. Langsung saja saya cari logo Blogger dalam format svg, kemudian saya edit dalam Inkscape hingga hanya ada satu object path. Kemudian saya simpan dalam format file svg.

Edit logo Blogger menggunakan Inkscape

Selanjutnya, file logo Blogger svg hasil editan menggunakan Inkscape tadi saya buka menggunakan text editor. Tinggal saya ambil baris atribute d= yg terdapat dalam element <path>, kemudian saya copykan ke dalam baris code HTML di atas. Done.

VScode