Tutorial de SVG

SVG refere-se ao Gráfico Vetorial Escalável (Scalable Vector Graphics)

SVG é XML definir gráficos baseados em vetores.

exemplos em cada capítulo

Usando nosso editor "Experimente pessoalmente", você pode editar SVG e, em seguida, clicar no botão para ver os resultados.

Exemplo de SVG

<html>
<body>
<h1>Meu primeiro SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

experimente pessoalmente

conhecimentos básicos necessários

Antes de continuar, você deve ter alguma compreensão básica dos seguintes conteúdos:

  • HTML
  • básicos XML

Se você quiser aprender esses conteúdos primeiro, acesse os tutoriais relacionados em nossa página inicial.

O que é SVG？

  • SVG refere-se ao Gráfico Vetorial Escalável (Scalable Vector Graphics)
  • SVG usado para definir gráficos vetoriais na Web
  • SVG definir gráficos em formato XML
  • SVG cada elemento e cada atributo do arquivo pode ser animado
  • SVG é um padrão recomendado do W3C
  • SVG integra-se com outros padrões do W3C, por exemplo DOM e XSL

SVG é um padrão recomendado do W3C

SVG 1.0 tornou-se padrão recomendado do W3C em 4 de setembro de 2001.

SVG 1.1 tornou-se padrão recomendado do W3C em 14 de janeiro de 2003.

SVG 1.1 (segunda edição) tornou-se padrão recomendado do W3C em 16 de agosto de 2011.

SVG vantagens

Comparado com outros formatos de imagens (como JPEG e GIF), a utilização de SVG As vantagens são:

  • SVG as imagens podem ser criadas e editadas com qualquer editor de texto
  • SVG as imagens podem ser pesquisadas, indexadas, scriptadas e comprimidas
  • SVG as imagens são extensíveis
  • SVG as imagens podem ser impressas em qualquer resolução com alta qualidade
  • SVG as imagens são escaláveis
  • SVG as imagens não perdem qualidade ao serem ampliadas ou ajustadas
  • SVG é um padrão aberto
  • SVG arquivos são puros XML

criar SVG imagens

SVG As imagens podem ser criadas com qualquer editor de texto, mas é recomendável usar programas de desenho (por exemplo InkscapeCriar imagens SVG geralmente é mais conveniente.