html 具有PNG后备的SVG图像

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 具有PNG后备的SVG图像相关的知识，希望对你有一定的参考价值。

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