Membuat File SVG Struktur Molekul

Keunggulan gambar dengan format svg adalah kualitas-nya, gambar format ini merupakan salah satu format gambar vektor, dapat dilakukan pembesaran tanpa menurunkan kualitas. Ukuran file ini relatif kecil. Sampai saat ini admin masih belum mendapatkan cara terbaik untuk menyisipkan gambar struktur molekul format svg yang sudah dibuat di Chemdraw agar ukurannya benar-benar teroptimasi. Masih menggunakan prosedur normal: membuat struktur molekul di Chemdraw; menyimpan sebagai file svg; mengoptimasinya di SVGOMG; download atau salin kode hasil optimasi untuk disisipkan dalam laman/postingan di blog dan selesai.

Yang perlu pertimbangan adalah menyesuaikan ukuran font agar sama dengan ukuran font dalam laman/postingan. Untuk blog ini file svg yang dibuat di chemdraw diatur ukuran font 9, dan bond fixed length 0,7 cm.

Pengaturan SVGOMG yang digunakan sebaiknya seperti pada gambar berikut.

Jadi ada 10 item yang harus di-OFF-kan, sementara yang lain di-ON-kan"

1. Show original
2. Compare gzipped
3. Prettify markup
4. Remove xmlns
5. Style to attributes
6. Remove raster images
7. Remove viewBox
8. Replace duplicate elements with links
9. Prefer viewBox to width/height
10. Remove out-of-bounds paths

Contoh struktur molekul etanol hasilnya seperti di bawah ini.

Contoh kode file svg, ini masih menggunakan "Transform precison = 5" sebaiknya cukup 4 saja, jangan terlalu kecil juga:

<svg xmlns="http://www.w3.org/2000/svg" width="151" height="87" style="background-color:#ffffff00" viewBox="0 0 151 87"><text font-family="Arial" font-size="180" transform="translate(4.17 49.67)scale(.08333)">
H</text><text font-family="Arial" font-size="180" transform="translate(37.24 49.67)scale(.08333)">
C</text><path d="M17.1 44.62v-1.65h17.62v1.65z"/><text font-family="Arial" font-size="180" transform="translate(70.31 49.67)scale(.08333)">
C</text><path d="M50.76 44.62v-1.65h17.03v1.65z"/><text fill="red" font-family="Arial" font-size="180" transform="translate(102.96 49.67)scale(.08333)">
O</text><path d="M83.83 44.62v-1.65h16.53v1.65z"/><text font-family="Arial" font-size="180" transform="translate(37.24 16.6)scale(.08333)">
H</text><path d="M43.48 35.51h-1.65V19.93h1.65z"/><text font-family="Arial" font-size="180" transform="translate(37.24 82.74)scale(.08333)">
H</text><path d="M41.83 53.14h1.65v15.64h-1.65z"/><text font-family="Arial" font-size="180" transform="translate(70.31 16.6)scale(.08333)">
H</text><path d="M76.55 35.51H74.9V19.93h1.65z"/><text font-family="Arial" font-size="180" transform="translate(70.31 82.74)scale(.08333)">
H</text><path d="M74.9 53.14h1.65v15.64H74.9z"/><text font-family="Arial" font-size="180" transform="translate(136.45 49.67)scale(.08333)">
H</text><path d="M117.23 44.62v-1.65h17.12v1.65z"/><path fill="red" d="M109.83 34.11a.83.83 0 1 0 1.65 0 .83.83 0 1 0-1.65 0M106.11 34.11a.83.83 0 1 0 1.65 0 .83.83 0 1 0-1.65 0M106.11 53.48a.83.83 0 1 0 1.65 0 .83.83 0 1 0-1.65 0M109.83 53.48a.83.83 0 1 0 1.65 0 .83.83 0 1 0-1.65 0"/></svg>

Catatan: untuk pengeditan teks di blogger sebaiknya tetap berada pada mode Tampilan HTML, ketika dicoba untuk ditampilkan di mode Tampilan Menulis banyak kode svg berubah.

Contoh lain

Contoh dengan penomoran:

Saran agar kita dapat menjalankan secara offline dengan pengaturan yang sudah ditetapkan:

1. Lakukan pengaturan seperti di atas
2. Install SVGOMG dengan klik ikon Install (ada di kotak address bar bagian kanan), ini biasanya akan membuat shortcut di dekstop yang dapat digunakan secara cepat (offline)
3. Klik ikon di desktop SVGOMG sebagai aplikasi.
4. SVGOMG siap digunakan sebagaimana saat online.

Ini sekadar catatan pribadi, sengaja di bagikan di sini bila ada pihak lain yang membutuhkan, KSJSS