Ejemplo de SVG

Prueba el ejemplo por tu cuenta

El siguiente ejemplo integra el código SVG directamente en el código HTML.

Firefox, Internet Explorer 9, Google Chrome, Opera y Safari todos lo soportan.

Ejemplo de SVG

Formas básicas de SVG

Círculo
Rectángulo
Rectángulo opaco
Rectángulo con opacidad 2
Rectángulo con esquinas redondeadas
Elipse
Tres elipses que se superponen
Dos elipses
Línea
Un polígono con tres lados
Un polígono con cuatro lados
Estrella
Otra estrella
Línea recta
Otra línea recta
Ruta
Curva cuadrática
Escribir un texto
Texto girado
Texto en múltiples líneas
Texto como enlace
Definir el color de la línea, texto o contorno (stroke)
Definir el ancho de la línea, texto o contorno (stroke-width)
Definir los diferentes tipos de final de la ruta abierta (stroke-linecap)
Definir la línea de puntos discontinuos (stroke-dasharray)

Filtros de SVG

feGaussianBlur - Efecto de desenfoque
feOffset - Desplazar un rectángulo y luego mezclar la imagen original en la parte superior de la imagen desplazada
feOffset - Desenhar una imagen borrosa con desplazamiento
feOffset - Hacer la sombra negra
feOffset - Tratar la sombra con un color específico
Filtro feBlend
Filtro 1
Filtro 2
Filtro 3
Filtro 4
Filtro 5
Filtro 6

Gradiente de SVG

Una elipse con una transición lineal horizontal de amarillo a rojo
Una elipse con una transición lineal vertical de amarillo a rojo
Una elipse y texto con una transición lineal horizontal de amarillo a rojo
Una elipse con una transición radial de blanco a azul
Una elipse con una transición radial de blanco a azul

Miscelánea de SVG

Un rectángulo que desaparece repetidamente en 5 segundos
Un rectángulo que cambia de color y crece constantemente
Tres rectángulos que cambian de color
Mover texto a lo largo de la trayectoria de movimiento
Mover, rotar y escalar texto a lo largo de la trayectoria de movimiento
Mover, rotar y escalar texto + rectángulo creciente que cambia de color a lo largo de la trayectoria de movimiento
Rotación de elipse