Este artigo apresenta principalmente os conceitos básicos de SVG, bem como a diferença entre SVG e tela, e finalmente dá um exemplo simples para facilitar todos para entender melhor os gráficos vetoriais escaláveis SVG. Recomendado a todos.
Enciclopédia Baidu:
O SVG Scalable Vector Graphics é um formato gráfico baseado na linguagem de marcação extensível (XML) que descreve gráficos vetoriais bidimensionais. O SVG é um novo formato de 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 usa a linguagem descritiva no formato de texto para descrever o conteúdo da imagem, por isso é um formato gráfico vetorial independente da resolução da imagem.
O que é SVG?SVG refere -se a gráficos vetoriais escaláveis (gráficos vetoriais escaláveis)
O SVG é usado para definir gráficos baseados em vetores para redes
SVG define gráficos em formato XML
As imagens SVG não perderão a qualidade dos gráficos quando forem ampliados ou alterados em tamanho.
SVG é o padrão para a World Wide Web Alliance
SVG é um todo com padrões W3C, como DOM e XSL
A diferença entre tela e svg:Svg
O SVG é um idioma que usa XML para descrever gráficos 2D.
O SVG é baseado no XML, o que significa que todos os elementos do SVG DOM estão disponíveis. Você pode anexar um manipulador de eventos JavaScript a um elemento.
No SVG, cada figura desenhada é tratada como um objeto. Se as propriedades do objeto SVG mudarem, o navegador poderá reproduzir automaticamente os gráficos.
Características:
Sem dependência de resolução
Manipuladores de eventos de suporte
Melhor para aplicações com grandes áreas de renderização (como o Google Maps)
A alta complexidade pode desacelerar a renderização (sem aplicação que usa o DOM)
Não é adequado para aplicativos de jogo
Tela
A tela desenha gráficos 2D através do JavaScript.
A tela é renderizada por pixel por pixel.
Na tela, depois que o gráfico é desenhado, ele não continua chamando a atenção do navegador. Se sua posição mudar, toda a cena também precisará ser repintada, incluindo qualquer objeto que possa ter sido substituído pelos gráficos.
Características:
Dependente da resolução
Os manipuladores de eventos não são suportados
Habilidade de renderização de texto fraca
Capacidade de salvar imagens de resultados no formato .png ou .jpg
Melhor para jogos intensivos em imagem, muitos dos quais são frequentemente repintados
Exemplo SVG:Copie o código