Tente-it Yourself Exemplos
Os exemplos abaixo inserir o código SVG diretamente no código HTML.
Isto é suportado pelo Firefox, Internet Explorer 9, Google Chrome, Opera e Safari.
Exemplos SVG
SVG formas básicas
Um círculo
Um rectângulo
Um retângulo com opacidade
Um retângulo com opacidade 2
Um retângulo com cantos arredondados
uma elipse
Três elipses em cima uns dos outros
duas elipses
Uma linha
Um polígono com três lados
Um polígono com quatro lados
Uma estrela
outra estrela
A polilinha
outra polilinha
Um caminho
A curva de Bezier quadrática
Escrever um texto
Rodar um texto
Texto em várias linhas
Texto como um link
Define a cor de uma linha, texto ou esboço (stroke)
Define a largura de uma linha, texto ou esboço (stroke-width)
Define diferentes tipos de terminações para um caminho aberto (stroke-linecap)
Linhas tracejadas define (stroke-dasharray)
Filtros SVG
feGaussianBlur - efeito blur
feOffset - compensar um retângulo, em seguida, misturar o original no topo da imagem compensada
feOffset - borrar a imagem compensada
feOffset - fazer a sombra negra
feOffset - tratar a sombra como uma cor
Um filtro feBlend
filtro 1
filtro 2
filtro 3
Filter 4
filtro 5
filtro 6
SVG gradientes
Uma elipse com um gradiente linear horizontal de amarelo para vermelho
Uma elipse com um gradiente linear vertical, de amarelo para vermelho
Uma elipse com um gradiente linear horizontal de amarelo para vermelho, e um texto
Uma elipse com um gradiente radial de branco para azul
Outra elipse com um gradiente radial de branco para azul
SVG Diversos
Retângulo que repetidamente desaparecer mais de 5 segundos
Um retângulo crescente que vai mudar de cor
Três retângulos que vai mudar de cor
Mova o texto ao longo de um caminho de movimento
Mover, girar e texto escala ao longo de um caminho de movimento
Mover, girar e texto escala ao longo de um caminho de movimento + um retângulo crescente que vai mudar de cor
rotativa elipses