html SVG在HTML中嵌入了位图

Posted 2021-05-11

tags:

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

<!DOCTYPE html>

<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
	<style>

        body{
        	background-color:#999;
        	color:#666;
        	padding:10px;
        }
        
		h1{
			font-weight:normal;
			font-size:24px;
			margin-top:20px;
			color:#000;
		}
        
		h2{
			font-weight:normal;
			font-size:20px;
			margin-top:20px;
		}
		
		p{
			color:#FFF;
			}
		
		svg{
			margin:20px;
			display:block;
        	height:100px;
		}

	</style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
	<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

	<h2>Example 1: Embedded data</h2>
	<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
	</svg>

	<h2>Example 2: Remote image</h2>
	<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
	</svg>

	<h2>Example 3: Local image</h2>
	<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
	</svg>


</body>
</html>

以上是关于html SVG在HTML中嵌入了位图的主要内容，如果未能解决你的问题，请参考以下文章

如何检查嵌入的 SVG 文档是不是加载到 html 页面中？

如何将 SVG 嵌入到电子邮件中的 HTML 中，以便在大多数/所有电子邮件浏览器中可见？

在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作

嵌入 SVG 时 wkhtmltopdf 失败

如何将 SVG 嵌入到来自 Cross Origin url 的 html <object> 标签中（s3_url/image.svg）