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.
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).
Navegação
Links relacionados
Visitantes: Hoje: 7 Total: 107.211