SVG is actually a W3C recommended image file for the web as it supports all modern browsers on desktops and mobile, but there are still many developers who have not used it yet. SVG has a small size but still good when appearing on the retina screen or when in zoom.
Instead of SVG supporting all modern browsers, then why exactly does SVG background not appear in the Firefox browser?
Yes, we can use SVG as background-image in the CSS style by using URI or base64 data, but if we are not careful then the background does not show fi Firefox browser.
SVG can be used as background-image in CSS with URI data like the example below.
.social-icon-fb { background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#4867aa' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat; }
If you want to set the size of the icon, can add the background code: 50px 50px; (The original size is 24x24).
But with the CSS code as above, then the icon as background-image will not appear in firefox browser, while in chrome browser appear without problems.
The reason is the #hash code in the hex color code in the code style = 'fill: # 4867aa' (this code to give color to SVG).
Well the solution to this SVG background appear in Firefox browser, please replace hash code # with% 23so it becomes like this style = 'fill:% 234867aa'
May be useful.
0 comments:
Post a Comment