{"id":6,"date":"2014-09-17T03:23:46","date_gmt":"2014-09-17T03:23:46","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/svgsmil\/?p=6"},"modified":"2014-09-17T03:24:03","modified_gmt":"2014-09-17T03:24:03","slug":"svg-smil-animation","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/svgsmil\/2014\/09\/17\/svg-smil-animation\/","title":{"rendered":"SVG SMIL animation"},"content":{"rendered":"<p><a href=\"http:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/150px-SVG_logo_old.svg_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4 aligncenter\" src=\"http:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/150px-SVG_logo_old.svg_.png\" alt=\"svg\" width=\"150\" height=\"63\" \/><\/a><\/p>\n<p>Se desarrolla gracias al aporte de W3CSynchronized Multimedia Group. Incorpora a su caracter\u00edstica la Animaci\u00f3nenfocada a la especificaci\u00f3n de SMILAnimaci\u00f3n, ya que ofrece algunas extensiones especificas.<\/p>\n<p>Es decir SVG es un lenguaje Principal en t\u00e9rminos de SMILANIMATION<\/p>\n<p>Dibujos SVG Pueden ser Interactivos y Din\u00e1micos<\/p>\n<div id='gallery-1' class='gallery galleryid-6 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blog.espol.edu.ec\/svgsmil\/2014\/09\/17\/svg-smil-animation\/o\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/o-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/o-150x150.png 150w, https:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/o.png 225w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>Para Hablar de SVG Siglas en ingles que significan \u201cScalable Vector Graphics\u201d es hablar de Graficas Vectoriales Escalables, basados de un est\u00e1ndar de formato de gr\u00e1ficos vectoriales. Por lo tanto es un lenguaje para detallar graficas en dos dimensiones es decir bidimensionales: Formas de Vectores Gr\u00e1ficos (L\u00edneas, pol\u00edgonos Poli l\u00edneas Rect\u00e1ngulos, c\u00edrculos elipses, etc<\/p>\n<p>compatible con elementos de animaci\u00f3n SMIL:<\/p>\n<p>An\u00edmate<\/p>\n<p>Permite a los atributos y propiedades escalables que se asignan diferentes valores a trav\u00e9s del tiempo.<\/p>\n<p>Set<\/p>\n<p>Es un atajo muy conveniente para el momento de animar. \u00datil para asignar valores de animaci\u00f3n a los atributos y propiedades no num\u00e9ricas, tal es la \u201cvisibilidad\u201d de propiedad.<\/p>\n<p>Animatemotion<\/p>\n<p>Mueve un elemento a lo largo de un trazado de movimiento<\/p>\n<p>Animatecolor<\/p>\n<p>Modifica el color de atributos o propiedades particulares a trav\u00e9s del tiempo<\/p>\n<p>Adicionalmente se detalla que es un lenguaje que incluye estas extensiones que son aceptadas por SMIL<\/p>\n<ul>\n<li>AnimateTranform<\/li>\n<li>Path<\/li>\n<li>Mpath<\/li>\n<li>KeyPoints<\/li>\n<li>Rotate<\/li>\n<\/ul>\n<p>EL grupo SYMM, con ayuda de SVG son los creadores de la espeficicacion de SMILAnimacion (SMILANIM) caracter\u00edstica de animaci\u00f3n XML.<\/p>\n<p><strong>SMIL<\/strong><\/p>\n<p>SMIL Siglas en Ingles que significan \u201c Synchronized Multimedia Integraci\u00f3n Language, Es una t\u00e9cnica y m\u00e9todo que facilita la animaci\u00f3n de archivos con extensi\u00f3n SVG \u201cScalable Vector Graphics\u201d .<\/p>\n<p>Animaciones basadas en SVG soportadas en la actualidad por los siguientes navegadores mas reconocidos en la actualidad:<\/p>\n<ul>\n<li>Safari<\/li>\n<li>Opera<\/li>\n<li>Mozilla Firefox<\/li>\n<li>Google Chrome<\/li>\n<li>Amaya<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/exploradores.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10 aligncenter\" src=\"http:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/exploradores-300x180.jpg\" alt=\"exploradores\" width=\"287\" height=\"172\" srcset=\"https:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/exploradores-300x180.jpg 300w, https:\/\/blog.espol.edu.ec\/svgsmil\/files\/2014\/09\/exploradores.jpg 600w\" sizes=\"auto, (max-width: 287px) 100vw, 287px\" \/><\/a><\/p>\n<p>SVG soporta PNG y JPG<\/p>\n<p>&nbsp;<\/p>\n<p>SVG esta presente Actualmente en HTML gracias a la etiqueta &lt;img&gt; con el atributo \u201csrc\u201d<\/p>\n<p>Solo compatibles con navegadores actuales o actualizados hasta el momento.<\/p>\n<p>&nbsp;<\/p>\n<p>Adem\u00e1s los elementos de Animaci\u00f3n, estos pueden describir modificaciones en la l\u00ednea de tiempo del documento, Y puede definir las rutas de movimiento. Fade-in o fade-out. Objetos que crecen se encogen Objetos que viran a la derecha o a la izquierda y que adem\u00e1s cambian de color.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=XCk22AaRxiE\">\u00a0http:\/\/www.youtube.com\/watch?v=XCk22AaRxiE<\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"1 Minute Intro to SVG Web + Demos\" width=\"474\" height=\"356\" src=\"https:\/\/www.youtube.com\/embed\/XCk22AaRxiE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Referencia<\/p>\n<p>SVG 1.1 (SEGUNDA EDICION) 16 de Agosto 2011<\/p>\n<p>Scalable Vector Graphics (SVG) - Especificaci\u00f3nConsorcio de la World Wide Web. 14 de Enero 2019<\/p>\n<p>http:\/\/www.w3.org\/TR\/SVG\/animate.html<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se desarrolla gracias al aporte de W3CSynchronized Multimedia Group. Incorpora a su caracter\u00edstica la Animaci\u00f3nenfocada a la especificaci\u00f3n de SMILAnimaci\u00f3n, ya que ofrece algunas extensiones especificas. Es decir SVG es un lenguaje Principal en t\u00e9rminos de SMILANIMATION Dibujos SVG Pueden ser Interactivos y Din\u00e1micos Para Hablar de SVG Siglas en ingles que significan \u201cScalable Vector &hellip; <a href=\"https:\/\/blog.espol.edu.ec\/svgsmil\/2014\/09\/17\/svg-smil-animation\/\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">SVG SMIL animation<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":7778,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[818],"tags":[],"class_list":["post-6","post","type-post","status-publish","format-video","hentry","category-sin-categoria","post_format-post-format-video"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/posts\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/users\/7778"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":4,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/posts\/6\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/posts\/6\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/media?parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/categories?post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/svgsmil\/wp-json\/wp\/v2\/tags?post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}