English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Suporte a SVG inline. Arquivos SVG podem ser incorporados no documento HTML usando as seguintes tags: <embed>, <object> ou <iframe> (embed e iframe são tipos de frames incorporados), através desses tags, o código SVG pode ser diretamente incorporado em páginas HTML, ou também podemos linkar diretamente para o arquivo SVG.
SVG significa Gráficos Vetoriais Escaláveis (Scalable Vector Graphics)
SVG é usado para definir gráficos vetoriais baseados na web
SVG usa formato XML para definir gráficos
SVG imagens mantêm sua qualidade gráfica sem perda ao serem ampliado ou alterado de tamanho
SVG é um padrão da World Wide Web Consortium
Comparado com outros formatos de imagem (como JPEG e GIF), as vantagens de usar SVG são：
SVG imagens podem ser criadas e modificadas por editores de texto
SVG imagens podem ser pesquisadas, indexadas, scriptadas ou comprimidas
SVG é escalável
SVG imagens podem ser impressas em qualquer resolução com alta qualidade.
SVG pode ser ampliado sem perda de qualidade na imagem.
Internet Explorer 9+, Firefox, Opera, Chrome, e Safari suportam SVG inline.
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础教程网(oldtoolbag.com)</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>Teste para ver ‹/›
O resultado após a execução é o seguinte:
!doctype html> <html> <head> <meta charset="utf-8"> <title>Desenhar círculo com SVG oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="100" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg> </body> </html>Teste para ver ‹/›
No <svg> tagheightewidthA propriedade define a largura e altura do documento SVG;versionA propriedade define a versão do SVG usada;xmlns A propriedade pode definir o espaço de nomes do SVG;
<circle> é a etiqueta usada no SVG para criar círculos,cx e cy A propriedade define o centro da x e y Coordenadas, se esses dois atributos forem ignorados, o ponto será definido como (0, 0),rA propriedade define o raio do círculo;
stroke e stroke-width A propriedade controla como a contorno da forma é exibido;fill A propriedade define a cor dentro da forma;
Vamos ver a imagem de demonstração:
!doctype html> <html> <head> <meta charset="utf-8"> <title>Desenhar retângulo com SVG oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg> </body> </html>Teste para ver ‹/›
SVG é um tipo de descrição usando XML 2D linguagem de gráficos.
Canvas é desenhado usando JavaScript 2D gráficos.
SVG é baseado em XML, o que significa que todos os elementos no DOM do SVG estão disponíveis. Você pode anexar um manipulador de evento JavaScript a um elemento.
Em SVG, cada forma desenhada é considerada um objeto. Se as propriedades do objeto SVG forem alteradas, o navegador pode reproduzir automaticamente a forma.
O Canvas é renderizado pixel a pixel. No Canvas, uma vez que o gráfico for desenhado, ele não continua a receber atenção do navegador. Se sua posição mudar, toda a cena também precisa ser redesenhada, incluindo quaisquer objetos que possam ter sido cobertos pelo gráfico.
A tabela a seguir lista algumas diferenças entre canvas e SVG.
| Canvas | SVG |
|
|