HTML5 SVG pode escalar gráficos vetoriais

O SVG CAN ZOAD Vector Graphics (Scalable Vector Graphics) é um formato gráfico baseado em linguagem de tag escalável (XML) para descrever os gráficos vetoriais bilimensionais. O SVG é um novo formato gráfico vetorial bidimensional formulado pelo W3C e também é um padrão gráfico de vetor de rede na especificação. O SVG segue estritamente a sintaxe XML e descreve o conteúdo da imagem no idioma descritivo do formato de texto.

SVG refere -se a gráficos vetoriais escaláveis

O SVG é usado para definir gráficos baseados em vetores para redes

SVG usa o formato XML para definir gráficos

As imagens SVG não perderão a qualidade dos gráficos ao ampliar ou alterar o tamanho

SVG é o padrão da Wanwei Network Alliance

Padrões SVG e W3C como DOM e XSL são um todo

SVG é um idioma que descreve gráficos 2D no XML.

O SVG é baseado no XML, o que significa que cada elemento no SVG DOM está disponível. Você pode adicionar um processador de eventos JavaScript a um determinado elemento.

No SVG, cada gráfico desenhado é considerado um objeto. Se o atributo do objeto SVG mudar, o navegador poderá reproduzir automaticamente os gráficos.

Características:

Resolução não dependente

Suporte Processador de Eventos

A aplicação mais adequada com grandes áreas de renderização (como o Google Map)

A alta complexidade desacelerará a renderização (a aplicação de qualquer DOM excessivo não é rápido))

Não é adequado para aplicativos de jogo

A tela desenha gráficos 2D através do JavaScript.

A tela é renderizada por pixels.

Na tela, uma vez que o gráfico for desenhado, ele não continuará chamando a atenção do navegador. Se o local mudar, a cena inteira também precisará ser reproduzida, incluindo qualquer objeto que possa ter sido coberto por gráficos.

Características:

Dependências

Não apoie o processador de eventos

Habilidade de renderização de texto fraca

Pode salvar a imagem do resultado no formato .png ou .jpg

O jogo mais adequado -jogo intensivo, muitos deles serão frequentemente pintados

Exemplo simples:

 <svg width = 100% altura = 100%> <círculo cx = 300 cy = 60 r = 50 stake =#ff0 width = 3 preenchimento = vermelho /> </svg>

No passado, os gráficos exibidos no navegador, como JPEG, GIF, etc., eram todos gráficos. Na imagem da grade, o arquivo de imagem define o valor de cor de cada pixel na imagem. O navegador precisa ler esses valores e fazer ações correspondentes. Esta imagem tem uma forte capacidade de reprodução, mas parecerá insuficiente em alguns casos. Por exemplo, quando o navegador é exibido em tamanhos diferentes, a borda do Jaggedness é geralmente gerada. Além disso, a animação para o bitmap é limitada à animação que gera o tipo de livros de rolamento, ou seja, exibe de maneira rápida e continuamente imagens separadas.

O diagrama vetorial é especificado para determinar as instruções necessárias para cada valor de pixels em vez do próprio valor especificado, o que supera parte dessas dificuldades. Por exemplo, os gráficos vetoriais não fornecem mais valores de pixel para um diâmetro de uma polegada, mas peça ao navegador para criar um círculo de um diâmetro de uma polegada e depois deixe o navegador (ou plugue) fazer o restante. Isso elimina muitas restrições nos gráficos de grade; Se a imagem precisar ser exibida três vezes o tamanho normal, o navegador será usado para desenhar um círculo de acordo com o tamanho correto, sem precisar executar o método de inserção comum da imagem da grade. Da mesma forma, as instruções recebidas pelo navegador podem ser mais fáceis de vincular às fontes de informação externa (como o aplicativo e o banco de dados)

No sistema HTML, a tecnologia de vetoring mais usada é os elementos de tela SVG e HTML5 adicionados recém -adicionados. Ambas as tecnologias suportam mapas de vetor de desenho e grade.

Os gráficos vetoriais de escala (SVG (SVG) é uma linguagem que descreve os gráficos bilimensionais (SVG segue estritamente a sintaxe XML). O SVG permite três tipos de objetos gráficos: gráficos vetoriais (como caminhos compostos por linear e curvas), imagens e textos. Objetos gráficos (incluindo texto) podem ser embalados, estilizados, transformados e combinados nos objetos apresentados anteriormente. Os conjuntos de funções SVG incluem conversão aninhada, caminhos de cisalhamento, máscaras alfa e objetos de modelo.

O desenho SVG é interativo e dinâmico. Por exemplo, você pode usar scripts para definir e acionar animações. Isso é muito poderoso em comparação com o flash. O Flash é um arquivo binário, que é mais difícil de criá -lo e modificar. O SVG é um arquivo de texto e a operação dinâmica é bastante fácil. Além disso, o SVG fornece diretamente elementos relacionados para concluir a animação, o que é muito conveniente de operar.

O SVG é compatível com outros padrões da Web e suporta diretamente o modelo de objeto Document DOM. Isso também é muito poderoso em comparação com a tela no HTML5 (observe aqui, o SVG também usa uma tela semelhante para mostrar os gráficos SVG. Você descobrirá que muitos recursos são um pouco semelhantes à tela de html5; no artigo, se for Não afirmou claramente que é a tela do SVG, refere -se ao elemento Canvas no HTML5). Portanto, pode ser conveniente usar o script para obter muitas aplicações avançadas do SVG. E os elementos gráficos da SVG suportam basicamente eventos padrão no DOM. Um grande número de programas de processamento de eventos (como OnMouseOver e OnClick) pode ser alocado para qualquer objeto gráfico SVG. Embora a velocidade de renderização do SVG não seja tão boa quanto o elemento de tela, é muito flexível na operação DOM.

Diz -se que o SVG é um protocolo ou um idioma;

O SVG não é algo no HTML5, mas também é uma das técnicas técnicas da página e vamos colocá -la nesse tópico.

Comparado com outros formatos de imagem, o SVG tem muitas vantagens (muitas vantagens vêm das vantagens do mapa vetorial):

• O arquivo SVG é puro XML, que pode ser lido e modificado por muitas ferramentas (como o bloco de notas).

• Comparado com imagens JPEG e GIF, o SVG é menor e mais comprimido.

• O SVG é escalável e pode ser aumentado quando a qualidade da imagem é reduzida.

• O texto na imagem SVG é opcional e também está disponível (adequado para fazer mapas).

• O SVG pode ser executado com a tecnologia Java.

• SVG é o padrão de abertura.

O principal concorrente do SVG é o Flash. Comparado ao Flash, a maior vantagem do SVG é que ele é compatível com outros padrões (como XSL e DOM) e é conveniente de operar, enquanto o Flash é uma tecnologia privada impopular. Outros, como formatos de armazenamento e gráficos dinâmicos, o SVG também ocupa uma grande vantagem.

O navegador que suporta HTML5 e SVG não é o foco da discussão aqui. Para os navegadores que suportam diretamente o SVG, o SVG usa principalmente dois lados e duas maneiras.

Inner United to Html

SVG é o elemento HTML padrão, apenas escreva -o diretamente no HTML.

 <? xml versão = 1.0 Encoding = utf-8?> <! doctype html> <html> <head> <!-<meta content = text /html; -> <title> Minha primeira página SVG </ititle> </ad Head> <body> <svg xmlns = http://www.w3.org/2000/svg versão = 1.1 width = 200px Height = 200px> <St> x = 0 y = 0 largura = 100% de altura = 100% preenchimento = nenhum golpe = preto/> <círculo cx = 100 cy = 100 r = 50 estilo: preto; > </body> </html>

Observe que o início da instrução XML no início e o espaço do nome do SVG, XMLNS, versão da versão etc., considerando principalmente o problema da compatibilidade;

Arquivo SVG independente

SVG independente refere -se ao fornecimento de um formato de arquivo gráfico vetorial expandindo a extensão do arquivo SVG. Este arquivo SVG está incorporado no navegador.

1. O arquivo/página SVG independente, o modelo definido é basicamente como o seguinte:

 <svg width = 100% altura = 100%> <!-SVG Markup aqui .-> </svg>

Salve esses arquivos de texto em arquivos com SVG como uma extensão, como o Sun.svg.

2.html Referencia o arquivo SVG externo.

Use elementos de objeto ou IMG para incorporar os gráficos SVG, por exemplo, o exemplo a seguir:

 <! Implementar o código de Fallback aqui ou exibir uma mensagem:-> <p> Seu navegador não suporta atualização para um navegador moderno. = 10 largura = 30 altura = 30 AVC = preenchimento preto = largura transparente de derrame = 5/> <rad = 10 rx = 10 largura = 30 altura = 30 Troke = preto preto = transparente Width = 5/> <Circle CX CX = 25 cy = 75 r = 20 AVC = preenchimento vermelho = largura transparente de derrame = 5/> <ellipse cx = 75 rx = 20 ry = 5 s troca = preenchimento vermelho = largura transparente de acidente vascular cerebral = 5/> <linha x1 = 10 x2 = 50 y1 = 110 y2 = 150 AVC = preenchimento de laranja = largura transparente de acidente vascular cerebral = 5/> <Pontos da poliina = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 STOKE = ENCHEIRO LARANJA = Largura de acidente vascular cerebral transparente = 5/> <Pontos de polígono = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 AVC = preenchimento verde = Width transparente = 5/> <caminho d = m20, 230 Q40, 205 50, 230 T90, 230 Fill = Nenhuma

Este exemplo desenha muitas formas: retângulos normais, retângulos com cantos arredondados, redondos, ovais, retos, dobráveis, polígonos e caminho. Estes são elementos gráficos básicos. Embora existam muitas maneiras de desenhar um gráfico, como retângulos podem ser implementados com o RECT ou podem ser implementados com o caminho, mas ainda devemos tentar manter o conteúdo do SVG curto e inteligente, fácil de ler.