SVG to CSS Background Converter

SVG to CSS

External quotes: single / double
About tool
We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere.
SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg'. If it doesn't exist, it will be added automagically.
Encoded SVG can be used in background, in border-image or in mask (live demo).
Insert SVG:

Take encoded:

You may place encoded SVG here to decode it back
Ready for CSS:

Preview:

Background:
Yorum Gönder
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6QpxT5wBOXHYczN7cDGSV-lS8CAg:1750356641701';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d924161802106854376','//www.teknofull.com.tr/p/svg-to-css-background-converter.html','924161802106854376');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '924161802106854376', 'title': 'Teknofull', 'url': 'https://www.teknofull.com.tr/p/svg-to-css-background-converter.html', 'canonicalUrl': 'http://www.teknofull.com.tr/p/svg-to-css-background-converter.html', 'homepageUrl': 'https://www.teknofull.com.tr/', 'searchUrl': 'https://www.teknofull.com.tr/search', 'canonicalHomepageUrl': 'http://www.teknofull.com.tr/', 'blogspotFaviconUrl': 'https://www.teknofull.com.tr/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-EP85B5SMYD', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'tr', 'localeUnderscoreDelimited': 'tr', '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\x22Teknofull - Atom\x22 href\x3d\x22https://www.teknofull.com.tr/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Teknofull - RSS\x22 href\x3d\x22https://www.teknofull.com.tr/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Teknofull - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/924161802106854376/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5093701657287996', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/48dec9733bff19a9', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Ba\u011flant\u0131y\u0131 al', 'key': 'link', 'shareMessage': 'Ba\u011flant\u0131y\u0131 al', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Facebook platformunda payla\u015f', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'X platformunda payla\u015f', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Pinterest platformunda payla\u015f', 'target': 'pinterest'}, {'name': 'E-posta', 'key': 'email', 'shareMessage': 'E-posta', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27tr\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Devam\u0131n\u0131 oku\xbb', 'pageType': 'static_page', 'pageId': '973935765232826614', 'pageName': 'SVG to CSS Background Converter', 'pageTitle': 'Teknofull: SVG to CSS Background Converter', 'metaDescription': 'SVG to CSS Background Converter'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'D\xfczenle', 'linkCopiedToClipboard': 'Ba\u011flant\u0131 panoya kopyaland\u0131!', 'ok': 'Tamam', 'postLink': 'Yay\u0131n Ba\u011flant\u0131s\u0131'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': '\xd6zel', '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': 'SVG to CSS Background Converter', 'description': 'SVG to CSS Background Converter', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tItwQOi6fEneQ2m3QTAEDb2TOWSK3S5j3-prNn10Q_OBrkZuWgmkpdhbbiqf1pMCTKaBcWMgMIm_8QqTAEsG7j6mjg38N3', 'url': 'https://www.teknofull.com.tr/p/svg-to-css-background-converter.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': true, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'pageId': 973935765232826614}}, {'name': 'widgets', 'data': [{'title': 'Teknofull (\xdcstbilgi)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Bir \u015fey mi ar\u0131yorsunuz?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Hakk\u0131m\u0131zda', 'type': 'Profile', 'sectionId': 'sec_Header_Icon', 'id': 'Profile01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Translate', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': 'Tabbed Menu', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList05'}, {'title': 'Notification', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList06'}, {'title': 'Labels Description', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList07'}, {'title': '\xd6ne \xc7\u0131kanlar', 'type': 'FeaturedPost', 'sectionId': 'sec_Top_Widgets', 'id': 'FeaturedPost01', 'postId': '7728881031418606888'}, {'title': 'Above Posts Ad [Desktop]', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList83'}, {'title': 'Blog Kay\u0131tlar\u0131', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '973935765232826614', 'title': 'SVG to CSS Background Converter', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tItwQOi6fEneQ2m3QTAEDb2TOWSK3S5j3-prNn10Q_OBrkZuWgmkpdhbbiqf1pMCTKaBcWMgMIm_8QqTAEsG7j6mjg38N3', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Yorumlar'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Etiket'}]}], 'allBylineItems': [{'name': 'author', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Yorumlar'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Etiket'}]}, {'title': 'Post Middle Ads', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList84'}, {'title': '\u0130\xe7indekiler', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Below Posts Ad', 'type': 'LinkList', 'sectionId': 'sec_Bottom_Widgets', 'id': 'LinkList85'}, {'title': 'Pop\xfcler Yay\u0131nlar', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'Windows 10\x27da Dosya Gezgini Yan\u0131t Vermiyor', 'id': 182177311305845454}, {'title': 'Kampanya:  EaseUS Data Recovery Wizard Pro 1 Y\u0131ll\u0131k \xdccretsiz Lisans Kodu', 'id': 5831537341442330850}, {'title': 'Chrome\x27da Otomatik Doldurma Giri\u015fleri Nas\u0131l Temizlenir?', 'id': 5699891257747636451}, {'title': 'Revo Uninstaller Pro v5.4.0 T\xfcrk\xe7e \u0130ndir', 'id': 6015672031039070201}, {'title': 'ASCOMP BackUp Maker Pro Key Free \u2013 Windows i\xe7in Kolay ve Otomatik Veri Yedekleme', 'id': 7728881031418606888}]}, {'title': 'Etiketler', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Sticky Ad [Desktop]', 'type': 'LinkList', 'sectionId': 'sec_Side_Sticky', 'id': 'LinkList86'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': 'Social Media Links', 'type': 'LinkList', 'sectionId': 'sec_Footer_Organization', 'id': 'LinkList21'}, {'title': 'WebP Ara\xe7lar\u0131', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': 'Resources', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': 'Web Sitemiz', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Firebase Configurations', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList61'}, {'title': 'Progressive Web App', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList62'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile01', 'sec_Header_Icon', document.getElementById('Profile01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': 'https://www.teknofull.com.tr/p/disclaimer.html', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': 'https://www.teknofull.com.tr/p/gizlilik.html', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList05', 'sec_Under_Header', document.getElementById('LinkList05'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList06', 'sec_Under_Header', document.getElementById('LinkList06'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList07', 'sec_Under_Header', document.getElementById('LinkList07'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost01', 'sec_Top_Widgets', document.getElementById('FeaturedPost01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList83', 'sec_Main_Widgets', document.getElementById('LinkList83'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2692103082-lbx__tr.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList84', 'sec_Main_Widgets', document.getElementById('LinkList84'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList85', 'sec_Bottom_Widgets', document.getElementById('LinkList85'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList86', 'sec_Side_Sticky', document.getElementById('LinkList86'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Organization', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'G\xf6nderiliyor...', 'contactFormMessageSentMsg': '\u0130letiniz g\xf6nderildi.', 'contactFormMessageNotSentMsg': '\u0130leti g\xf6nderilemedi. Daha sonra tekrar deneyin.', 'contactFormInvalidEmailMsg': 'Ge\xe7erli bir e-posta adresi gerekli.', 'contactFormEmptyMessageMsg': '\u0130leti alan\u0131 bo\u015f b\u0131rak\u0131lamaz.', 'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'blogId': '924161802106854376', 'contactFormNameMsg': 'Ad', 'contactFormEmailMsg': 'E-posta', 'contactFormMessageMsg': 'Mesaj', 'contactFormSendMsg': 'G\xf6nder', 'contactFormToken': 'AOuZoY6cslc6trg3_DxCiW6URq6bgn0q6A:1750356641701', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.teknofull.com.tr/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmCU5i1agWCUoaPYyxO7znDfX1psa8IlrlUdJ81hr0AmVaJ4MItOBpFdSCmJC1EY1AgoLaNqPhMrjzy0kU4RonuiLIV--A'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList61', 'sec_Addon_Widgets', document.getElementById('LinkList61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList62', 'sec_Addon_Widgets', document.getElementById('LinkList62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>