Exemplo de SVG

Experimente você mesmo a instância

O exemplo a seguir insere diretamente o código SVG no código HTML.

Firefox, Internet Explorer 9, Google Chrome, Opera e Safari todos suportam fazer isso.

Exemplo de SVG

Formas básicas SVG

Círculo
Retângulo
Retângulo opaco
Retângulo com opacidade 2
Retângulo com cantos arredondados
Elíptico
Três elípticos se sobrepostos
Dois elípticos
Linha
Polígono com três lados
Polígono com quatro lados
Estrela
Outra estrela
Linha de linha
Outro caminho de linha
Caminho
Curva de Bézier quadrática
Escrever um texto
Texto girado
Texto multilinha
Texto como link
Definir cor de linha, texto ou contorno (stroke)
Definir largura de linha, texto ou contorno (stroke-width)
Definir tipos de terminais de caminho abertos (stroke-linecap)
Definir traço de traço (stroke-dasharray)

Filtros do SVG

feGaussianBlur - Efeito de desfoque
feOffset - Deslocar um retângulo e mesclar a imagem original no topo da imagem deslocada
feOffset - Desfocar a imagem deslocada
feOffset - Fazer a sombra preta
feOffset - Tratar sombra com uma cor específica
Filtro feBlend
Filtro 1
Filtro 2
Filtro 3
Filtro 4
Filtro 5
Filtro 6

Gradiente SVG

Elipse com gradiente linear horizontal de amarelo para vermelho
Elipse com gradiente linear vertical de amarelo para vermelho
Elipse e texto com gradiente linear horizontal de amarelo para vermelho
Elipse com gradiente radial de branco para azul
Uma elipse com gradiente radial de branco para azul

Itens SVG

Retângulo que desaparece repetidamente nos 5 segundos
Um retângulo que muda de cor e aumenta continuamente
Três retângulos que mudam de cor
Mover texto ao longo do caminho de movimento
Mover, girar e escalar texto ao longo do caminho de movimento
Mover, girar e escalar texto ao longo do caminho de movimento + retângulo crescente que muda de cor
Rotacionar elipse