HTML5 em linha SVG

HTML5 apoiar SVG embutido.

O que é SVG?

• SVG meios Scalable gráficos vetoriais (Scalable Vector Graphics)
• SVG para gráficos usados ​​para definir a rede baseada em vetor
• SVG usa formato XML definição de gráficos
• imagem SVG para ampliar ou mudança no tamanho da sua qualidade de imagem não serão perdidos
• SVG é um Wide Web Consortium padrão Mundial

vantagem SVG

Comparado com outros formatos de imagem (tais como JPEG e GIF), utilizando vantagens SVG:

• As imagens SVG podem ser criados e modificados usando um editor de texto
• As imagens SVG pode ser pesquisado, indexado, script ou comprimido
• SVG é escalável
• As imagens SVG podem ser impressos em qualquer resolução de alta qualidade
• SVG pode ser exagerada na qualidade de imagem não diminui

Suporte a navegadores

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari e apoio em linha SVG.

O SVG embutido diretamente na página HTML

Em HTML5, você será capaz de SVG elementos diretamente na página HTML:

resultados:

Saiba mais sobre SVG tutorial, visite SVG tutorial .

SVG e Canvas diferença entre os dois

SVG é um gráfico 2D utilizando descrição linguagem XML.

Tela para desenhar gráficos 2D usando JavaScript.

SVG baseada em XML, o que significa que cada elemento no SVG DOM está disponível. Você pode anexar manipuladores de eventos JavaScript para um elemento.

Em SVG, cada um presume-se que os objetos gráficos. Se as mudanças de propriedade de objeto SVG, o navegador pode reproduzir automaticamente os gráficos.

Canvas é processado pixel por pixel. Na tela, uma vez que o gráfico é desenhada é completa, não vai continuar a ser a atenção do browser. Se a posição for alterada, em seguida, toda a cena também precisa ser redesenhado, incluindo todos os objetos que podem ter sido cobertos com gráficos.

Comparação de SVG e Canvas

A tabela a seguir lista algumas das diferenças entre a tela e SVG.