PROGRAMACIÓN WEB

HTML 5

Ing. Magda Paola Fernández

SVG - CANVAS

Scalable Vector Graphics

Formato de imagen vectorial basado en XML. La ventaja es que se puede modificar el tamaño (la resolución) de la imagen sin perder calidad.

Incluye

Se puede utilizar SVG para hacer muchas tareas que se hacen con CANVAS como alguna figura geométrica, algún texto, degradados o patrones.

dentro de el elemento svg se dibujo un circulo con Coordenada x cx=50Coordenada y cy=50Radio r=50Fill (Relleno) Rojo

Una forma efectiva y de más posibilidades con svg es definir los gráficos o contenido por medio del formato XML.

Rectángulo

Añadir al rectángulo estilo:

Con rx y ry se da la curvatura de los ángulos del rectángulo

Elipse

Otras Figuras:

<ellipse>Línea <line>

Polilínea <polyline>

Poligono <polygon>

Ruta <path>

<canvas>

<canvas>es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos y animaciones. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan el canvas.

La etiqueta canvas va dentro del cuerpo del documento:

PROGRAMACIÓN WEB

HTML 5

Ing. Magda Paola Fernández

SVG - CANVAS