Pinned

Fungsi SVG pada HTML

SVG merupakan akronim dari scalable vector graphics yang mendefinisikan grafik berbasis vector dalam format XML. SVG grafik tidak kehilangan kualitas apapun jika ukurannya diperbesar (zoom) ataupun dilakukan pelenturan (resized) dan setiap elemen dan setiap atribut pada SVG file dapat dianimasikan.

5 Contoh Program Penggunaan SVG Dasar pada HTML
Ilustrasi SVG Dasar HTML

Sebelum memahami lebih dalam materi tentang Fungsi SVG pada HTML, terlebih dahulu pelajari materi tentang: Daftar URL Encoding pada HTML [klik], Tag Usang Deprecated pada HTML [klik], dan Membuat Hyperlink pada HTML [klik].

Keunggulan dari SVG
  • Gambar berbasis SVG dapat dibuat dan di-edit dengan menggunakan berbagai jenis teks editor.
  • Gambar berbasis SVG dapat dilakukan searchindexedscripted, dan kompresi.
  • Gambar dapat terukur dengan baik.
  • Gambar dapat dicetak dengan kualitas tinggi pada resolusi apapun.

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

Menggambar Sebuah Lingkaran SVG pada HTML:

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="200" 

height="200">

 

<circle 

cx="80" 

cy="80" 

r="50"

stroke="black" 

stroke-width="2" 

fill="grey" />

 

</svg>

 

</body>

 

</html>

Output:

Menggambar Sebuah Persegi Panjang SVG pada HTML:

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="400" 

height="100">

 

<rect 

width="400" 

height="100"

style=

"fill:rgb(0,0,255);

stroke-width:10;

stroke:rgb(0,0,0)

/>

 

</svg>

 

</body>

 

</html>

Output:


Menggambar Sebuah SVG Persegi dengan Sudut Melingkar pada HTML:

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="400" 

height="380">

 

<rect 

x="80" 

y="20" 

rx="20" 

ry="20" 

width="150" 

height="150"

style=

"fill:orange;

stroke:black;

stroke-width:2;

opacity:0.5

/>

 

</svg>

 

</body>

 

</html>

Output:

Menggambar Sebuah Bintang SVG pada HTML:

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

width="300" 

height="200">

 

<polygon 

points=

"100,10 40,198 190,78 10,78 160,198"

 

style=

"fill:grey;

stroke:orange;

stroke-width:5;

fill-rule:evenodd;

/>

 

</svg>

 

</body>

 

</html>

Output:

Menggambar Sebuah Logo HTML Menggunakan SVG:

<!DOCTYPE html>

<html>

 

<body>

 

<svg 

height="300" 

width="700">

 

<defs>

<lineargradient 

id="grad1" 

x1="0%" 

y1="0%" 

x2="100%" 

y2="0%">

 

<stop 

offset="0%"

style=

"stop-color:white;

stop-opacity:1"/>

 

<stop 

offset="100%"

style=

"stop-color:green;

stop-opacity:1"/>

</linearGradient>

</defs>

 

<ellipse 

cx="200" 

cy="100" 

rx="120" 

ry="80" 

fill="url(#grad1)"/>

 

<text 

fill="#ffffff" 

font-size="22" 

font-family="ARIAL"

x="120" 

y="110">

ElfanMauludi

</text>

</svg>

 

</body>

 

</html>

Artikel ini didedikasikan kepada: Ardima Miftaqul Aini, Asti Pangestu, Ayu Putri Kurniasari, Bagas Adi Pamungkas, dan Delyana Sukahar.

6 komentar:

  1. Apa kegunaan SVG pada html?

    BalasHapus
    Balasan
    1. SVG merupakan singkatan dari scalable vector graphics yang merupakan format file yang digunakan untuk menampilkan gambar vector pada situs web pribadi. Dengan menggunakan SVD, maka user memiliki kemampuan untuk menskalakan gambar SVG sesuai kebutuhan tanpa harus kehilangan kualitas dari grafik tersebut, dan menjadikannya pilihan yang tepat untuk perancangan website responsif.

      Hapus
  2. Apa yang dimaksud dengan element SVG pada HTML?

    BalasHapus
    Balasan
    1. Elemen SVG merupakan wadah yang mendefinisikan sistem koordinat dan viewport baru pada HTML. Elemen ini digunakan sebagai elemen terluar dari dokumen SVG, namun juga tetap dapat digunakan untuk menyematkan fragmen SVG pada dokumen SVG itu sendiri ataupun HTML.

      Hapus
  3. Apa kekurangan dari SVG pada html?

    BalasHapus
    Balasan
    1. 1. Karena SVG didasarkan pada titik dan jalur, bukan pixel, maka SVG tidak dapat menampilkan detail format untuk standar gambar atau photo.

      2. SVG tidak dapat berfungsi pada browser tipe lama. Seperti pada browser IE8 dan atau untuk tipe yang lebih rendah, SVG tidak bisa menampilkan apapun pada browser dengan spesifikasi tersebut.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -