Membuat gambar SVG pada laman html

Cara yang paling mudah membuat gambar dengan format SVG adalah dengan menggunakan aplikasi Inkscape. Lalu setelah gambar dibuat, maka proses selanjutnya adalah sebagai berikut:

• Ubah ukuran dokumen mengikuti ukuran gambar pada Inkscape dengan cara pilih menu File → Document Properties... → cari bagian Custom size → pilih Resize page to content... → Tekan tombol Resize page to drawing or selection
• tutup jendela Document Properties
• Simpan gambar sebagai plain SVG
• Buka file SVG dengan penyunting teks (Notepad, Leafpad, atau pad-pad lainnya).
• Ambil bagian yang diapit tag <svg>..</svg>
• Salin ke laman html
• Hapus bagian metadata dan yang tak diperlukan lainnya dari bagian yang ditempel (paste) seperti:

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"

Penskalaan SVG di html

Untuk urusan penskalaan gambar SVG dapat kita tambahkan atribut viewbox dengan sintaks seperti berikut:

viewbox:"<min-x> <min-y> <width> <height>"

• <min-x> <min-y>: koordinat pojok kiri atas viewbox (isi saja dengan 0 0)
• <width>: lebar viewbox
• <height>:tinggi viewbox

Isi atribut viewbox dengan nilai width dan height dari viewport-nya gambar SVG.

<svg
   width="200"  <!-- lebar dan tinggi viewport -->
   height="100"

   viewbox="0 0 200 100">

Setelah itu untuk penskalaan, ubah nilai viewport-nya SVG, sesuai dengan seberapa kali besar dari nilai viewbox. Contoh berikut adalah dua kali-nya

<svg
   width="400"
   height="200"

   viewbox="0 0 200 100">

Gambar berikut menggunakan format SVG.

---

---

Sistem Operasi: Slitaz 4.0 GNU/Linux | Peramban: Mozilla Firefox 34.0 | Penyunting Teks: Leafpad 0.8.18.1 | Aplikasi SVG: Inkscape 0.48