{"id":118354,"date":"2023-02-09T12:30:00","date_gmt":"2023-02-09T15:30:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=15146"},"modified":"2023-07-26T16:19:31","modified_gmt":"2023-07-26T19:19:31","slug":"animar-svg","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/","title":{"rendered":"Aprendendo a animar SVG para tornar seus designs mais atrativos"},"content":{"rendered":"\n<p>A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para <a href=\"https:\/\/fluency.io\/br\/blog\/guia-ux-designer\" target=\"_blank\" rel=\"noreferrer noopener\">designers de UX<\/a>, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e elementos na tela, \u00e9 poss\u00edvel transmitir informa\u00e7\u00f5es de maneira clara e eficaz, e ajudar a guiar o usu\u00e1rio em sua jornada na plataforma.<\/p>\n\n\n\n<p>E o formato SVG oferece muitas possibilidades para a cria\u00e7\u00e3o de anima\u00e7\u00f5es. Diferentemente de formatos de imagem como JPEG e PNG, que s\u00e3o baseados em pixels, o SVG \u00e9 baseado em vetores, o que significa que seus elementos podem ser facilmente manipulados e animados sem perda de qualidade. Al\u00e9m disso, o formato SVG \u00e9 escal\u00e1vel e compat\u00edvel com a web, o que o torna uma escolha popular entre designers.<\/p>\n\n\n\n<p>Neste post, vamos aprender como animar SVG para melhorar a navega\u00e7\u00e3o do usu\u00e1rio na sua plataforma. Vamos explorar as vantagens de animar objetos SVGs, e como voc\u00ea pode aplicar essas t\u00e9cnicas em seus projetos de design. Tamb\u00e9m vamos discutir algumas t\u00e9cnicas e boas pr\u00e1ticas para criar anima\u00e7\u00f5es atrativas e eficazes que ajudem a guiar o usu\u00e1rio na jornada dele na plataforma. Se voc\u00ea \u00e9 um UX Designer procurando maneiras de tornar suas interfaces mais atraentes e intuitivas, ent\u00e3o este post \u00e9 para voc\u00ea!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Introdu\u00e7\u00e3o ao formato SVG e suas vantagens para anima\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n<p>O <a href=\"https:\/\/www.adobe.com\/br\/creativecloud\/file-types\/image\/vector\/svg-file.html\" target=\"_blank\" rel=\"noreferrer noopener\">formato SVG<\/a> (Scalable Vector Graphics) \u00e9 uma tecnologia de imagem baseada em vetores, ao contr\u00e1rio de formatos baseados em pixels como JPEG e PNG. Isso significa que as imagens SVG podem ser escaladas sem perda de qualidade, o que as torna ideais para a cria\u00e7\u00e3o de <a href=\"https:\/\/fluency.io\/br\/blog\/aplicar-principios-de-design\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">gr\u00e1ficos, logotipos e outros elementos<\/a> que precisam ser exibidos claramente em diferentes tamanhos.\u00a0<\/p>\n\n\n\n<p>Al\u00e9m disso, as imagens SVG s\u00e3o compat\u00edveis com a web, o que as torna uma escolha popular entre designers. Quando se trata de anima\u00e7\u00e3o, o formato SVG oferece muitas vantagens, incluindo a capacidade de animar objetos sem perda de qualidade e a possibilidade de criar anima\u00e7\u00f5es mais complexas com CSS e JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como animar objetos SVG utilizando CSS e JavaScript<\/strong><\/h2>\n\n\n\n<p>A anima\u00e7\u00e3o de objetos SVG \u00e9 uma excelente maneira de adicionar dinamismo e interatividade aos seus designs. \u00c9 poss\u00edvel animar objetos SVG utilizando CSS ou JavaScript. Ambas as abordagens t\u00eam seus pr\u00f3prios pontos fortes e podem ser usadas em combina\u00e7\u00e3o para criar anima\u00e7\u00f5es mais complexas.<\/p>\n\n\n\n<p>Quando se trata de anima\u00e7\u00f5es SVG com CSS, voc\u00ea pode usar as propriedades de <a rel=\"noreferrer noopener\" href=\"https:\/\/fluency.io\/br\/blog\/html-css\/?utm_source=blog\" target=\"_blank\">anima\u00e7\u00e3o CSS<\/a> para animar propriedades espec\u00edficas do objeto, como o tamanho, a cor ou a posi\u00e7\u00e3o. Por exemplo, voc\u00ea pode criar uma anima\u00e7\u00e3o de &#8220;pulsa\u00e7\u00e3o&#8221; para um objeto SVG adicionando a seguinte regra CSS a ele:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"801\" height=\"393\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png\" alt=\"Como animar objetos SVG utilizando CSS\" class=\"wp-image-15147\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png 801w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS-768x377.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS-515x253.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS-150x74.png 150w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/figure>\n\n\n\n<p>J\u00e1 com <a href=\"https:\/\/fluency.io\/br\/blog\/o-que-e-javascript\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a>, voc\u00ea tem ainda mais flexibilidade para animar objetos SVG. Por exemplo, voc\u00ea pode usar bibliotecas como GSAP ou anime.js para animar o objeto de maneira mais detalhada. Aqui est\u00e1 um exemplo usando a biblioteca GSAP:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-Javascript.png\" alt=\"Como animar objetos SVG utilizando Javascript\" class=\"wp-image-15148\" width=\"803\" height=\"57\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-Javascript.png 803w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-Javascript-768x55.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-Javascript-515x37.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/02\/Como-animar-objetos-SVG-utilizando-Javascript-150x11.png 150w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/figure>\n\n\n\n<p>Neste exemplo, o objeto SVG com a classe &#8220;object&#8221; ser\u00e1 animado com uma dura\u00e7\u00e3o de 1 segundo para se mover 200 pixels na dire\u00e7\u00e3o x e girar 360 graus.<\/p>\n\n\n\n<p>Em resumo, animar objetos SVG utilizando CSS ou JavaScript \u00e9 uma maneira poderosa de adicionar dinamismo e interatividade aos seus designs. Dependendo do prop\u00f3sito da anima\u00e7\u00e3o, uma abordagem pode ser mais apropriada do que a outra, mas \u00e9 sempre poss\u00edvel combinar as duas para criar anima\u00e7\u00f5es incr\u00edveis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Exemplos de anima\u00e7\u00f5es comuns em interfaces de usu\u00e1rio<\/strong><\/h2>\n\n\n\n<p>Existem muitas anima\u00e7\u00f5es comuns que s\u00e3o frequentemente usadas em interfaces de usu\u00e1rio para melhorar a experi\u00eancia do usu\u00e1rio. Aqui est\u00e3o alguns exemplos comuns:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00f5es de carregamento: <\/strong>s\u00e3o usadas para indicar que o sistema est\u00e1 processando uma a\u00e7\u00e3o. Elas geralmente consistem em um objeto que gira ou se move de alguma forma para indicar que algo est\u00e1 acontecendo.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00f5es de navega\u00e7\u00e3o: <\/strong>s\u00e3o usadas para tornar a navega\u00e7\u00e3o entre as p\u00e1ginas de um aplicativo mais suave e agrad\u00e1vel. Por exemplo, ao clicar em um bot\u00e3o para mudar de p\u00e1gina, uma anima\u00e7\u00e3o de transi\u00e7\u00e3o suave pode ser adicionada para tornar a mudan\u00e7a de p\u00e1gina mais agrad\u00e1vel.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00f5es de feedback: <\/strong>s\u00e3o usadas para fornecer uma resposta visual a uma <a href=\"https:\/\/fluency.io\/br\/blog\/o-que-e-user-flow\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">a\u00e7\u00e3o do usu\u00e1rio<\/a>, como clicar em um bot\u00e3o ou selecionar um item. Por exemplo, um bot\u00e3o pode se destacar ou vibrar quando \u00e9 clicado para indicar que a a\u00e7\u00e3o foi registrada.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00f5es de intera\u00e7\u00e3o: <\/strong>s\u00e3o usadas para tornar a intera\u00e7\u00e3o com elementos da interface mais agrad\u00e1vel e intuitiva. Por exemplo, um elemento pode expandir ou contrair quando o usu\u00e1rio passa o mouse por cima, ou pode mudar de cor quando \u00e9 selecionado.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00f5es de notifica\u00e7\u00e3o: <\/strong>s\u00e3o usadas para chamar a aten\u00e7\u00e3o do usu\u00e1rio para uma mensagem ou evento importante. Por exemplo, uma notifica\u00e7\u00e3o pode aparecer com uma anima\u00e7\u00e3o suave para chamar a aten\u00e7\u00e3o do usu\u00e1rio.<\/li>\n<\/ul>\n\n\n\n<p>Estes s\u00e3o apenas alguns exemplos de anima\u00e7\u00f5es comuns em interfaces de usu\u00e1rio, mas h\u00e1 muitas outras possibilidades. Ao planejar anima\u00e7\u00f5es para suas interfaces, \u00e9 importante considerar o prop\u00f3sito da anima\u00e7\u00e3o e o que ela est\u00e1 tentando comunicar ao usu\u00e1rio. Quando bem planejadas e executadas, as anima\u00e7\u00f5es podem tornar a experi\u00eancia do usu\u00e1rio mais agrad\u00e1vel e efetiva.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como utilizar anima\u00e7\u00f5es para ajudar a transmitir informa\u00e7\u00f5es de maneira clara e eficaz<\/strong><\/h2>\n\n\n\n<p>As anima\u00e7\u00f5es s\u00e3o uma ferramenta poderosa para transmitir informa\u00e7\u00f5es de maneira clara e eficaz. Ao contr\u00e1rio de simplesmente apresentar informa\u00e7\u00f5es est\u00e1ticas, as anima\u00e7\u00f5es podem ajudar a chamar a aten\u00e7\u00e3o do usu\u00e1rio, ilustrar conceitos complexos e tornar a informa\u00e7\u00e3o mais memor\u00e1vel. Aqui est\u00e3o algumas maneiras de utilizar anima\u00e7\u00f5es para transmitir informa\u00e7\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ilustrar conceitos complexos:<\/strong> As anima\u00e7\u00f5es podem ajudar a ilustrar conceitos complexos, como processos em fluxo ou rela\u00e7\u00f5es espaciais, de maneira visualmente atraente e f\u00e1cil de entender.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Destacar informa\u00e7\u00f5es importantes: <\/strong>As anima\u00e7\u00f5es podem ser usadas para chamar a aten\u00e7\u00e3o do usu\u00e1rio para informa\u00e7\u00f5es importantes, destacando-as em rela\u00e7\u00e3o ao resto do conte\u00fado.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ajudar na reten\u00e7\u00e3o de informa\u00e7\u00f5es: <\/strong>As anima\u00e7\u00f5es podem tornar a informa\u00e7\u00e3o mais memor\u00e1vel, ajudando o usu\u00e1rio a se lembrar dela com mais facilidade.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Conectar conceitos: <\/strong>As anima\u00e7\u00f5es podem ser usadas para conectar conceitos relacionados, mostrando como eles se relacionam uns com os outros.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplificar informa\u00e7\u00f5es complexas: <\/strong>As anima\u00e7\u00f5es podem ajudar a simplificar informa\u00e7\u00f5es complexas, tornando-as mais acess\u00edveis e f\u00e1ceis de entender.<\/li>\n<\/ul>\n\n\n\n<p>Ao utilizar anima\u00e7\u00f5es para transmitir informa\u00e7\u00f5es, \u00e9 importante lembrar de manter as anima\u00e7\u00f5es simples e diretas. Anima\u00e7\u00f5es elaboradas e complicadas podem ser confusas e desviar a aten\u00e7\u00e3o do usu\u00e1rio da informa\u00e7\u00e3o real que se deseja transmitir. Al\u00e9m disso, \u00e9 importante levar em considera\u00e7\u00e3o o prop\u00f3sito da anima\u00e7\u00e3o e o que se deseja comunicar ao usu\u00e1rio. Quando bem planejadas e executadas, as anima\u00e7\u00f5es podem ser uma ferramenta valiosa para transmitir informa\u00e7\u00f5es de maneira clara e eficaz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como integrar anima\u00e7\u00f5es SVG em seus fluxos de trabalho de design e desenvolvimento<\/strong><\/h2>\n\n\n\n<p>A integra\u00e7\u00e3o de anima\u00e7\u00f5es SVG em seus fluxos de trabalho de design e desenvolvimento \u00e9 uma parte importante do processo para garantir que suas anima\u00e7\u00f5es sejam eficazes e coerentes com o resto do design da interface. Aqui est\u00e3o algumas dicas para integrar anima\u00e7\u00f5es SVG em seus fluxos de trabalho:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alinhar com as diretrizes de design:<\/strong> As anima\u00e7\u00f5es devem ser alinhadas com as diretrizes de design gerais da interface, garantindo que sejam coerentes com o resto do design.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Trabalhar em colabora\u00e7\u00e3o com o time de desenvolvimento: <\/strong>\u00c9 importante envolver o <a href=\"https:\/\/fluency.io\/br\/blog\/guia-desenvolvedor-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">time de desenvolvimento<\/a> desde o in\u00edcio do processo, para garantir que as anima\u00e7\u00f5es sejam implementadas corretamente e possam ser executadas de maneira suave e eficiente.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Testar e otimizar:<\/strong> Antes de implementar as anima\u00e7\u00f5es em produ\u00e7\u00e3o, \u00e9 importante realizar testes e otimiza\u00e7\u00f5es para garantir que as anima\u00e7\u00f5es sejam executadas corretamente em diferentes dispositivos e navegadores.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Documentar o processo: <\/strong>Documentar o processo de anima\u00e7\u00e3o, incluindo o que foi feito, como foi feito e quais decis\u00f5es foram tomadas, pode ser \u00fatil para refer\u00eancia futura e para garantir que outros membros do time possam compreender e continuar o trabalho de maneira eficiente.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monitorar o desempenho:<\/strong> Monitorar o desempenho das anima\u00e7\u00f5es ap\u00f3s a implementa\u00e7\u00e3o pode ajudar a identificar e corrigir problemas e garantir que as anima\u00e7\u00f5es estejam funcionando corretamente.<\/li>\n<\/ul>\n\n\n\n<p>A integra\u00e7\u00e3o de anima\u00e7\u00f5es SVG em seus fluxos de trabalho \u00e9 importante para garantir que suas anima\u00e7\u00f5es sejam eficazes e coerentes com o resto da interface. Alinhar as anima\u00e7\u00f5es com as diretrizes de design, trabalhar em colabora\u00e7\u00e3o com o time de desenvolvimento, testar e otimizar antes da implementa\u00e7\u00e3o, documentar o processo e monitorar o desempenho ap\u00f3s a implementa\u00e7\u00e3o s\u00e3o todas etapas importantes para garantir o sucesso de suas anima\u00e7\u00f5es SVG.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Considera\u00e7\u00f5es de acessibilidade ao animar SVGs<\/strong><\/h2>\n\n\n\n<p>Anima\u00e7\u00f5es SVG s\u00e3o uma forma poderosa de tornar interfaces de usu\u00e1rio mais atraentes e interativas, mas \u00e9 importante levar em considera\u00e7\u00e3o a acessibilidade ao animar SVGs. Os usu\u00e1rios com defici\u00eancias, como vis\u00e3o reduzida, podem ter dificuldades em acompanhar as anima\u00e7\u00f5es e interagir com a interface. Al\u00e9m disso, anima\u00e7\u00f5es poderosas tamb\u00e9m podem ser desorientadores para usu\u00e1rios com condi\u00e7\u00f5es como enxaqueca ou dist\u00farbios do espectro autista. \u00c9 importante considerar o impacto de suas anima\u00e7\u00f5es em diferentes tipos de usu\u00e1rios e garantir que elas sejam acess\u00edveis.<\/p>\n\n\n\n<p>Para <a href=\"https:\/\/fluency.io\/br\/blog\/acessibilidade-em-ux-design\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">garantir a acessibilidade<\/a>, \u00e9 importante utilizar t\u00e9cnicas como descri\u00e7\u00f5es de tela e r\u00f3tulos claros para explicar as anima\u00e7\u00f5es. Al\u00e9m disso, \u00e9 importante fornecer op\u00e7\u00f5es de desativar anima\u00e7\u00f5es para usu\u00e1rios que possam se sentir desconfort\u00e1veis com elas. \u00c9 importante levar em considera\u00e7\u00e3o as necessidades de acessibilidade desde o in\u00edcio do projeto, para evitar a necessidade de retroceder e fazer mudan\u00e7as significativas mais tarde.<\/p>\n\n\n\n<p>Em resumo, ao animar SVGs, \u00e9 importante levar em considera\u00e7\u00e3o a acessibilidade e garantir que as anima\u00e7\u00f5es sejam acess\u00edveis para todos os usu\u00e1rios, independentemente de suas habilidades ou necessidades. A integra\u00e7\u00e3o de boas pr\u00e1ticas de acessibilidade em seu fluxo de trabalho de design e desenvolvimento \u00e9 fundamental para garantir a efici\u00eancia e a efic\u00e1cia de suas anima\u00e7\u00f5es SVG.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Estude Design com a Awari<\/strong><\/h2>\n\n\n\n<p>Como voc\u00ea pode ver, animar SVGs \u00e9 uma habilidade valiosa para UX designers. Al\u00e9m de tornar as interfaces de usu\u00e1rio mais atraentes e interativas, as anima\u00e7\u00f5es tamb\u00e9m podem ajudar a transmitir informa\u00e7\u00f5es de maneira clara e eficaz. No entanto, \u00e9 importante levar em considera\u00e7\u00e3o as quest\u00f5es de acessibilidade e integrar as anima\u00e7\u00f5es em seu fluxo de trabalho de design e desenvolvimento de maneira eficaz.<br>Se voc\u00ea est\u00e1 procurando aprender mais sobre anima\u00e7\u00e3o SVG, a Awari \u00e9 o lugar certo. Nossa plataforma oferece cursos abrangentes sobre Design, incluindo aulas ao vivo e mentorias individuais. Nossos professores s\u00e3o especialistas em suas \u00e1reas e prontos para compartilhar sua sabedoria e experi\u00eancia. Al\u00e9m disso, com nossa plataforma de aprendizagem baseada em projetos, voc\u00ea poder\u00e1 colocar suas habilidades em pr\u00e1tica e produzir projetos reais e significativos. N\u00e3o perca a oportunidade de aprender mais e ampliar suas habilidades de design com a Awari. <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ux-design\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-ux-design\" target=\"_blank\" rel=\"noreferrer noopener\">Clique aqui!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e elementos na tela, \u00e9 poss\u00edvel transmitir informa\u00e7\u00f5es de maneira clara e eficaz, e ajudar a guiar o usu\u00e1rio em sua jornada na plataforma. E o formato SVG oferece [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118354","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-09T15:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-26T19:19:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/\",\"name\":\"Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png\",\"datePublished\":\"2023-02-09T15:30:00+00:00\",\"dateModified\":\"2023-07-26T19:19:31+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage\",\"url\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png\",\"contentUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aprendendo a animar SVG para tornar seus designs mais atrativos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil","description":"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/","og_locale":"pt_BR","og_type":"article","og_title":"Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil","og_description":"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-02-09T15:30:00+00:00","article_modified_time":"2023-07-26T19:19:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/","name":"Aprendendo a animar SVG para tornar seus designs mais atrativos - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png","datePublished":"2023-02-09T15:30:00+00:00","dateModified":"2023-07-26T19:19:31+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"A anima\u00e7\u00e3o \u00e9 uma ferramenta poderosa para designers de UX, pois ajuda a tornar a interface mais atrativa e intuitiva para o usu\u00e1rio. Ao animar objetos e el...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#primaryimage","url":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png","contentUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/02\/Como-animar-objetos-SVG-utilizando-CSS.png"},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/animar-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Aprendendo a animar SVG para tornar seus designs mais atrativos"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=118354"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118354\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=118354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=118354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=118354"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=118354"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=118354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}