Pengaturan Saving SVG Illustrator untuk WEB design
667 Views

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