Dasar Atribut Tagging svg Pada Bahasa Pemrograman HTML

Dasar Atribut Tagging <svg> Pada Bahasa Pemrograman HTML

Jokam-Informatika.com - Mungkin sobat tidak tidak sangat familiar dengan tag ini bukan ? Bagi sobat yang suka sekali dengan editor foto mungkin bisa saja dengan sekedar menebak apa fungsi dari tag ini, karena tag ini berkaitan erat dengan grafis layaknya Corel Draw ataupun Adobe Photoshop. Akan tetapi tag ini difungsikan untuk sebuah halaman, sehingga anda bisa berkarya meskipun tidak pada aplikasi gambar editor melainkan pada halaman website.

Seperti apakah fungsi dari Tagging Svg pada HTML ?

Simak ulasan berikut ini untuk mengetahuinya,

Svg - Adalah salah satu tag yang berlaku pada pemrograman HTML dan memiliki fungsi untuk membuat gambar bentuk 2 dimensi diantaranya adalah Persegi, Persegi Panjang, Trapesium, Jajar Genjang, Lingkaran, Bintang, Layang-Layang, Belah Ketupat dan lain sebagainya yang dapat anda buat menggunakan Tag ini. Selain itu anda juga bisa mendesain logo gambar anda menggunakan metode warna SVG, maka anda akan menjumpai logo anda sendiri didalam halaman website. Akan tetapi untuk membuat sebuah logo diperlukan komposisi warna dan penarikan garis warna yang akurat sehingga gambar anda tidak menjadi berantakan. Meski adanya kesulitan tersebut, apabila anda mempelajarinya dengan sungguh-sungguh niscaya hasil yang anda peroleh bisa lebih spektakuler.

Pada tag ini, komposisi matematika sangat dibutuhkan karena bangun 2 dimensi paling berkaitan erat dengan titik dan sudut. Maka untuk menentukan titik dan sudut dibutuhkanlah angka dan juga suduh "X" dan "Y" sebagai titik potong atau garis.

Apabila sobat ingin menerapkannya pada website kalian maka sobat dapat mempelajari cara pengkodean di bawah ini :

Syntax :

<svg> Komposisi Bangun </svg>

Penerapan Syntax Lingkaran :

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4"
fill="yellow" />
</svg>

Penerapan Syntax Persegi Tumpul :

<svg width="400" height="180">
 <rect x="25" y="25" rx="25" ry="25" width="100" height="100"
style="fill:blue;stroke:black;stroke-width:5;opacity:0.8" />
</svg>

Penerapan Syntax Persegi Panjang :

<svg width="400" height="100">
 <rect width="400" height="100" style="fill:rgb(0,255,255);stroke:rgb(0,0,0);stroke-width:5"
/>
</svg>

Penerapan Syntax Bintang :

<svg width="300" height="200">
 <polygon points="100,10 40,198 190,78 10,78 160,198"
 style="fill:lime;stroke:blue;stroke-width:5;" />
</svg>

Penerapan Syntax Contoh Logo SVG :

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(10,255,0);stop-opacity:1" />
 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#FFFFFF" font-size="60" font-family="Times New Romans" x="40"
y="90">SVG</text>
</svg>

Ingin mencobanya ?
Klik disini : JALANKAN CODE



Mungkin itu yang dapat saya sampaikan didalam artikel saya yang berjudulkan Dasar Atribut Tagging <svg> Pada Bahasa Pemrograman HTML.
Semoga apa yang sudah saya sampaikan dapat bermanfaat bagi anda maupun orang lain yang ingin mengetahui tentang Tagging <svg> pada HTML.
Sekian dan terimakasih.