html 具有PNG后备的SVG图像

Posted 2021-05-11

// 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="" />