Scribd
Cargar
120 vistas11 páginas

Animaciones SVG

El documento describe las animaciones SVG, que permiten animar imágenes vectoriales como logotipos e ilustraciones. Existen tres métodos para animar archivos SVG: mediante CSS keyframes, SMIL o JavaScript. Las animaciones SVG se definen para permitir SMIL y tienen ventajas como ser un lenguaje XML enfocado a presentaciones multimedia. Las propiedades de estilo SVG incluyen color, degradado, dimensiones y trazo, y permiten crear animaciones personalizadas.

Cargado por

Edwin Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
120 vistas11 páginas

Animaciones SVG

El documento describe las animaciones SVG, que permiten animar imágenes vectoriales como logotipos e ilustraciones. Existen tres métodos para animar archivos SVG: mediante CSS keyframes, SMIL o JavaScript. Las animaciones SVG se definen para permitir SMIL y tienen ventajas como ser un lenguaje XML enfocado a presentaciones multimedia. Las propiedades de estilo SVG incluyen color, degradado, dimensiones y trazo, y permiten crear animaciones personalizadas.

Cargado por

Edwin Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

ANIMACIONES SVG

EDWIN HERNNDEZ
GABRIELA GUACHAMN
SVG (Scalable Vector Grafics) Vectores Grficos Escalables, las animaciones
SVG nos permite tener un contenido visual que ayuda a los desarrolladores a
crear mejores experiencias web, con la que se logran animar imgenes del
logotipo, ilustraciones vectoriales, imgenes de la interfaz de usuario, el
contenido de infografa, iconos, etc.
Una de las grandes utilidades de SVG es la posibilidad de realizar
animaciones, cambiando los grficos vectoriales representados a lo largo del
tiempo. Existen dos formas de realizar animaciones en SVG, la primera
consiste en utilizar elementos 'animation', y la segunda es acceder
directamente al DOM del SVG y modificar atributos de los grficos.
Las animaciones de SVG han sido definidas para permitir SMIL (Synchronized
Multimedia Integration Language), esto representa una ventaja ya que se
trata de un lenguaje basado en xml, enfocado a realizar presentaciones
multimedia con etiquetas para variaciones temporales, transiciones, etc.
TRES MTODOS DIFERENTES PARA LA ANIMACIN
DE ARCHIVOS SVG
En primer lugar, puede utilizar las @keyframes funcionan para animar a su
visual de contenido SVG usando CSS.
Animacin de SVG directamente con SMIL (lenguaje de integracin
multimedia sincronizada)
JavaScript que proporciona funciones bsicas para hacer animaciones, por
supuesto, siempre existe la opcin de elegir un marco de JavaScript para este
propsito.
ESTILOS SVG

Los elementos SVG aceptan algunas de las propiedades estndar de CSS,


pero no todas. Adems, los SVGs aceptan un conjunto especial de atributos
"presentaciones", como fill ,xyy , que tambin sirven para definir cmo se
representa visualmente un SVG. No hay diferencia funcional entre especificar
un estilo SVG a travs de CSS o como un atributo - la especificacin SVG
simplemente divide las propiedades entre los dos.
Hay tres grandes categoras de propiedades de estilo especficas de
SVG: color , degradado ,dimensional y trazo.
Propiedades de color: consiste en relleno y trazo . Fill es equivalente al color
de fondo en CSS, mientras que stroke es equivalente a border-
color . Utilizando Velocity, estas propiedades se animan de la misma manera
que se animan las propiedades estndar de CSS.
Propiedades del degradado: Incluyen stopColor, stopOpacity y offset. Se
utilizan para definir gradientes de uso mltiple que estructura a travs de
marcado SVG.
Propiedades dimensionales: son aquellas que describen la posicin y el
tamao de un elemento SVG. Estos atributos difieren ligeramente entre los
tipos de elementos SVG (por ejemplo, rect en vez de crculo)
Propiedades de trazo: son un conjunto nico de definiciones de estilo SVG con
la capacidad de crear trazos personalizados y la capacidad de animar el
movimiento. Los casos de uso incluyen efectos de escritura a mano, efectos de
revelacin gradual y mucho ms.
BENEFICIOS DE SVG
Los grficos definidos en SVG tienen tamaos de archivo ms pequeos que sus
equivalentes PNG / JPEG.
Los grficos SVG pueden escalarse a cualquier resolucin sin la prdida de
claridad, se ven ntidas en todas las pantallas de escritorio y mviles.
Puede animar los componentes individuales de un grfico SVG en tiempo de
ejecucin (utilizando JavaScript y CSS).
Sus imagen se carga a travs de todos los tamaos utilizando la misma imagen, por
lo que no tienen que usar por separado. Como es, SVG no hace ninguna solicitud
adicional al servidor, ya que no est utilizando peticiones HTTP directas, sino que
todas las imgenes viene incorporado dentro del cdigo fuente de la pgina web.
APLICACIONES DE ANIMACIONES SVG
APLICACIONES DE ANIMACIONES SVG
APLICACIONES DE ANIMACIONES SVG

http://demos.bonsaijs.org/demos/pie/index.html

También podría gustarte