Pengaturan Saving SVG Illustrator untuk WEB design
Seperti yang sudah kita ketahui SVG adalah gambar vector yang berbasis XML. SVG sudah sangat banyak di gunakan untuk keperluan web design karena vector tidak merubah kualitas resolusi dari gambar yang di buat.cara untuk membuatnya kalian bisa gunakan software dari Adobe Illustrator karena aplikasi ini paling banyak dan mudah untuk di gunakan. berikut tutorial singkat cara mengatur gambar untuk menyimpan dalam format SVG untuk keperluan WEB Design. Saya menggunakan Adobe Illustrator CS6 untuk Windows-32bit.
Contoh gambar yang saya gunakan dengan 1 warna dan 1 elemen path. contohnya seperti ini
cara penyimpanan (Save/Save As) dalam format SVG. karena jika memilih export tidak ada pilihan untuk format SVG
pilih File > Save As
kemudian pilih
Untuk pengaturan lainnya kalian bisa gunakan pengaturan yang biasa saya gunakan. karena menurut saya ini yang terbaik.
sebelumnya klik dulu More Options
Finishing klik OK atau ambil code SVG nya untuk penyimpanan langsung pada xHTML
Contoh gambar yang saya gunakan dengan 1 warna dan 1 elemen path. contohnya seperti ini
cara penyimpanan (Save/Save As) dalam format SVG. karena jika memilih export tidak ada pilihan untuk format SVG
pilih File > Save As
kemudian pilih
- SVG Profile: SVG 1.1
- Type: SVG
- Subsetting: Only Glypsh Used
Untuk pengaturan lainnya kalian bisa gunakan pengaturan yang biasa saya gunakan. karena menurut saya ini yang terbaik.
sebelumnya klik dulu More Options
- Image Location: Link
- CSS Properties: Style Elements (Mempermudah Pengaturan CSS dengan tag CLASS)
- Decimal Place: 1 (Tergantung lengkungan pada gambar dan beberapa jumlah elemen lainnya)
Finishing klik OK atau ambil code SVG nya untuk penyimpanan langsung pada xHTML
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#F44336;}
]]>
</style>
<g>
<path class="st0" d="M91.4,133.1c-5.2,1.9-10.5,2.8-16.4,2.8c-7,0-13.4-1.4-19.5-4c-6.1-2.6-11.3-6.3-15.9-11.3
c-4.5-4.7-8-10.3-10.8-16.6c-2.1-5.4-3.5-11-3.7-16.9c0-1.2,0-2.3,0-3.3c0-1.2,0-2.3,0-3.3c0.2-6.1,1.6-11.7,3.7-16.9
c2.6-6.3,6.1-12,10.8-16.6c4.5-4.7,9.8-8.4,15.9-11.3c6.1-2.8,12.7-4,19.5-4c7,0,13.4,1.4,19.5,4c6.1,2.8,11.2,6.3,15.9,11.3
c2.3,2.3,4.2,4.9,6.1,7.7l-5.6,6.3c-8.7,9.8-17.3,19.7-26,29.3c13.8-28.6-10.8-41-27.2-23.9c-3,3-5.2,6.8-6.1,10.8
c-0.9,3.5-1.4,8.4-0.7,12.2c1.9,9.4,8.9,16.6,17.8,19.2c2.3,0.5,4,0.9,6.3,0.9c2.6,0,5.2-0.5,7.5-1.2c6.6-2.3,29.1-28.4,47.8-51.1
C103.1-7.3,8.2,13.6,8.2,84.4c0,13.8,4.2,26.7,11.5,37.5c-0.2,1.6-0.5,3.5-0.5,5.2c-9.1-11.7-14.5-26.5-14.5-42.7
c0-38.7,31.4-70.3,70.3-70.3c38.2,0,69.1,29.5,70.3,67.5C134.3,94.2,105.7,128,91.4,133.1z"/>
</g>
</svg>
Referensi Lengkap : Export SVG
Klik tombol show dan tunggu hingga loading comment disqus muncul dan selesai memuat. berkomentarlah sesuai artikel: Pengaturan Saving SVG Illustrator untuk WEB design