Cara Mudah untuk Memperbaiki File SVG yang Tidak Terbaca dengan Web Browser

Halloooooo, I’m back… I’m Arya, pada pembahasan kali ini aku akan membahas sedikit tentang file *.SVG.

Seperti yang rekan-rekan tau file dengan format SVG adalah file gambar yang paling ultimate, karena sesuai dengan namanya SVG (Scalable Vector Graphic), ketika di-zoom seperti apapun file-nya tidak akan pecah (Tapi ingat! Jangan dibanting ya!).

Mungkin sebelumnya aku akan bercerita terlebih dahulu sebagi intermeso yang cukup panjang. Akhirnya aku tau kenapa mahasiswa IT apapun kelas konsentrasinya atau penjurusannya tetep harus belajar coding.

Berlajar Coding, bukan jago coding ya… minimal paham basic nya saja aku rasa sudah cukup.

Seperti yang rekan-rekan ketahui mahasiswa yang fokus penjurusannya mengambil mulimedia secara spesifik graphics design, untuk kedepanya akan dijauhkan dari CODING dalam profesinya. Tapi kenyatannya tidak begitu rekan-rekan, apapun bisa terjadi di dunia kerja. 

Format file yang di request dari System analiys adalah *.svg, dan dalam 3 hari aku telah men-deliver ke team coder sejumlah +_ 8 gambar, untuk dimplementasikan ke dalam website oleh team coder.

Namun sayangnya file-file *.svg tersebut tidak dapat dilakukan preview image dari menggunakan codeeditor, dan menjadi penyebab utama error pada dicodingannya adalah karena gambarnya tidak terbaca.

Dengan begitu team codeer mengembalikan file-file *.SVG tersebut ke team design untuk diperbaiki.

Tanpa membuang-buang waktu aku pun memutuskan untuk bertanya ke CHATBOT bagaimana cara memperbaikinya, dan solusi yang diberikan mayoritas adalah diri sisi codenya, beberapa diantaranya adalah change modifier file/folder, related http/https issue, assign cross c…r… apalah aku kurang familiar tentang hal-hal tersebut. Dengan begitu aku harus duet dengan team coder untuk trobleshooting file gambar.

a few moments later… semua rekomendasi chatbot sudah kita setup sesuai apa yang chatbot jelaskan, selain itu kita juga coba ‘ngeyel’ ke chatbot dan akhirnya UNSOLVED.

Sampai akhirnya team coder kita mencoba buka file nya manual di web browser. 

Then, as you see, this is the error we got.

Ternyata file SVG nya yang error, atau bisa dikatakan corrupt mungkin ya, cmiiw ya! 

Dan di Web Browser muncul error berikut, salah satunya :

/*******

This page contains the following errors:

Below is a rendering of the page up to the first error.

\*******

Aneh bukan?

~o~

Bagaimana Cara Memeperbaiki File SVG yang Tidak Bisa dibuka Menggunakan Web Browser?

Sebelum memulai, silahkan siapkan terlebih dahulu software yang akan digunakan web browser dan code editor, jika belum ada silahkan download dulu di official websitenya dan install terlebih dahulu.

• Web Browser: digunakan untuk mem-preview file SVG penjunjuk arah dimanakan letak error pada file SVG tersebut, atau jika file SVG tersebut sudah normal kembali maka akan tampil dalam bentuk gambar di web browser.
• Code Editor: untuk membuka file SVG dalam bentuk text, untuk meng-edit character atau teks yang menjadi penyebab file SVG error. Untuk code editor yang digunakan bebas, tapi karena rekan-rekan team coder adalah pengguna Visual Studio Code. Aku ikutan saja, karena menang aku kurang familiar dengan code editor.

Berikut ini rekomendasi dari team coder kita untuk me-resolve error case tersebut sebagai petunjuk teknis yang telah aku tulis berupa tutorial dan langkah-langkah yang semoga mudah dipahami.

1. Pertama-tama sialahkan buka file SVG pada web browser, contohnya kita akan mendapatkan error seperti pada gambar di bawah ini.

   
   Gambar Error file SVG

   Dari gambar tersebut dapat diketahui bahwa terdapat anomali pada line no 63 column no 36 dari file tersebut.

2. Selanjutnya buka file di visual studio code, akan muncul Error seperti pada gambar berikut ini:

   
   Gambar Error file SVG saat dibuka menggunakan Visual Studio Code

3. Silahkan klik Open file using VS Code’s standard text/binary editor?, kemudian akan muncul file dengan format semacam XML, seperti pada gambar berikut ini: 

   
   Gambar file SVG yang dibuka sebagi file XML.

4. Lalu selanjutnya silahkan check pada line no 63 column no 36.

   
   Gambar file SVG yang dibuka sebagi file XML pada line no 63 column no 36

   Sebenarnya aku tidak tau secara jelas apa maksud dari code XML di atas. Namun rekomendasi dari team coder adalah ‘error nya pasti terdapat pada setelah line no 63 column no 36‘. 

5. Ya sudah lah… kita hapus saja text mencurigakan yang tidak seperti format drari file XML yaitu dari line 64 sampai dengan 80, hasilnya mejadi seperti pada gambar berikut ini :

   
   Gambar file SVG yang dibuka sebagi file XML pada line no 63 column no 36, yang sudah diperbaiki
   Kemudian silahkan save dengan (ctrl + s) file SVG yang telah ada update pada Visual Studio.

6. Terkahir kita dapat pastikan file SVG dapat dibuka dengan normal di web brower. Berikut adalah hasilnya :

   
   Gambar Hasil preview di web browser file SVG yang telah di-fixing melalui code editor.

   Jadi kira-kira begitulah cara perbaikan file SVG yang tidak dapat dibaca oleh web browser.

~o~

Pembahasan

Berdasarkan dari pengalaman kali ini aku baru sadah bahwa file SVG sebernarnya merupakan text terstruktur dengan format XML (Extensible Markup Language), mengingatkan team coder kita dengan (SOAP) Simple Object Access Protocol. Sebenarnya tanpa kita ketahui banyak file-file yang sering kita gunakan sesungguhnya memiliki composisi berfupa format XML. Dapat terbukit dengan membuka nya ke text editor semacam notepad atau code editor.

Lanjut membahas file SVG, mengapa file SVG sendiri sangatlah spesial, yaitu di-zoom sampai seperti apapun tidak akan pecah, karena pada dasarnya fiel SVG terdiri dari titik-titik yang didefinisikan dalam XML, seperti halnya dengan HTML saat dibuka dengan web browser terjadi interpretasi dari element-element yang ada didalam file tersebut yang sangat flexible dibandingkan pada pixle yang menyusun suatu format dari file gambar.

Mengapa file svg bisa error? Sebenarnya aku pun juga tidak tau mengapa bisa ada text yang secara liar berkeliaran tanpa tag atau element dalam file SVG. Mungkin bisa jadi terjadi crash waktu save file atau terkadang waktu editing terjadi softwarenya tiba-tiba terimate sendiri.

Menariknya adalah file yang corrupt pun bisa diperbaiki, selamat tidak ada bagian yang hilang harusnya aman.

~o~

Satu hal lagi, buat rekan-rekan yang masih menempuh jenjang pendidikan pada tingkat apapun jurusan apapun sebaiknya untuk tidak meremehkan apapun ilmu yang dibagikan oleh tenaga pendidik terutama terkait hal-hal yang bersifat basic, karena jika rekan-rekan beruntung di masa depan bisa jadi dalam 1:1000 kemungkinan ilmu tersebut akan bermanfaat bagi anda.

Ok, That’s for me,
banyak kekurangannya mohon maaf,
Terima kasih telah berkunjung.
Let’s go Open Source.

~Semoga Bermanfaat~

Tags: Design Graphic, Problem Solving, Tutorial Inkscape