Cara Buat Jenis File SVG di Adobe Ilustrator | Mudah !!

Oleh Andi Jalaludin

pada tanggal Oktober 27, 2021 Agustus 05, 2022

cara save file ke SVG

File jenis SVG merupakan file yang kompatibel untuk website karena selain gambarnya berkualitas alias tidak pecah pada saat diperbesar juga tidak memberatkan beban loading website. Kebutuhan jenis file SVG untuk website biasanya untuk logo, icon ataupun gambar animasi. Cara membuat dan save file jenis SVG, silahkan ikuti langkah - langkah berikut ini :

Langkah 1 : Masukan atau buat logo atau icon dalam bentuk vektor, jika belum diubah kedalam bentuk vektor, silahkan ubah terlebih dahulu. Disini Saya menggunakan icon yang tersedia di Adobe Ilustrator. Untuk menggunakan icon yang ada di Adobe Ilustrator yaitu dengan cara pergi ke menu Type kemudian pilih Glyphs, untuk jenis entire fontnya yaitu Webdings.

cara save file ke SVG

Langkah 2 : Seleksi icon kemudian pergi ke menu Type setelah itu pilih Create Outlines.

cara save file ke SVG

cara save file ke SVG

Langkah 3 : Sesuaikan ukuran icon dengan ukuran artboardnya.

cara save file ke SVG

Langkah 4 : Pergi ke menu File kemudian pilih Save, setelah itu save jenis filenya kedalam bentuk SVG.

cara save file ke SVG

cara save file ke SVG

Langkah 5 : Atur SVG Optionsnya seperti gambar dibawah ini, setelah itu klik OK.

cara save file ke SVG

Apabila kalian masih merasa kurang puas mengenai penjelasan tutorial ini, kalian bisa tonton videonya melalui channel YouTube CISAREO DESIGN & SCIENCE.

Thanks, semoga bermanfaat😊.

Adobe Ilustrator

Andi Jalaludin

Official Admin Cisareo Design

Komentar

Postingan Lebih Baru Postingan Lama

<!-- Yandex.RTB R-A-2315685-1 -->
<div id='yandex_rtb_R-A-2315685-1'></div>
<script>window.yaContextCb.push(()=>{
    Ya.Context.AdvManager.render({
        "blockId": "R-A-2315685-1",
        "renderTo": "yandex_rtb_R-A-2315685-1"
    })
})
</script>
<!-- Yandex Native Ads C-A-2315685-2 -->
<div id='yandex_rtb_C-A-2315685-2'></div>
<script>window.yaContextCb.push(()=>{
  Ya.Context.AdvManager.renderWidget({
    renderTo: 'yandex_rtb_C-A-2315685-2',
    blockId: 'C-A-2315685-2'
  })
})</script>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/523719845-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7lFMUjlFQPEjv4KQoyVVnXp0KwNQ:1726646630731';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3065450742861238328','//www.cisareodesign.com/2021/10/cara-buat-file-svg-di-ilustrator.html','3065450742861238328');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3065450742861238328', 'title': 'Cisareo Design - Tutorial Edukasi', 'url': 'https://www.cisareodesign.com/2021/10/cara-buat-file-svg-di-ilustrator.html', 'canonicalUrl': 'https://www.cisareodesign.com/2021/10/cara-buat-file-svg-di-ilustrator.html', 'homepageUrl': 'https://www.cisareodesign.com/', 'searchUrl': 'https://www.cisareodesign.com/search', 'canonicalHomepageUrl': 'https://www.cisareodesign.com/', 'blogspotFaviconUrl': 'https://www.cisareodesign.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-250199217-1', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Cisareo Design - Tutorial Edukasi - Atom\x22 href\x3d\x22https://www.cisareodesign.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Cisareo Design - Tutorial Edukasi - RSS\x22 href\x3d\x22https://www.cisareodesign.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Cisareo Design - Tutorial Edukasi - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3065450742861238328/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Cisareo Design - Tutorial Edukasi - Atom\x22 href\x3d\x22https://www.cisareodesign.com/feeds/6031601587051678020/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/613dcd4066f9c2b0', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Bagikan ke Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'item', 'postId': '6031601587051678020', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEh9kD_axHSheNFKWS_mcJ9LA2jKHE_riN7Ix-zIWkSfQUA-HZrk75qGvekLbFz904QMtFtjidy3PkOR66MgvbvJ3w7HclJ-ZJBZq2PLmpkvS00sHCrmvm_NhiSBlzDam63jbSTYUXZB3pTNwIYoFURe3WYuzz9WczRoiF7v8tlOmXxP6MIKgZ8i3fJhtA\x3ds72-w640-c-h482', 'postImageUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEh9kD_axHSheNFKWS_mcJ9LA2jKHE_riN7Ix-zIWkSfQUA-HZrk75qGvekLbFz904QMtFtjidy3PkOR66MgvbvJ3w7HclJ-ZJBZq2PLmpkvS00sHCrmvm_NhiSBlzDam63jbSTYUXZB3pTNwIYoFURe3WYuzz9WczRoiF7v8tlOmXxP6MIKgZ8i3fJhtA\x3dw640-h482', 'pageName': 'Cara Buat Jenis File SVG di Adobe Ilustrator | Mudah !!', 'pageTitle': 'Cisareo Design - Tutorial Edukasi: Cara Buat Jenis File SVG di Adobe Ilustrator | Mudah !!', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Buat Jenis File SVG di Adobe Ilustrator | Mudah !!', 'description': 'Merupakan situs pembelajaran mengenai software desain grafis (Adobe Photoshop, Adobe Ilustrator \x26amp; Corel Draw) untuk umum. Serta pelajaran Sains.', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEh9kD_axHSheNFKWS_mcJ9LA2jKHE_riN7Ix-zIWkSfQUA-HZrk75qGvekLbFz904QMtFtjidy3PkOR66MgvbvJ3w7HclJ-ZJBZq2PLmpkvS00sHCrmvm_NhiSBlzDam63jbSTYUXZB3pTNwIYoFURe3WYuzz9WczRoiF7v8tlOmXxP6MIKgZ8i3fJhtA\x3dw640-h482', 'url': 'https://www.cisareodesign.com/2021/10/cara-buat-file-svg-di-ilustrator.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6031601587051678020}}, {'name': 'widgets', 'data': [{'title': 'JavaScript Variables', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList995'}, {'title': 'CSS Options', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList996'}, {'title': 'Custom SVG Icons', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList998'}, {'title': 'Cisareo Design - Tutorial Edukasi (Header)', 'type': 'Header', 'sectionId': 'section_app_bar', 'id': 'Header1'}, {'title': 'Navigation Drawer Menu', 'type': 'LinkList', 'sectionId': 'section_navigation', 'id': 'LinkList999'}, {'title': 'More Menu', 'type': 'PageList', 'sectionId': 'section_navigation', 'id': 'PageList999'}, {'title': '', 'type': 'HTML', 'sectionId': 'section_main_top_widget', 'id': 'HTML1'}, {'title': 'Post Ad Slot (Top)', 'type': 'HTML', 'sectionId': 'section_main_widget', 'id': 'HTML996'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'section_main_widget', 'id': 'Blog1', 'posts': [{'id': '6031601587051678020', 'title': 'Cara Buat Jenis File SVG di Adobe Ilustrator | Mudah !!', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEh9kD_axHSheNFKWS_mcJ9LA2jKHE_riN7Ix-zIWkSfQUA-HZrk75qGvekLbFz904QMtFtjidy3PkOR66MgvbvJ3w7HclJ-ZJBZq2PLmpkvS00sHCrmvm_NhiSBlzDam63jbSTYUXZB3pTNwIYoFURe3WYuzz9WczRoiF7v8tlOmXxP6MIKgZ8i3fJhtA\x3dw640-h482', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'share', 'label': ''}, {'name': 'comments', 'label': 'Comments'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'share', 'label': ''}, {'name': 'comments', 'label': 'Comments'}, {'name': 'labels', 'label': ''}]}, {'title': 'Post Ad Slot (Bottom)', 'type': 'HTML', 'sectionId': 'section_main_widget', 'id': 'HTML997'}, {'title': '', 'type': 'HTML', 'sectionId': 'section_main_bottom_widget', 'id': 'HTML2'}, {'title': '', 'type': 'HTML', 'sectionId': 'section_aside_widget', 'id': 'HTML5'}, {'title': '', 'type': 'HTML', 'sectionId': 'section_aside_widget', 'id': 'HTML3'}, {'title': 'Trending', 'type': 'PopularPosts', 'sectionId': 'section_aside_widget', 'id': 'PopularPosts1', 'posts': [{'title': 'Cara Membuat Logo Menjadi 3D  dengan Instan di Photoshop', 'id': 76005987797365752}, {'title': 'Cara Membuat Efek timbul menggunakan Bevel \x26 Emboss di Photoshop', 'id': 4028660211158762796}, {'title': 'Cara Membuat Objek Melingkar di Adobe Ilustrator', 'id': 4765287150974336738}, {'title': 'Membuat Animasi Glow Effect Berkedip di Photoshop', 'id': 7422283286276382552}, {'title': 'Cara Menghapus Background Gambar di Photoshop', 'id': 2621584659915659003}]}, {'title': 'elcreativeSocialWidget', 'type': 'LinkList', 'sectionId': 'section_aside_widget', 'id': 'LinkList1'}, {'title': 'Custom Vanilla JavaScript', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML998'}, {'title': 'Custom jQuery Script', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML999'}, {'title': 'Formulir Kontak', 'type': 'ContactForm', 'sectionId': 'hidden', 'id': 'ContactForm1'}]}]);
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList995', 'elcreative_panel_top', document.getElementById('LinkList995'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList996', 'elcreative_panel_top', document.getElementById('LinkList996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList998', 'elcreative_panel_top', document.getElementById('LinkList998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'section_app_bar', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList999', 'section_navigation', document.getElementById('LinkList999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList999', 'section_navigation', document.getElementById('PageList999'), {'title': 'More Menu', 'links': [{'isCurrentPage': false, 'href': 'https://www.cisareodesign.com/p/about.html', 'id': '9134725894452853724', 'title': 'About'}, {'isCurrentPage': false, 'href': 'https://www.cisareodesign.com/p/tentang-saya.html', 'id': '507387631608428613', 'title': 'Contact'}, {'isCurrentPage': false, 'href': 'https://www.cisareodesign.com/p/disclaimer.html', 'id': '3800738484938200234', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': 'https://www.cisareodesign.com/p/privacy-policy.html', 'id': '3708715488616644640', 'title': 'Privacy Policy'}, {'isCurrentPage': false, 'href': 'https://www.cisareodesign.com/p/sitemap.html', 'id': '292423202839658330', 'title': 'Sitemap'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'section_main_top_widget', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'section_main_widget', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'section_main_widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1612098781-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'section_main_widget', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'section_main_bottom_widget', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'section_aside_widget', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'section_aside_widget', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'section_aside_widget', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'section_aside_widget', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'elcreative_panel_bottom', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'elcreative_panel_bottom', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'hidden', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan sudah dikirim.', 'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Coba lagi nanti.', 'contactFormInvalidEmailMsg': 'Alamat email harus valid.', 'contactFormEmptyMessageMsg': 'Bidang pesan harus diisi.', 'title': 'Formulir Kontak', 'blogId': '3065450742861238328', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Kirim', 'contactFormToken': 'AOuZoY5jG1lNnkdkI_j115vbNAQhE7om_w:1726646630731', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>