Introdução ao HTML5 SVG 2D 1 - SVG (GRAPHICS VECTOR SCALÁVEL)

No passado, os gráficos exibidos em navegadores, como JPEG, GIF, etc., eram bitmaps, e esses formatos de imagem eram baseados em varas. Em uma imagem raster, o arquivo de imagem define o valor de cor de cada pixel na imagem. O navegador precisa ler esses valores e tomar ações correspondentes. Esse tipo de capacidade de reprodução de imagem é relativamente forte, mas parecerá insuficiente em alguns casos. Por exemplo, quando um navegador exibe uma imagem em tamanhos diferentes, uma borda irregular é geralmente gerada e o navegador precisa inserir ou adivinhar valores para pixels que não existem na imagem original; Isso causará distorção da imagem. Além disso, a animação para bitmaps é limitada a gerar animações do tipo book invertido, ou seja, exibindo imagens individuais de maneira rápida e contínua.

O diagrama vetorial supera algumas dessas dificuldades, especificando as instruções necessárias para determinar os valores de cada pixel, em vez de especificar os próprios valores. Por exemplo, em vez de fornecer valores de pixel para um círculo com um diâmetro de polegada, os gráficos vetoriais dizem ao navegador para criar um círculo com um diâmetro de polegada e, em seguida, deixe o navegador (ou plug -in) fazer o restante. Isso remove muitas limitações de gráficos raster; Com os gráficos vetoriais, o navegador sabe apenas que deve desenhar um círculo. Se a imagem precisar ser exibida três vezes o tamanho normal, o navegador simplesmente desenha o círculo no tamanho correto sem executar o método de inserção usual das imagens raster. Da mesma forma, as instruções recebidas pelo navegador podem estar mais facilmente vinculadas a fontes de informação externas (como aplicativos e bancos de dados) e, para animar a imagem, o navegador precisa apenas receber instruções sobre como manipular propriedades (como raio ou cor).

No sistema HTML, a tecnologia mais usada para desenhar gráficos vetoriais são os elementos de tela recém -adicionados em SVG e HTML5. Ambas as tecnologias suportam os diagramas de vetor de desenho e rasters.

Gráficos vetoriais escaláveis ​​(gráficos vetoriais escaláveis, SVG para curta) é uma linguagem que usa XML para descrever gráficos bidimensionais (SVG segue estritamente a sintaxe XML). O SVG permite três tipos de objetos gráficos: formas gráficas vetoriais (como caminhos compostos por linhas retas e curvas), imagens e texto. Objetos gráficos (incluindo texto) podem ser agrupados, estilizados, convertidos e combinados em objetos renderizados anteriormente. O conjunto de recursos SVG inclui transformações aninhadas, caminhos de recorte, máscaras alfa e objetos de modelo.

Os desenhos de SVG são interativos e dinâmicos. Por exemplo, scripts podem ser usados ​​para definir e acionar animações. Isso é muito poderoso em comparação com o flash. O Flash é um arquivo binário e é difícil criar e modificar dinamicamente. Embora o SVG seja um arquivo de texto, as operações dinâmicas são bastante fáceis. Além disso, o SVG fornece diretamente elementos relevantes para a conclusão da animação, o que é muito conveniente para operar.

O SVG é compatível com outros padrões da Web e suporta diretamente o modelo de objeto Document. Esse também é um ponto muito poderoso em comparação com a tela no HTML5 (observe aqui que o SVG também usa algo semelhante à tela para exibir gráficos de SVG. Mais tarde, você descobrirá que muitos recursos são um pouco semelhantes à tela no HTML5; se o artigo não indicar claramente que é a tela do SVG, tudo refere -se a eleva Portanto, muitas aplicações avançadas do SVG podem ser facilmente implementadas usando scripts. Além disso, os elementos gráficos da SVG suportam basicamente eventos padrão no DOM. Um grande número de manipuladores de eventos como OnMouseOver e OnClick pode ser atribuído a qualquer objeto gráfico SVG. Embora a velocidade de renderização do SVG não seja tão boa quanto o elemento de tela, é melhor porque a operação DOM é muito flexível, e essa vantagem pode compensar completamente a desvantagem da velocidade.

Pode -se dizer que o SVG é um protocolo e um idioma; É um elemento padrão de HTML e um formato de imagem.

O SVG não é algo no HTML5, mas também é uma das tecnologias populares da página. Vamos colocá -lo neste tópico.

Comparado com outros formatos de imagem, o SVG tem muitas vantagens (muitas vantagens vêm das vantagens dos gráficos vetoriais):

• Os arquivos SVG são Pure XML e podem ser lidos e modificados por muitas ferramentas (como o bloco de notas).

• O SVG é menor em tamanho e mais compressível em comparação com as imagens JPEG e GIF.

• O SVG é escalável, pode ser aumentado sem a qualidade da imagem degradante e pode ser impresso com alta qualidade em qualquer resolução.

• O texto na imagem SVG é opcional e pesquisável (muito adequado para fazer mapas).

• O SVG pode ser executado com a tecnologia Java.

• SVG é um padrão aberto.

O principal concorrente do SVG é o Flash. Comparado com o Flash, a maior vantagem do SVG é que ele é compatível com outros padrões (como XSL e DOM) e é fácil de operar, enquanto o Flash é uma tecnologia privada de origem unosa. O SVG também tem uma grande vantagem em outros aspectos, como formatos de armazenamento, geração de gráficos dinâmicos, etc.

Em relação aos navegadores que suportam HTML5 e SVG, não é o foco da discussão aqui. Basicamente, está quase pronto com o mais recente navegador Chrome ou Firefox (os usuários do ou seja, os usuários devem instalar o IE9. Quanto às versões antes do IE9, se você precisar instalar plug-ins SVG, irei ignorá-lo aqui). Para os navegadores que suportam diretamente o SVG, o SVG adota principalmente métodos de renderização de dois e lados.

SVG é um elemento HTML padrão, basta escrevê -lo diretamente no HTML, consulte o seguinte exemplo:

<? xml versão = "1.0" coding = "utf-8"?>

<! Doctype html>

<html>

<head>

<!-<meta content = "text /html; charset = utf-8" http-equiv = "content-type" />->

<title> Minha primeira página SVG </ititle>

</head>

<Body>

<svg xmlns = "http://www.w3.org/2000/svg" versão = "1.1"

width = "200px">

<ret X = "0" y = "0"

preench = "nenhum" stroke = "preto"/>

<círculo cx = "100" cy = "100" r = "50"

style = "AVC: preto; preenchimento: vermelho;"/>

</svg>

</body>

</html>

Observe que a parte inicial da declaração XML, que está relacionada ao namespace SVG XMLNS, versão da versão e outras partes, considerando principalmente problemas de compatibilidade; Essas peças não são basicamente necessárias no HTML5 (é melhor fazê -lo se deve escrevê -lo ou não).

SVG independente refere -se ao fornecimento de formatos de arquivo gráficos vetores usando extensões de arquivo SVG. Incorpore esse arquivo SVG no navegador e você pode usá -lo.

1. Arquivos/páginas SVG independentes, os modelos definidos são basicamente os mesmos que os seguintes:

<Svg>

<!- ​​SVG Markup aqui. ->

</svg>

Salve esses arquivos de texto em arquivos com SVG como extensão, como o Sun.svg. Esses arquivos podem ser abertos e navegados diretamente no navegador ou incorporados em outras páginas como referências.

2. HTML Reference Arquivos SVG externos.

Basta usar o objeto ou o elemento IMG para incorporar o gráfico SVG, por exemplo, o pequeno exemplo a seguir:

<! Doctype html>

<html>

<head>

<title> Minha primeira página SVG </ititle>

</head>

<Body>

<Object Data = "Sun.svg" Type = "Image/SVG+XML"

width = "300px">

<!-Implemente o código de Fallback aqui ou exiba uma mensagem:->

<p> Seu navegador não suporta SVG - atualize para um navegador moderno. </p>

</ject>

<img src = "sun.svg" />

</body>

</html>

De fato, o SVG também pode ser colocado em outros documentos XML ou pode ser formatado e verificado usando tecnologias relacionadas a XML, como outros documentos XML. Este não é o ponto, então é omitido aqui.

O SVG é renderizado estritamente na ordem de definição de elementos, que é diferente do HTML que controla a hierarquia pelos valores do índice z. No SVG, os elementos escritos na frente são renderizados primeiro e os elementos escritos na parte de trás são renderizados mais tarde. Os elementos renderizados posteriormente substituirão os elementos anteriores. Embora às vezes afetado pela transparência e não pareça substituído, o SVG é realmente renderizado estritamente em ordem de sequência.

NOTA: O SVG é definido em XML, por isso é sensível ao caso, o que é diferente do HTML.

Documento oficial: http://www.w3.org/tr/svg11/

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/