Saya akan memaparkan bagaimana membuat gambar svg di xtgem, Agar tidak bingung kita membuat dari awal mulai buka xtgem > buat folder > buat file > ampe selesai.

1.  Masuk xtgem anda KLIK FILE BROWSER

2. Arahkan pandangan ke bawah kita buat folder biar gambarnya nanti teratur dan mudah dicari KLIK CREATE FOLDER

3. Beri nama foldernya terserah disini saya rename dengan nama SVG agar mudah di ingat  lalu KLIK OK jika sudah selesai 

4. Folder sudah dibuat selanjutnya cari folder  SVG tersebut dan di KLIK SAJA 

5. Langkah ke 5 buat file dalam folder SVG tersebut KLIK CREATE FILE

keterangan gambar:

no 1 : hanya contoh file svg sudah jadi nanti jangan di hiraukan

n0 2  silahkan klik create file

6. Kita disuruh buat filenya 

kolom file name beri nama terserah anda yang mudah di ingat karena ini svg yang dominan dengan kode warna jadi saya sarankan pake nama warna disini saya gunakan angka kode warna 3366FF.svg , perlu saya garis bawahi akhiran file name meski gunakan .svg contoh 3366ff.svg
pada kolom file type klik ujung panah tombol tersebut pilih PLAINTEXT FILE > KLIK OK 

7. Kita akan disuguhkan lahan kosong, lahan kosong inilah yang akan kita garap, tabur benih, pupuk,rawat dan menuai hasilnya, di halaman inilah kode svg nya kita letakkan ( perhatian disini juga bisa meletakkan css jika ingin menyimpan css dan javascript di xtgem jika css gunakan akhiran .css jika script gunakan akhiran .js baca tutorial no 6 ).

lihat gambar untuk kodenya nanti ada di bawah postingan ini yang sabar karena sabar masih di mekkah nanti dia pulang bergelar hj.sabar (apa kaitannya)

8. Setelah disimpan filenya maka jika berhasil akan muncul pemberitahuan saved successfully (lihat gambar diatas) jika tulisan itu muncul berarti file berhasil disimpan KLIK OPEN FOLDER (maaf tidak ada gambarnya lupa) berada di bawah save.

lalu lihat file sudah ada sesuai yang saya namakan tadi 3366FF KLIK SAJA FILE TERSEBUT  

9. akan muncul keterangan dari file tersebut link atas adalah url yang akan di gunakan dan view untuk preview jadi tidaknya file yang kita buat jika tidak jadi lihat artikel ini no 1 alias buat ulang sampe jadi.

10. GAME OVER 

berikut kode svg nya letakkan pada halaman yang di buat pada artikel no 7.

A. GAMBAR LENGKUNG SVG XTGEM FULL sudut kiri kanan atas bawah
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: ykub.xtgem.com --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"><rect fill="#3366ff" rx="8" width="100%" height="100%"/></svg>

B. SUDUT LENGKUNG DENGAN BORDER SVG
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: ykub.xtgem.com --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"><rect fill="#3366ff" rx="8" width="100%" height="100%" stroke="#990000" stroke- width="2"/></svg>

C. SUDUT LENGKUNG SVG MYWAPBLOG ATAS KIRI DAN KANAN
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: ykub.xtgem.com --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg"> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]> <svg xmlns="http://www.w3.org/2000/svg"><rect fill="#3366ff" rx="8" width="100%" height="100%"/><rect y="100%" width="100%" height="8" fill="#3366ff" transform="translate(0,-8)"/></svg>

D. SUDUT LENGKUNG SVG CSS MWB BAWAH KIRI DAN KANAN
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: ykub.xtgem.com --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg"> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]> <svg xmlns="http://www.w3.org/2000/svg"><rect fill="#3366ff" rx="8" width="100%" height="100%"/><rect width="100%" height="8" fill="#3366ff"/></svg>



Artikel di atas hasilnya SEPRTI INI
Untuk pemasngannya di css contoh dasar #footer { background: #3366ff url(http://ykub.xtgem.com/artikel/svg/3366ff.svg) no-repeat;}
Atau #footer { background: url(http://ykub.xtgem.com/artikel/svg/3366ff.svg) no-repeat;}
lihat yang mana kodenya yang menjadi



Alhamdulillah semoga bermanfaat... capek udah lama ga nulis panjang gini tapi senang dan jika kurang jelas inbox saya fb.com/yakubnay

Share jika ingin berbagi

jempolnya jika artikel ini membantu