Tutoriais SVG do Maujor

IR PARA MENU

Inserir SVG na HTML

Objetivo: Nessa matéria mostraremos as diferentes maneiras de se inserir um arquivo .svg em uma página HTML.

Gráficos SVG são criados com uso de marcação XML e o documento contendo a marcação para o gráfico deve ser salvo com a extensão .svg. Assim, inserir um gráfico SVG em um documento HTML implica em inserir marcação XML dentro de marcação HTML.
Para fins de exemplificar os códigos de inserção que mostraremos a seguir vamos supor que o gráfico a inserir está em um arquivo inc-xxx.svg na pasta imagenssvg.

Os elementos da linguagem HTML que podem ser usados para inserir SVG são: embed, object, iframe, img e script.

O elemento embed funciona, mas é inválido na XHTML e se você faz questão que seu documento valide não use esse elemento em documentos XHTML. Contudo, em HTML5 o elemento embed é válido.

O elemento object não é suportado pelo IE8 e anteriores

O elemento iframe e o elemento img são suportados por todas as versões de navegadores e validam em todas as marcações (X)HTML.

A seguir mostraremos a inserção de uma imagem SVG com uso de cada um dos elementos citados. Se você não visualizar a imagem descrita em cada caso é porque o navegador que está usando não suporta o tipo de inserção mostrado.

Inserção com o elemento embed

Para inserir um arquivo SVG com uso desse elemento use a marcação mostrada a seguir:

		<body>
		<embed type="image/svg+xml" src="../imagenssvg/inc-embed.svg" /> 
		

O atributo type define o tipo de conteúdo inserido pelo elemento embed e o valor image/svg+xml informa ao navegador que se trata de uma imagem SVG. O atributo src, nosso velho conhecido, mostra o caminho onde se encontra o arquivo.

A figura a seguir é SVG inserida com uso do elemento embed. Trata-se de um retângulo na cor azul com bordas na cor laranja (IE8 e anteriores não suportam).

Inserção com o elemento object

Para inserir um arquivo SVG com uso desse elemento use a marcação mostrada a seguir:

		<body>
		<object type="image/svg+xml" data="../imagenssvg/inc-object.svg"> 
		<p>Conteúdo alternativo ao gráfico SVG</p>
		</object>
		

O atributo type define o tipo de conteúdo inserido pelo elemento object e o valor image/svg+xml informa ao navegador que se trata de uma imagem SVG. O atributo data, nosso velho conhecido, mostra o caminho onde se encontra o arquivo.

O elemento object admite definir-se um conteúdo alternativo para navegadores que não o suportam como consta no código mostrado anteriormente.

A figura a seguir é SVG inserida com uso do elemento object. Trata-se de um círculo na cor vermelha com borda na cor preta (IE8 e anteriores não suportam).

Nota: Você deve estar visualizando a imagem no Internet Explorer versões 6 até 8 porque estou usando um script para renderização de SVG nos IEs quando se usa o elemento object. Na matéria Plugins e scripts para suporte SVG mostro o uso do script.

Conteúdo alternativo ao gráfico SVG

Inserção com o elemento iframe

Para inserir um arquivo SVG com uso desse elemento use a marcação mostrada a seguir:

		<body>
		<iframe width="ll" height="hh" src="../imagenssvg/inc-iframe.svg"> 
		<p>Conteúdo alternativo ao gráfico SVG</p>
		</iframe>
		

Os atributos width e height definem as dimensões do elemento iframe e devem ser compatíveis com as dimensões do gráfico a inserir. O atributo src, nosso velho conhecido, mostra o caminho onde se encontra o arquivo.

A figura a seguir é SVG inserida com uso do elemento iframe. Trata-se de um triângulo na cor verde com borda na cor vermelha (IE8 e anteriores não suportam).
O elemento iframe admite definir-se um conteúdo alternativo para navegadores que não o suportam como consta no código mostrado anteriormente.

Inserção com o elemento img

Para inserir um arquivo SVG com uso desse elemento use a marcação mostrada a seguir:

		.
		<body>
		<img width="ll" height="hh" src="../imagenssvg/inc-imagem.svg" alt="" /> 
		

Os atributos width e height definem as dimensões as dimensões do gráfico a inserir. O atributo src, nosso velho conhecido, mostra o caminho onde se encontra o arquivo.

A figura a seguir é SVG inserida com uso do elemento img. Trata-se de uma elipse na cor laranja com borda na cor preta (IE8 e anteriores não suportam).



Esta página foi criada em: 11/02/2011
Última modificação: 2017/04/4 21:16:34 GMT

Navegação

Links relacionados

Visitantes: Hoje: 10 Total: 90.829