SVG, transiciones y animaciones (Parte 1)

¿Qué es un SVG?

• Imágenes de mapa de bits

• Imágenes Portables para uso web

• Imágenes vectorizadas que se pueden escalar

¿Por qué usar un SVG?

• Podemos editarlos y agregar fotografías

• Podemos convertir imágenes complejas (ej. foto) a este formato, para ahorrar espacio.

• Podemos escalarlos sin perder resolución

¿Qué es XML?

• Es un lenguaje de marcas que se ocupa para guardar y transportar datos.

• Es el formato de archivo de Excel.

• Es un formato de gráficos vectoriales

En el siguiente código:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="400px">

<!-- Código SVG -->

</svg>.

Sobre el alto y ancho, son respectivamente:

• 400px y 100px

• 100px y 400px

La etiqueta <g> se ocupa para:

• Definir caminos o trazos

• Agregar estilos

• Agrupar elementos

La etiqueta <path> se ocupa para:

• Definir trazos de líneas

• Agregar estilos

• Agrupar elementos

La etiqueta <rect> se ocupa para:

• Crear rectas

• Crear rectángulo

• Rectificar un estilo

En la siguiente línea de código:

<circle cx="20" cy="30" r="10"/>

• Crea un circunferencia con centro en (20,30) y radio 10.

• Crea un círculo con centro en (20,30) y radio 10.

• Crea una elipse con centro en (20,30) y radio 10.

La etiqueta <defs> se ocupa para:

• Alojar contenido paths y agrupamientos que serán mostrado en el viewport SVG

• Alojar contenido descripción de juego de caracteres y versión usados en el SVG

• Alojar contenido de configuración (ej. estilos) que no será mostrado en el viewport SVG

Para integrar un SVG en nuestro proyecto, podemos ocupar:

• <div class="prueba" src="prueba.svg">

• <img src="prueba.svg" alt="archivo_prueba">

• <object src="prueba.svg" type="image/svg+xml"></object>