{"id":104,"date":"2015-02-02T15:31:41","date_gmt":"2015-02-02T15:31:41","guid":{"rendered":"http:\/\/blogs.iriss.org.uk\/viewsource\/?p=104"},"modified":"2015-02-03T10:18:44","modified_gmt":"2015-02-03T10:18:44","slug":"animated-svg-to-after-effects-pt1","status":"publish","type":"post","link":"https:\/\/blogs.iriss.org.uk\/viewsource\/2015\/02\/02\/animated-svg-to-after-effects-pt1\/","title":{"rendered":"how to export an animated SVG from a webpage to Adobe After Effects &#8211; Part 1"},"content":{"rendered":"<h2>Why?<\/h2>\n<p>Animating SVG in a web browser with code (usually javascript or CSS) can be done very quickly. There is a wealth of code that involve little more than linking the script &amp; specifying a couple of variables, so experimentation is quick &amp; easy.<\/p>\n<p><a href=\"https:\/\/dl.dropboxusercontent.com\/u\/93658891\/rendersvg\/index.html\">https:\/\/dl.dropboxusercontent.com\/u\/93658891\/rendersvg\/index.html<\/a><\/p>\n<h2>Video saved the SVG<\/h2>\n<p>This first export was just to see if the animation would fit with the rest of the video and was achieved by fullscreening the browser window (Google Chrome) with little else running in the background, then QuickTime Player was used to capture a video of the animation. \u00a0Next I imported the footage into Adobe Premiere, selected a <a href=\"http:\/\/freemusicarchive.org\/music\/Ergo_Phizmiz\/Music_from_The_House_of_Dr_Faustus\/Vespers\">suitable track from the Free Music Archive<\/a>, mixed it together and as a proof of concept it worked as expected.<\/p>\n<p><iframe src=\"\/\/player.vimeo.com\/video\/118486620\" width=\"660\" height=\"371\" frameborder=\"0\" title=\"Export SVG\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<h2>Enter the devtools<\/h2>\n<p>The library I\u2019m using to do the animated is <a href=\"http:\/\/maxwellito.github.io\/vivus\/\">vivus.js<\/a>. A little digging into the\u00a0 source revealed a function for including older version of Internet Explorer which forces the refresh of the SVG on each frame. \u00a0Idea! Now if only I could log each of those frames. A short console.log() in the right place and I appeared to be getting the correct information out.<\/p>\n<p><img decoding=\"async\" class=\"alignleft size-large wp-image-109\" src=\"https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.50.48-1024x253.png\" alt=\"Screenshot 2015-02-02 14.50.48\" width=\"660\" height=\"163\" srcset=\"https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.50.48-1024x253.png 1024w, https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.50.48-300x74.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>A quick copy and paste from the console to a text file, save as SVG and I appeared to be getting what I expected.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-110\" src=\"https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.52.58-1024x649.jpg\" alt=\"Screenshot 2015-02-02 14.52.58\" width=\"660\" height=\"418\" srcset=\"https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.52.58-1024x649.jpg 1024w, https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.52.58-300x190.png 300w, https:\/\/blogs.iriss.org.uk\/viewsource\/files\/2015\/02\/Screenshot-2015-02-02-14.52.58.jpg 1691w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Next step was getting all the frames out of browser, copy and paste was working ok if a little slow, the resultant text file was about 450MB. \u00a0To extract each SVG\/Frame I used the UNIX tool AWK. \u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/AWK\">AWK<\/a> is a powerful text processing tool that can spit a text file into multiples based on a set of rules, the following snippet splits each line that starts with &lt;svg into a new file adding a name &amp; incremental number (padded up to 6 zeroes so the frames can be sorted)<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nawk '\/&amp;lt;svg\/{x=sprintf(&quot;F%06d&quot;,++i) &quot;.svg&quot;;}{print &amp;gt; x }' input.txt\r\n<\/pre>\n<p><strong>tip:<\/strong> <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\">optimise your SVG<\/a> and try to make it a single line &#8211; it\u2019ll make it easier for automated processing.<\/p>\n<p>Now I had a folder of 12,000 or so SVG\u2019s. \u00a0A small sampling of these revealed a lot of duplicate or wrong frames &#8211; I then discovered that the IE method I\u2019d hooked into was not giving me what I\u2019d expected. \u00a0Back to the drawing board\u2026<\/p>\n<p><a title=\"how to export an animated SVG from a webpage to Adobe After Effects \u2013 Part 2\" href=\"https:\/\/blogs.iriss.org.uk\/viewsource\/2015\/02\/03\/animated-svg-to-after-effects-pt2\/\">In the next part I&#8217;ll discuss what my solution was and suggestions for improvements on that.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why? Animating SVG in a web browser with code (usually javascript or CSS) can be done very quickly. There is a wealth of code that involve little more than linking the script &amp; specifying a couple of variables, so experimentation is quick &amp; easy. https:\/\/dl.dropboxusercontent.com\/u\/93658891\/rendersvg\/index.html Video saved the SVG This first export was just to &hellip; <a href=\"https:\/\/blogs.iriss.org.uk\/viewsource\/2015\/02\/02\/animated-svg-to-after-effects-pt1\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">how to export an animated SVG from a webpage to Adobe After Effects &#8211; Part 1<\/span><\/a><\/p>\n","protected":false},"author":45,"featured_media":126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":""},"categories":[5765,2872,7477],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":0,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/media\/126"}],"wp:attachment":[{"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.iriss.org.uk\/viewsource\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}