Jumat, September 06, 2019

HTML SVG dasar

Apa itu SVG?
satu, SVG merupakan akronim dari scalable vector graphics.
dua, Secara dasar mendefinisikan grafik berbasis vector dalam format XML.
tiga, SVG grafik tidak kehilangan kualitas apapun jika ukurannya diperbesar (zoom) ataupun dilakukan pelenturan (resized).
empat, Setiap elemen dan setiap atribut pada SVG file dapat dianimasikan.

Apakah keunggulan dari SVG?
satu, Gambar berbasis SVG dapat dibuat dan di-edit dengan menggunakan berbagai jenis teks editor.
dua, Gambar berbasis SVG dapat dilakukan search, indexed, scripted, dan kompresi.
tiga, Gambar dapat terukur dengan baik.
empat, Gambar dapat dicetak dengan kualitas tinggi pada resolusi apapun.

Perbedaan antara SVG HTML dan HTML Canvas
satu, SVG adalah sebuah bahasa pemrograman untuk mendeskripsikan 2D dalam XML dimana Canvas menggambar grafik dalam bentuk 2D dengan menggunakan JavaScript.
dua, Jika atribut dari objek SVG berubah, browser secara otomatis melakukan rendering ulang bentuk grafik dimana Canvas melakukan rendering pixel oleh pixel.in canvas.
tiga, Resolusi SVG berdiri sendiri (independent) sementara CANVAS tidak memiliki dukungan terhadap penanganan tersebut.

Menggambar sebuah lingkaran SVG pada HTML

Contoh:
Output:
Menggambar lingkaran dengan menggunakan svg dasar html
Gambar 1 SVG lingkaran

Menggambar sebuah persegi panjang SVG pada HTML

input:
Output:
menggambar persegi panjang dengan menggunakan svg html
Gambar 2 SVG persegi panjang

Menggambar sebuah SVG Persegi dengan sudut melingkar pada HTML

Contoh:
Output:
menggambar persegi dengan sudut melingkar menggunakan svg dasar html
Gambar 3 SVG persegi dengan sudut melingkar

Menggambar sebuah bintang SVG pada HTML

contoh:
Output:
menggambar svg bintang dengan menggunakan laman html

Gambar 4 SVG bintang

Menggambar sebuah logo HTML menggunakan SVG

contoh:
Output:
menggambar logo dengan menggunakan svg dasar pada html
Gambar 5 SVG logo





Tidak ada komentar:

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D

Footer Adsense