Singkatan dari Grafik Vektor Skalar, SVG adalah jenis file yang dibuat dan ditentukan oleh World Wide Web Consortium pada tahun 1999. Ini mendefinisikan grafik vektor yang statis, animasi, dan/atau interaktif, dan menggunakan XML sebagai struktur untuk perintah. SVG terintegrasi dengan DOM dan XSL.
Bagaimana cara kerja SVG?
SVG dibuat menggunakan koordinat x dan y untuk bentuk, garis, dan kurva. Gambar-gambar ini kemudian dapat digores dan/atau diisi dengan warna. Karena mereka didefinisikan secara matematis dan kemudian diskalakan untuk memenuhi dimensi yang diminta, gambar SVG tidak berubah dalam kejernihan dan ketajaman saat menjadi lebih besar atau lebih kecil.
Bagaimana SVG dibandingkan dengan PNG dan JPEG?
Dibandingkan dengan PNG atau JPEG, gambar SVG jauh lebih jelas dan tajam karena objek gambar didefinisikan sebagai bentuk (garis, kurva, dan isian) dan kemudian diskalakan. Beberapa gambar, seperti gambar realistis hutan atau pantai, akan terlalu rumit untuk dirender sebagai SVG. Tabel berikut menunjukkan contoh untuk membandingkan masing-masing dari tiga jenis file.
SVG | PNG | JPEG |
---|---|---|
![]() |
![]() |
|
Mungkin termasuk animasi dan interaksi. | Statis. | Statis. |
Tidak masuk akal. | ![]() |
![]() |
Bagaimana Anda membuat atau mengedit file SVG?
SVG paling sering dibuat dan diedit menggunakan program seni vektor, seperti Adobe Illustrator atau Inkscape. Karena file terdiri dari teks, mereka dapat diedit menggunakan editor teks biasa.
Seperti apa tampilan kode SVG?
XML SVG sederhana terlihat seperti ini.
<svg width="200" height="200"> <rect x="10" y="10" width="180" height="180" style="fill:#C7E2FC;stroke:#0378E2;stroke-width:5;opacity:1.0" /> <circle cx="100" cy="100" r="50" fill="#C1C1C3" /> </svg>
Contoh ini membuat gambar berikut.
Baris pertama memulai tag SVG dan mengatakan seberapa besar area gambarnya. Garis kedua menggambar persegi panjang dengan sudut kiri atas pada x 10, y 10 (asalnya adalah sudut kiri atas pada x 0, y 0). Persegi panjang diberi isian dan goresan. Garis berikutnya menggambar sebuah lingkaran, dengan pusat x dan y pada 100, 100, dengan jari-jari 50. Lingkaran ini kemudian diisi dengan warna abu-abu. Baris terakhir menutup tag SVG XML.
Bisakah logo Computerhope dibuat dengan SVG?
Logo Computerhope sebagai SVG yang ditambahkan ke HTML terlihat seperti ini.
Contoh kode
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225 225" style="enable-background:new 0 0 225 225;" xml:space="preserve" width="100" height="100"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0378E2;} </style> <path class="st0" d="M147.83,15.04c0,0-30.84-13.94-68.75-0.63c-29.35,10.3-53.78,35.93-62.62,62.3 c-5.83,17.4-17.62,61.96,23.74,107.26c43.58,41.23,94.94,27.32,94.94,27.32l11.88-37.08c0,0-36.7,7.75-65.8-8.06 C43.41,142.41,43.61,99.3,59.75,76.42c29.7-43.33,75.67-24.22,75.67-24.22L147.83,15.04z"/> <path class="st1" d="M157.73,19.16l-48.52,145.17c0,0,9.33,2.26,21.4,1.77c9.64-0.39,19.96-1.96,19.96-1.96 s34.56-103.95,39.53-119.5c0.39-1.23-6.05-7.77-14.64-14.58C167.73,23.95,157.73,19.16,157.73,19.16z"/> <path class="st1" d="M197.99,53.98l-50.63,153.58c0,0,43.32-12.36,61.27-59.56C229.07,93.89,197.99,53.98,197.99,53.98z"/> </svg>
Contoh keluaran
Koordinat absolut, Animasi, BMP, Akronim komputer, Isi, GIF, Grafik, Editor gambar, Grafik interaktif, Seni garis, Grafik presentasi, Raster, Istilah perangkat lunak, Sprite, Berat goresan