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% 23
so it becomes like this style = 'fill:% 234867aa'
May be useful.
0 Komentar
Penulisan markup di komentar