{"id":2630,"date":"2023-08-31T23:14:22","date_gmt":"2023-08-31T16:14:22","guid":{"rendered":"https:\/\/student-activity.binus.ac.id\/himmat\/?p=2630"},"modified":"2023-08-31T23:14:22","modified_gmt":"2023-08-31T16:14:22","slug":"scalable-vector-graphics-svg-file","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/himmat\/2023\/08\/scalable-vector-graphics-svg-file\/","title":{"rendered":"Scalable Vector Graphics (SVG) File"},"content":{"rendered":"

\u00a0 \u00a0 \u00a0Kita semua mengenal istilah gambar. Gambar memiliki dua tipe, yaitu raster dan vektor. Gambar yang berupa raster umumnya berasal dari hasil yang diambil menggunakan kamera. Sedangkan, gambar yang berupa vektor umumnya gambar yang dapat mempertahankan kualitasnya ketika terjadi skalabilitas. Terdapat perbedaan yang cukup signifikan antara kedua tipe gambar tersebut. Berikut adalah perbedaan antara kedua tipe gambar:<\/span><\/p>\n

\"\"<\/a><\/p>\n

\u00a0 \u00a0 \u00a0Pada saat kedua gambar dilihat dengan diperbesar resolusinya sampai maksimal, gambar bertipe raster akan kehilangan kualitasnya atau buram karena gambar tersebut terdiri dari kumpulan piksel. Sedangkan, gambar bertipe vektor akan tetap menjaga kualitasnya sederhananya dikarenakan digunakannya perhitungan matematika. Jika membandingkan format file<\/em> pada kedua tipe gambar, raster umumnya terdiri dari .PNG, .JPG, .JPEG, .GIF dan vektor umumnya berformat .SVG.\u00a0<\/span><\/p>\n

\u00a0 \u00a0 \u00a0Ketika membuat illustrasi, logo, animasi, ikon website, peta, pemodelan interaktif, atau gambar-gambar dua dimensi yang perlu dirender pada internet, pastinya menjaga kualitas gambar menjadi penting. Untuk itu, format file<\/em> .SVG menjadi populer, terutama di kalangan pengembang website<\/em> dan desain grafis. Selain kemampuanya menjaga kualitasnya saat resolusi diperbesar sampai maksimal (scalable), format file<\/em> .SVG juga memiliki keuntungan lainya, seperti ukuran file<\/em> yang tidak sebesar raster ketika diskalakan ke ukuran berapapun.\u00a0<\/span><\/p>\n

\u00a0 \u00a0 \u00a0Scalable Vector Graphics<\/span><\/em> atau yang biasa disingkat dengan SVG File merupakan vektor grafik yang menggunakan bahasa markup XML, artinya suatu gambar vektor merupakan representasi dari sebuah kode yang dapat dimanipulasi. Kode tersebut dapat dimanipulasi melalui text editor<\/em>. Berikut adalah contoh file<\/em> .SVG dalam bentuk kode XML<\/span> dari<\/span> Mozilla Developer Network<\/span><\/a>:<\/p>\n

\"\"<\/a><\/p>\n

Dari kode tersebut akan dihasilkan:<\/span><\/p>\n

\"\"<\/a><\/p>\n

\u00a0 \u00a0 \u00a0Selain itu, membuat gambar .SVG juga dapat menggunakan beberapa tools<\/em> atau software<\/em> yang berbasis vektor. Dua diantaranya, yaitu Adobe illustrator dan Figma. Format file<\/em> .SVG menjadi populer terutama pada pengembangan website<\/em> dan desain grafis yang memerlukan kualitas gambar yang terjaga pada saat resolusi diperbesar berapapun dengan ukuran file<\/em> yang kecil jika dibandingkan format gambar berbasis raster.\u00a0<\/span><\/p>\n

 <\/p>\n

Referensi:<\/strong><\/p>\n

https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG<\/span><\/a>\u00a0<\/span><\/p>\n

https:\/\/www.adobe.com\/creativecloud\/file-types\/image\/vector\/svg-file.html<\/span><\/a>\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u00a0 \u00a0 \u00a0Kita semua mengenal istilah gambar. Gambar memiliki dua tipe, yaitu raster dan vektor. Gambar yang berupa raster umumnya berasal dari hasil yang diambil menggunakan kamera. Sedangkan, gambar yang berupa vektor umumnya gambar yang dapat mempertahankan kualitasnya ketika terjadi skalabilitas. Terdapat perbedaan yang cukup signifikan antara kedua tipe gambar tersebut. Berikut adalah perbedaan antara […]<\/p>\n","protected":false},"author":15,"featured_media":2631,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[126,128,125,127],"class_list":["post-2630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-image","tag-raster","tag-svg","tag-vector"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/posts\/2630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/comments?post=2630"}],"version-history":[{"count":1,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/posts\/2630\/revisions"}],"predecessor-version":[{"id":2635,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/posts\/2630\/revisions\/2635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/media\/2631"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/media?parent=2630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/categories?post=2630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himmat\/wp-json\/wp\/v2\/tags?post=2630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}