Cara menggunakan svg html

Halo, selamat datang di Idetips. Saya sebelumnya telah membahas SVG. Grafik Vektor yang Dapat Diskalakan. Pada artikel kali ini saya akan membahas cara membuat gambar SVG (Scalable Vector Graphic) menggunakan text editor

Untuk membuat gambar SVG menggunakan text editor anda hanya membutuhkan software text editor seperti Notepad, Notepad++, Visual Studio Code dan lain-lain, namun pada artikel ini kita praktek menggunakan Notepad. Untuk memulai, mari kita coba mulai membuat gambar lingkaran menggunakan Notepad

Sekarang buka Notepad, lalu masukkan kode berikut

lalu klik File > Save As atau gunakan shortcut Ctrl+Shift+S lalu isi nama file dengan format [judul-gmabar]. svg kemudian Simpan

Jika sudah selesai sekarang buka file yang sudah disimpan tadi menggunakan browser dan lihat hasilnya

Kami telah berhasil membuat gambar lingkaran menggunakan Notepad. Selanjutnya mari kita pelajari struktur dan elemen SVG untuk dapat membuat bentuk selain lingkaran menggunakan text editor

Struktur dan elemen SVG

Struktur SVG

Struktur SVG hampir mirip dengan format HTML, hanya elemen grafik tertentu yang ditambahkan. Kode SVG ditulis di antara tag dan

Dalam sintaks SVG kita juga dapat memasukkan parameter atau CSS sebagai atribut tag, spasi atau koma dapat digunakan sebagai pemisah, titik digunakan sebagai pemisah desimal dan warna dalam SVG ditentukan menggunakan heksadesimal

Beberapa atribut svg yang akan sering digunakan antara lain height untuk mengatur tinggi elemen, width untuk mengatur lebar elemen, x untuk mengatur koordinat x, y untuk mengatur koordinat y, atribut isi CSS untuk mengatur warna dari elemen, atribut stroke CSS untuk mengatur warna border pada elemen dan atribut CSS stroke-width yang berfungsi untuk mengatur ketebalan border. Untuk atribut lainnya silahkan lihat https. // pengembang. mozilla. org/en-US/docs/Web/SVG/Attribute/stroke-width

elemen SVG

Ada banyak elemen SVG, namun disini saya hanya akan membahas elemen dasar yang digunakan untuk membuat objek seperti persegi panjang, lingkaran, elips, garis, poligon, polyline dan path. Anda dapat melihat elemen lainnya di https. // pengembang. mozilla. org/en-US/docs/Web/SVG/Element

1. Persegi panjang {#rect}

Persegi panjang digunakan untuk membuat objek persegi. Untuk membuat persegi panjang Anda dapat menggunakan tag;

Atribut wajib

• width digunakan untuk mengatur lebar persegi
• tinggi digunakan untuk mengatur lebar persegi

Contoh

Hasilnya seperti ini

2. Lingkari {#lingkaran}

Lingkaran digunakan untuk membuat objek lingkaran. Untuk membuat lingkaran, Anda dapat menggunakan tag

Atribut wajib

• cx dan cy digunakan untuk mengatur koordinat x dan y dari pusat lingkaran
• r digunakan untuk mengatur jari-jari lingkaran

Contoh

Hasilnya seperti ini

3. Elips {#elips}

Ellipse digunakan untuk membuat elips. Untuk membuat elips Anda dapat menggunakan tag

Atribut wajib

• cx dan cy digunakan untuk mengatur koordinat x dan y dari pusat elips
• rx dan ry digunakan untuk mengatur radius x dan radius y elips

Contoh

Hasilnya seperti ini

4. Baris {#baris}

Garis digunakan untuk membuat garis. Untuk membuat garis Anda dapat menggunakan tag

Atribut wajib

• x1 digunakan untuk mengatur posisi titik awal garis pada sumbu x
• y1 digunakan untuk mengatur posisi titik awal garis pada sumbu y
• x2 digunakan untuk mengatur posisi titik akhir garis pada sumbu x
• y2 digunakan untuk mengatur posisi titik akhir garis pada sumbu y

Contoh

Hasilnya seperti ini

5. Polilin {#polilin}

Polyline digunakan untuk membuat objek yang terdiri dari beberapa baris. Untuk membuat polyline Anda dapat menggunakan tag

Atribut wajib

• titik digunakan untuk menentukan titik koordinat (titik x pertama, titik y pertama, titik x kedua, titik y kedua, dst. )

Contoh

Hasilnya seperti ini

6. Poligon {#poligon}

Polygon digunakan untuk membuat objek poligonal seperti segitiga, segi lima dan lain-lain. Untuk membuat poligon, Anda dapat menggunakan tag

Atribut wajib

• titik digunakan untuk menentukan titik koordinat (titik x pertama, titik y pertama, titik x kedua, titik y kedua, dst. )

Contoh

Hasilnya seperti ini

7. Jalur {#jalur}

Path digunakan untuk membuat objek dengan bentuk bebas. Path adalah salah satu elemen SVG yang paling banyak digunakan dan juga paling rumit. Untuk membuat jalur, Anda dapat menggunakan tag

Atribut wajib

• d atribut data yang terdiri dari
  • M (moveto) digunakan untuk menentukan titik awal suatu lintasan. Sintaks Mx,y
  • L (lineto) digunakan untuk menggambar garis ke koordinat yang ditentukan. Sintaks L x, y
  • H (garis mendatarto) digunakan untuk membuat garis lurus mendatar di titik x. Sintaks Hx
  • V (vertical lineto) digunakan untuk membuat garis lurus vertikal di titik y. Sintaks V y
  • C (curveto) digunakan untuk membuat kurva. Sintaks C x1 y1, x2 y2, x y
  • S (smooth curveto) digunakan untuk membuat kurva mulus dari kurva extended C Sintaks S x2 y2, x y
  • Q (quadratic Bezier curve) fungsinya sama dengan C, Q digunakan ketika x1 y1 dan x2 y2 berada di titik yang sama. Sintaks Q x1 y1, x y
  • T (smooth quadratic Bezier curveto) digunakan untuk membuat kurva mulus dari kurva Q yang diperluas. Sintaks T x y
  • A (busur elips) digunakan untuk membentuk busur. Sintaks A rx ry x-axis-rotation large-arc-flag x y
  • Z (closepath) digunakan untuk menutup path. Sintaks Z

Contoh

Hasilnya seperti ini

Menggunakan properti lebar dan tinggi pada tag elemen akan membuat ukuran svg tidak responsif. Untuk membuatnya responsif sebaiknya ubah properti width dan height menjadi viewBox, parameter viewbox seperti ini viewBox = min-x min-y width height

Itulah beberapa contoh penggunaan elemen di SVG diatas. Segala sesuatu di atas hanyalah bagian paling dasar dari SVG. Untuk mempelajari lebih lanjut tentang SVG, silakan kunjungi https. // pengembang. mozilla. org/en-US/docs/Web/SVG/

Apa itu SVG dalam HTML?

Format SVG dibuka dengan apa?

Apa keuntungan menggunakan SVG?

Apa itu aplikasi SVG?