Section separator merupakan salah satu hal yang biasanya dipergunakan untuk membuat halaman desain web anda lebih menarik. Untuk membuat section separator, anda dapat memanfaatkan generator online seperti Shape Divider. Namun kekurangannya adalah anda tidak dapat membuat separator tersebut benar-benar seperti yang anda inginkan. Anda hanya disuguhkan dengan separator bawaan dari generator tersebut.

Nah dalam artikel ini, saya akan menyajikan cara membuat section separator yang dapat anda custom sendiri bentuk dan warnanya menggunakan salah satu format vector yaitu svg. Sebenarnya ada banyak cara yang dapat anda pergunakan, namun saya lebih sering menggunakan format vector karena lebih mudah dalam customisasinya.

Persiapan

Sebelum memulai, anda diwajibkan untuk sudah memiliki aplikasi yang dapat digunakan untuk memanipulasi file svg. Anda dapat menggunakan Adobe Illustrator atau Inkscape. Dalam artikel ini, saya akan menggunakan Inkscape. Selain itu, anda juga sudah harus terbiasa menggunakan html dan css. Nah apabila sudah terpenuhi, anda dapat lanjut ke tahap selanjutnya.

Membuat Separator SVG

Tahap pertama, anda harus membuat bentuk separator yang anda inginkan. Buka aplikasi Inkscape kemudian mulailah dengan project baru.

Klik pada tombol Create Rectangle and Square pada sidebar. Kemudian buatlah sebuah kotak dengan tools tersebut.

Anda dapat mewarnai kotak tersebut dengan warna random untuk sementara. Selanjutnya, Convert Object tersebut menjadi Path dengan cara menekan object tersebut kemudian pilih menu Path → Object to Path. Tujuan dari konversi ini adalah agar anda dapat mengubah-ubah bentuk dari kotak yang telah anda buat.

Untuk mengubah bentuk kotak tersebut, anda dapat menggunakan fitur Edit Path by Nodes.

Atur bentuk kotak tersebut sesuai yang anda inginkan, sebagai contoh saya akan membuat bentuk dari separator saya menjadi seperti berikut.

Sampai disini, anda sudah memiliki bentuk separator yang anda inginkan. Tahap selanjutnya adalah pewarnaan. Ganti warna dari bentuk tersebut sesuai dengan warna background dari website anda. https://inkscape-manuals.readthedocs.io/en/latest/color.html

Saya akan mewarnai separator tersebut dengan warna abu muda seperti berikut

Ubah ukuran dokumen dari project ini sesuai dengan ukuran object tersebut, dengan menggunakan menu File → Document Properties atau menggunakan shortcut Ctrl + Shift + R sehingga project akhir vector anda akan berbentuk seperti ini

Apabila sudah seperti demikian, anda tinggal menyimpannya dalam bentuk svg.

Menambahkan Code HTML

Setelah separator berhasil disimpan dalam bentuk svg, saatnya anda memasukannya ke html anda. Caranya, buka file *.svg yang telah anda buat, dengan menggunakan editor code seperti vscode. Kurang lebih file yang ditampilkan adalah seperti berikut

<svg
   width="252.06961mm"
   height="70.412544mm"
   viewBox="0 0 252.06961 70.412544"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
   sodipodi:docname="drawing.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
...
...
...

Dari sini, copy seluruh code yang tampil dari file *.svg tersebut ke html tempat anda akan menambahkan section separator. Atur juga property width menjadi 100% dan hilangkan property height dalam tag

<section class="feature">
    <!-- Contoh Kenapa anda harus memilih saya? -->
</section>

<svg
width="100%"
viewBox="0 0 252.06961 34.631702"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
    id="namedview7"
    pagecolor="#ffffff"
    bordercolor="#999999"
    borderopacity="1"
    inkscape:pageshadow="0"
    inkscape:pageopacity="0"
    inkscape:pagecheckerboard="0"
    inkscape:document-units="mm"
    showgrid="false"
    inkscape:zoom="0.49976852"
    inkscape:cx="880.40759"
    inkscape:cy="-27.012506"
    inkscape:window-width="1366"
    inkscape:window-height="704"
    inkscape:window-x="0"
    inkscape:window-y="0"
    inkscape:window-maximized="1"
    inkscape:current-layer="layer1" />
<defs
    id="defs2" />
<g
    inkscape:label="Layer 1"
    inkscape:groupmode="layer"
    id="layer1"
    transform="translate(14.346254,-185.36395)">
    <path
    id="rect31"
    style="fill:#f9fafb;fill-opacity:1;stroke-width:0.264999;stroke-linecap:square;paint-order:markers stroke fill"
    d="M -14.346254,185.36395 H 237.72336 v 22.09361 c -80.05846,48.48596 -188.750799,-63.79252 -252.069614,0 z"
    sodipodi:nodetypes="ccccc" />
</g>
</svg>

<section class="portolio">
    <!-- Contoh PORTFOLIO -->
</section>

Hasil akhir dari project ini adalah sebagai berikut:

Penutup

Nah, seperti itu kira-kira cara untuk membuat custom section separator pada project html anda menggunakan svg. Kelebihan dari penggunakan svg adalah, apabila halaman anda diperbesar sedemikian rupa, separator anda tidak akan menjadi blur. Hal ini dikarenakan svg adalah salah satu format vector. Ukuran file dalam penggunaan svg relatif lebih kecil dibanding menggunakan format gambar seperti jpg dan png.

Sekian yang dapat sampaikan untuk artikel kali ini, akhir kata saya ucapkan terimakasi.