SVG image with a PNG fallback
// Usage in .less file
.svg-image (
logo,
"/path_to_png_image.png",
"/path_to_svg_image.svg",
50px,
50px
);
// make an svg image with a png fallback
.svg-image (@selector, @png, @svg, @width, @height) {
.@{selector} {
background:url(~"@{png}") no-repeat;
background-size: @width @height;
height:@height;
width:@width;
}
.svg .@{selector} {
background:url(~"@{svg}") no-repeat;
background-size: @width @height;
}
}
<!-- usage in html -->
<img class="ClassName" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />