Fungsi SVG pada HTML
 |
| Ilustrasi SVG Dasar HTML |
- Gambar berbasis SVG dapat dibuat dan di-edit dengan menggunakan berbagai jenis teks editor.
- Gambar berbasis SVG dapat dilakukan search, indexed, scripted, 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.
<!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>
<!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>
<!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>
<!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>
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>
- Cara Sederhana Menggunakan Tag Article pada HTML5 [klik]
- Cara Mudah Mendeskripsikan Objek Menggunakan Tag Aside pada HTML5 [klik]
- Cara Membuat Teks Bidireksional Menggunakan Tag Tag Bdi HTML5 [klik]
- 2 Contoh Cara Memberikan Informasi Tambahan Menggunakan Tag Details HTML5 [klik]
- Cara Sederhana Menambahkan Kotak Dialog pada HTML5 [klik]
- 2 Contoh Cara Mudah Mengatur Figcaption HTML5 [klik]
- Cara Mudah Menambahkan Ilustrasi atau Foto Menggunakan Tag Figure HTML5 [klik]
Apa kegunaan SVG pada html?
BalasHapusSVG 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.
HapusApa yang dimaksud dengan element SVG pada HTML?
BalasHapusElemen 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.
HapusApa kekurangan dari SVG pada html?
BalasHapus1. Karena SVG didasarkan pada titik dan jalur, bukan pixel, maka SVG tidak dapat menampilkan detail format untuk standar gambar atau photo.
Hapus2. 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.