Pengaturan Saving SVG Illustrator untuk WEB design

pengaturan svg illustrator untuk webSeperti 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
Svg Illustrator logo WEB
cara penyimpanan (Save/Save As) dalam format SVG. karena jika memilih export tidak ada pilihan untuk format SVG
pilih File > Save As
Cara Menyimpan SVG Illustrator
kemudian pilih
  1. SVG Profile: SVG 1.1
  2. Type: SVG
  3. Subsetting: Only Glypsh Used
pengaturan svg illustrator pertama

pengaturan svg illustrator kedua

Untuk pengaturan lainnya kalian bisa gunakan pengaturan yang biasa saya gunakan. karena menurut saya ini yang terbaik.
sebelumnya klik dulu More Options
pengaturan svg illustrator lainnya

pengaturan svg illustrator seluruhnya
  1. Image Location: Link
  2. CSS Properties: Style Elements (Mempermudah Pengaturan CSS dengan tag CLASS)
  3. 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
lihat svg illustrator code
<?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
Theme equip :DISQUSjQueryBootstrapBlogger
eden creative