Assalamualaikum wr.wb.
SVG merupakan Akronim Dari Scaleable Vector Graphics, arti sederhananya adalah format gambar yang bisa dirubah-ubah tanpa
mengganggu resolusi gambar tersebut, SVG dibuat menggunakan XML dan bisa dicustom dengan menggunakan CSS. SVG digunakan sebagai alternatif penggunaan Image JPEG/PNG ataupun GIF.
berikut dasar-dasar SVG
Rectangle (Persegi)
digunakan untuk membuat gambar berupa persegi ataupun persegi panjang.
<!doctype html>
<html lang="en">
<head>
<title> Tutorial SVG </title>
<style>
rect{
fill:yellow;
stroke-width:4;
stroke:#000;
}
</style>
</head>
<body>
<svg>
<rect height="200" width="100"/>
</svg>
</body>
</html>
penjelasan :
fill warna latar (background)
stroke warna garis tepi
stroke-width ketebalan garis tepi
Circle (Lingkaran)
digunakan untuk membuat lingkaran.
<!doctype html>
<html lang="en">
<head>
<title> Tutorial SVG </title>
<style>
circle{
stroke:black;
stroke-width:10;
fill:green;
}
</style>
</head>
<body>
<svg height="200" width="200">
<circle cx="60" cy="60" r="50"/>
</svg>
</body>
</html>
Penjelasan:
cx kordinat sumbu x
cy kordinat sumbu y
r diameter dari lingkaran
Polygon (Segitiga)
digunakan untuk membuat segitiga
<!doctype html>
<html lang="en">
<head>
<title> Tutorial SVG </title>
<style>
polygon{
stroke-width:4;
stroke:#000;
fill:pink;
}
</style>
</head>
<body>
<svg height="400" width="300">
<polygon points="200,10 250,190 160,210" />
</svg>
</body>
</html>
points kordinat sumbu x dan sumbu y untuk masing-masing sudut
Line (Garis)
digunakan untuk membuat garis
<!doctype html>
<html lang="en">
<head>
<title> Tutorial SVG </title>
<style>
line{
stroke-width:4;
stroke:#000;
}
</style>
</head>
<body>
<svg>
<line x1="10" y1="20" x2="30" y2="100" />
</svg>
</body>
</html>
x1 kordinat sumbu x pertama
y1 kordinat sumbu y pertama
x2 kordinat sumbu x kedua
y2 kordinat sumbu y kedua
Text (Tulisan)
digunakan untuk membuat tulisan.
<!doctype html>
<html lang="en">
<head>
<title> Tutorial SVG </title>
<style>
text{
stroke:green;
}
</style>
</head>
<body>
<svg>
<text x="0" y="50"> Text via SVG </text>
</svg>
</body>
</html>
dari beberapa tutorial diatas kita dapat menggabungkannya sesuai kebutuhan.
ok sekian tutorial dari saya.
Trima Kasih
Wassalamualaikum. wr.wb
