Exibição de SVG no Web

Exibir SVG no navegador da Web (por exemplo, Chrome, Firefox e Internet Explorer) pode ser feito apontando o navegador para o URL do arquivo SVG, inserindo SVG em página HTML, usando elemento iframe, elemento img e outros métodos

Exibir SVG no navegador da Web (por exemplo, Chrome, Firefox e Internet Explorer) pode ser feito de várias maneiras:

• O navegador aponta para o URL do arquivo SVG.

• Inserir SVG em página HTML

Você pode inserir imagens SVG em um arquivo HTML de várias maneiras:

• Usar elemento iframe

• Usar elemento img

• Usar imagens SVG como imagens de fundo.

• Usar elementos svg

• Usar elementos de嵌入

iframe框架

Se você inserir o URL da imagem SVG, pois o navegador pode exibir imagens SVG, você também pode usá-lo para incluir imagens SVG em uma página HTML iframe. Este é um exemplo:

<iframe　src="mySvgImage.svg"　width="200"　height="200"　>

img

img é como usar qualquer outro tipo de imagem, usar elementos para嵌入SVG imagem também é assim. Você pode escrever o URL da imagem SVG no atributo src do elemento img, conforme mostrado:

<img　src="/svg/círculo-elemento-1.jsp">

As imagens SVG serão exibidas na página HTML da mesma forma que outras imagens.

SVG como imagem de fundo

Como os navegadores tratam as imagens SVG da mesma forma que as imagens bitmap, você pode usar imagens SVG como imagens de fundo via CSS. Este é um exemplo:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
{}

Pode ser necessário ajustar o tamanho da imagem de fundo do SVG para informar o navegador como escaloná-lo. Você pode ver isso em meuTutorial de imagens de fundo CSSpara saber mais sobre imagens de fundo.

Elemento svg no HTML

Você pode incorporar elementos SVG diretamente na página HTML, conforme mostrado a seguir:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

Este elemento div é apenas para ilustrar que o elemento svg pode ser incorporado diretamente no HTML. No entanto, o elemento svg não precisa ser incorporado dentro de um elemento div.

Ao usar o elemento SVG, você pode incorporar diretamente o SVG em uma página HTML, em vez de colocá-lo em um arquivo próprio. Você pode ajustar a largura e a altura da imagem SVG adicionando os atributos width e height ao elemento SVG.

Ao usar o elemento svg, você ainda pode gerar SVG diretamente no navegador usando JavaScript. D3 A API JavaScript é muito boa nisso. A API JavaScript jQuery também pode fazer isso.

Ao usar o elemento svg, você também pode aplicar estilos CSS ao SVG e seus elementos filhos, da mesma forma que você faria com qualquer outro HTML. Observe que os nomes de algumas propriedades CSS dos elementos SVG às vezes são diferentes dos nomes dos elementos HTML.

embed

No início do SVG, você podia usar o elemento embed para incorporar imagens SVG. Naquela época, não todos os navegadores suportavam SVG. Hoje, eu recomendo usar os elementos img ou svg. Aqui está um exemplo de elemento de incorporação e uma explicação histórica:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image"/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

Coloque esse elemento no local do arquivo SVG no arquivo HTML. A propriedade src deve apontar para a URL da imagem SVG.

Observe a propriedade pluginspage. Isso é necessário para navegadores antigos que não podem exibir SVG nativamente. Esses navegadores precisam do plugin navegador SVG da Adobe para exibir imagens. No Internet Explorer 7e Firefox 3.0.5nele, essa propriedade é desnecessária, mas não faz mal incluí-la.

Width e Height attributes

Independentemente de você estar usando o elemento img, svg ou embed para inserir a imagem SVG, você pode usar os atributos width e height para definir a largura e altura da imagem. Se a imagem no arquivo SVG for mais larga ou mais alta do que esses números, apenas uma parte da imagem SVG será exibida. Certifique-se de que a largura e altura que você define sejam suficientes para exibir a imagem SVG completa (ou a largura que você deseja exibir).

Usar SVG como imagem de fundo do elemento HTML

Você pode usar CSS background-A propriedade image usa a imagem SVG como imagem de fundo do elemento HTML. Basta apontar para o arquivo de imagem SVG da mesma forma que faria com qualquer outro arquivo de imagem. Não todos os navegadores suportam completamente isso, teste em navegadores que você planeja suportar. Aqui está um exemplo:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
{}

Compatibilidade de suporte do navegador

Internet Explorer 9e versões posteriores podem exibir SVG nativamente. No momento da escrita deste texto, Firefox, Chrome, Safari, Opera e navegadores Android já têm a capacidade de exibir SVG nativamente há algum tempo. Safari para iOS, navegadores móveis Opera Mini e Android Chrome também são assim.

Content Type

Se você apontar a URL do navegador para.svg, o navegador será capaz de adivinhar o tipo mime do arquivo SVG. No entanto, quando SVG é gerado por servlets, JSP, PHP, ASP.NET páginas ou outros componentes de aplicações web, o final da URL não é sempre.svg.
Para que o navegador ainda interprete o arquivo como arquivo SVG, você deve definir o Content-Type HTTP header

image/svg+xml

Se você verificar o elemento <embed> anterior, você notará que isso também é feito no atributo type. Definir o tipo de conteúdo no elemento <embed> é suficiente para o Internet Explorer, mas não o é para o Firefox. É necessário também definí-lo no tipo de conteúdo da resposta HTTP.

Além disso, se você direcionar o navegador diretamente para o arquivo SVG no servidor, não há etiqueta <embed> para executar isso para você. Então, você precisará configurar manualmente o tipo de conteúdo na resposta HTTP.
Isso é o método para fazer isso no JSP:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

Isso é muito semelhante a executar em servlet. Se você estiver usando uma tecnologia diferente do Java, basta buscar no Google por exemplos de como configurar o tipo de conteúdo na resposta HTTP. Haverá muitos exemplos.