Página Inicial>Tutorial de web design>Tutorial HTML

4 maneiras de introduzir imagens SVG em páginas HTML

Autor：Eve Cole Data da Última Atualização：2024-12-18 10:41:14

O desenvolvimento de aplicativos da Web usa imagens SVG. Resumindo, existem quatro maneiras:

1. Insira diretamente na página. 2. Introdução da tag img. 3. Introdução ao CSS. 4. A tag do objeto é introduzida.

1. Insira diretamente na página

Nas páginas HTML, você pode usar tags SVG diretamente.

<!DOCTYPEhtml>
<html>
	<cabeça>
		<meta charset="utf-8">
		<título></título>
	</head>
	<corpo>
		<!-- Uma imagem SVG-->
		<svg width="200" height="150" style="border: 1px solid steelblue">
			<!-- Há um retângulo dentro -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</body>
</html>

Efeito da operação:

1

2. Introdução da tag img

Além de escrever tags SVG diretamente na página da web, você também pode importá-las por meio de img, assim como importar imagens jpeg e png.

1) Crie uma nova imagem SVG

Então precisamos primeiro criar um novo arquivo de imagem SVG e usar o SVG escrito diretamente na página da web acima:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

Existem duas diferenças no conteúdo aqui:

1. Você precisa declarar o atributo namespace xmlns. O namespace pode ser listado nos materiais de referência no final deste artigo. 2. Removido o estilo originalmente escrito na tag svg, style="border: 1px solid steelblue".

Salve o conteúdo no arquivo test.svg. Este é um arquivo de imagem. Você pode tentar abri-lo em um navegador.

2) Importar usando tag img

Suponha que test.svg e o arquivo da página da web estejam no mesmo diretório:

<img src="test.svg" style="border: 1px solid steelblue" />

Semelhante à introdução de jpeg e png, você pode definir diretamente o caminho da imagem com o atributo src. Além disso, movemos o estilo svg original para a tag img.

O efeito de execução é o mesmo acima:

2

Existem muitas imagens SVG na Internet agora. Você pode consultar: https://www.iconfont.cn, um bom site de ícones.

3

3. Introdução ao CSS

A introdução do CSS é apresentar a imagem como imagem de fundo:

<style type="texto/css">
	.svg{
		largura: 200px;
		altura: 150px;
		borda: 1px azul aço sólido;
		background-image: url(test.svg); // Importar como plano de fundo }
</estilo>
<div class="svg"></div>

4. introdução do objeto

Semelhante à importação de img, você precisa de um arquivo svg e, em seguida, importe-o com os dados do atributo:

<object data="test.svg" style="border: 1px solid steelblue"></object>

O efeito de execução é semelhante ao acima, sem mais mapeamento.

Outras tags

Embora outras tags, como tags embed e iframe, também possam ser introduzidas, seu uso não é recomendado. Para obter detalhes, consulte as referências listadas no final deste artigo.

Referências

Namespace: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

tag de incorporação: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

tag iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

Isso conclui este artigo sobre as 4 maneiras de introduzir imagens SVG em páginas da web HTML. Para obter mais informações sobre a introdução de imagens SVG em HTML, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. no futuro. Apoie downcodes.com!

Artigos Relacionados