Tutorial de SVG

O objetivo do tutorial HTML SVG é ajudá-lo a começar rapidamente e usar SVG, e também pode usar este tutorial como referência rápida, aqui tentaremos fornecer mais exemplos de SVG, cobrindo uma faixa mais ampla, para ajudá-lo a dominar o uso do SVG rapidamente

Introdução ao SVG

SVG é a abreviação de Escalável Vetorial Graphics. É um formato gráfico onde a forma é especificada em XML. Em seguida, o visualizador SVG apresenta o XML. Hoje, a maioria dos navegadores da Web pode exibir SVG, assim como eles podem exibir PNG, GIF e JPG.
Internet Explorer 8（e versões anteriores）pode ser necessário instalar o Adobe SVG Viewer para visualizar SVG no navegador. 9 +, o Chrome e o Firefox suportam SVG nativamente.
SVG é usado para gráficos vetoriais bidimensionais.
Se não estiver certo de que o SVG é adequado para você ou seu projeto, navegue rapidamente pela página de exemplo do SVG para entender rapidamente as funções do SVG.

Editor online do SVG -　 SVG pode ser editado online, e SVG pode ser convertido em código-fonte SVG

Exemplos de SVG em Diversos Setores　 - Exemplos básicos de SVG, para ajudá-lo a se familiarizar rapidamente com SVG

Manual de referência do SVG - Coletar elementos comuns usados no SVG e métodos de uso das propriedades dos elementos

SVG é usado para gráficos vetoriais

Como um formato de gráfico vetorial, SVG é muito útil para gráficos de tipo vetorial, por exemplo:

1. Gráficos bidimensionais no sistema de coordenadas XY.

2. Gráficos de barras, gráficos de pizza, etc.

3. Ícones e logotipos extensíveis para Web, tablets e aplicativos móveis, bem como Webapps.

4. Planos de construção e design

5. Etcétera

Como um formato de gráfico vetorial, as formas a serem exibidas são armazenadas como estruturas vetoriais ou semelhantes a vetoriais. Em outras palavras, como números. Não em pixels.

“Ajustável” significa que o espectador pode ampliar ou diminuir a imagem SVG sem perda de qualidade. Isso é possível porque os gráficos são definidos em números em vez de pixels. Ampliar ou diminuir a imagem SVG significa simplesmente multiplicar ou dividir os números que definem a forma SVG.

Embora seja possível嵌入位图图形到SVG图像中，SVG não é uma escolha ideal para gráficos bitmaps como fotos, filmes, etc. É uma maneira conveniente de desenhar formas ou texto em imagens de bitmap.

SVG é muito adequado para gerar imagens/Gráfico/Gráfico

SVG é um formato de XML (formato de texto), fácil de ser gerado por Servlet, JSP, ASP.NET, PHP ou outras tecnologias de aplicativos da Web. Isso torna o SVG muito adequado para gráficos e gráficos gerados por computador. Curiosamente, você geralmente precisa gerar o tipo de gráfico mais adequado para SVG no aplicativo web (gráficos, gráficos, gráficos, etc.). Isso torna o SVG ainda mais adequado para gerar gráficos e gráficos.

Escrever Script de SVG

Você pode modificar a imagem de SVG gerada pelo navegador usando JavaScript. Isso permite usar SVG para demonstrações mais dinâmicas, até mesmo pequenos jogos.

Sobre este Tutorial

O objetivo deste tutorial é ensinar-lhe a usar SVG em um curto período de tempo e usar este tutorial como referência rápida no futuro. Tentaremos cobrir o máximo possível de SVG, mas não pretendemos cobrir todos os pontos da especificação do SVG. Assim que você tiver uma compreensão razoável das bases, você pode facilmente consultar a especificação do SVG para tópicos mais avançados ou específicos.