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:
About the Author
عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
