Kenalan dengan SVG 🦠

TeknisTakis Mar 19, 2020
"Sebelum melangkah mari lah kita lihat kanan kiri dulu agar tidak tertabrak" -Mbah Toyib

Mbah Toyib pernah mengatakan itu kepada saya. Saat belum menjadi avatar yang kini beliau tak tahu berada dimana saat warga bikini atol membutuhkannya.

Untuk Mbah Toyib, jika melihat tulisan ini hubungi kami ya... atau bagi yang melihat Mbah Toyib beliau ciri cirinya berkulit putih, botak punya tato icon download biru di kepala dan lengannya kadang bisa bercahaya.

Mbah Toyib (1808)

Oke lanjut seperti qoute diatas sebelum kita melangkah ke membuat SVG langsung dan kenapa kita sebagai developer lebih baik memilih SVG nih, alangkah baiknya mari kita mencari tahu apa perbedaan raster dan vector dulu. bisa liat tabel di bawah ini.

Source: https://apaperbedaan.com/vector-dan-raster-bitmap/

Oke sekarang kita sudah tahu kan perbedaan dari raster dan vector. Nah SVG itu masuk salah satu format dari vector, kemudian contoh SVG seperti apa?

Source Wikipedia

Pengertian,perbedaan dan contoh udah. Dari beberapa penjelasan tadi sekarang pasti kalian tahu mengapa frontend developer lebih memilih .svg sebagai asset di templatenya.

yang support abang dev

Sekarang kita baru melangkah untuk membuat sebuah SVG sederhana menggunakan HTML5.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="blue" stroke-width="4" fill="cyan" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>
Contoh Tag HTML5 buat SVG

Kalau ingin buat dari software design juga bisa menggunakan AI,Photoshop, CorelDraw dan lain lain. kemudian save as .svg. Kemudian buka file .svg di text editor kalian untuk mengetahui hasilnya di browser.

Untuk SVG sekarang juga ada dimana dimana dan mudah didownload dari beberapa source contoh: Flaticon,Iconfinder,Undraw dan yang lain akan saya bahas di postingan selanjutnya. Matur nuwun 😄.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.