{
    "componentChunkName": "component---src-templates-post-jsx",
    "path": "/blog/creating-animated-svgs",
    "result": {"data":{"post":{"id":"edb0cfa3-616b-515e-9b16-b08834a91a7d","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Creating Animated SVGs\",\n  \"slug\": \"/creating-animated-svgs\",\n  \"description\": \"The best way to show off your new project\",\n  \"date\": \"2019-01-02T00:00:00.000Z\",\n  \"category\": \"Documentation\",\n  \"image\": \"./img/carbon-svg.png\",\n  \"tags\": [\"documentation\", \"open source\", \"web dev\", \"terminal\", \"tutorial\"],\n  \"published\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Why?\"), mdx(\"p\", null, \"In most cases, your projects README.md or documentation will be a new user\\u2019s first introduction to your project. As a resulting, it\\u2019s important to put your best foot forward and have your documentation demonstrate the quality of your project. So in response to a few questions I\\u2019ve recieved about the graphics used in my own README\\u2019s, I decided I\\u2019d make a post explaining the process for spicing up your projects with animated SVGs.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Now, I\\u2019m sure you\\u2019ve noticed how including effectively coordinated GIFs in a project README.md can provide immediate insight as to the functionality and capability of a new project and definitely make for a great starting-point. Though GIFs aren\\u2019t without their drawbacks. Specifically, their limited color pattern, immutability, and the file size necessary to maintain non-pixalated, fluid animations. Fortunately, these shortcomings are where SVGs thrive.  \"), mdx(\"p\", null, \"For the uninitiated, SVG stands for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://en.wikipedia.org/wiki/Scalable_Vector_Graphics\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, mdx(\"em\", {\n    parentName: \"a\"\n  }, \"Scalable Vector Graphic\")), \" which means that the image is created using mathematical calculations rather than using pixels to form lines and shapes. This essentially means that the image can be scaled to any size and the lines will remain crisp and clear.  \"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://user-images.githubusercontent.com/16360374/50585691-17f7a900-0e2b-11e9-8e85-76e8e3910569.png\",\n    \"alt\": \"svg\"\n  })), mdx(\"p\", null, \"Nonetheless, it\\u2019s also important to note that there are still many places where custom animated SVGs aren\\u2019t supported, but luckily for us, \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"(https://github.com)\"\n  }, \"GitHub\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"and this blog\"), \") both support animated SVGs with \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"no-workarounds-needed\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Additionally, while this may be the most advantageous for command-line projects, these animated SVGs can be used for examples, installation instructions, or anything involving the command-line.  \"), mdx(\"h2\", null, \"Getting Started\"), mdx(\"p\", null, \"The first step is that you\\u2019re going to need to install \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://asciinema.org/docs/installation\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"asciinema\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"(https://github.com/marionebl/svg-term-cli)\"\n  }, \"svg-term-cli\"), \". This will provide the terminal session recording and tool that we\\u2019ll use to create the animated SVG.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Once these are installed, you\\u2019ll want to create your recording. Using the following command will spawn a new shell instance and start your recording:  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sh\"\n  }, \"asciinema rec <filename>\\n\")), mdx(\"p\", null, \"When your finished, you can stop the recording by typing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"exit\"), \" or pressing \", mdx(\"kbd\", null, \"ctrl+D\"), \". The recording will be saved as a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".cast\"), \" file, that you\\u2019ll be able to pass to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"(https://github.com/marionebl/svg-term-cli)\"\n  }, \"svg-term-cli\"), \" to create your animated SVG.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Once you\\u2019re satisfied with your recording, you can create your animated SVG with the following command:  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sh\"\n  }, \"svg-term <filename(.cast)> --out <filename(.svg)> --window\\n\")), mdx(\"img\", {\n    \"src\": \"https://camo.githubusercontent.com/fa6306a10d7bb4678008aec7387d0e4178aef817/68747470733a2f2f63646e2e7261776769742e636f6d2f74746572622f7974326d70332f64393662386337302f646f63732f696d616765732f7465726d696e616c2e737667\",\n    \"alt\": \"example\",\n    \"style\": {},\n    \"'100%',\": \"\",\n    \"margintop:\": \"\",\n    \"'1.5em'}}\": \"\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/creating-animated-svgs"},"frontmatter":{"title":"Creating Animated SVGs","description":"The best way to show off your new project","date":"02 January 2019","category":"Documentation","image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#283838","images":{"fallback":{"src":"/static/921f4218d2f63abbdfdd12a0f92443a2/72b6e/carbon-svg.png","srcSet":"/static/921f4218d2f63abbdfdd12a0f92443a2/37cbf/carbon-svg.png 750w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/7ddad/carbon-svg.png 1080w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/39a65/carbon-svg.png 1366w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/72b6e/carbon-svg.png 1564w","sizes":"100vw"},"sources":[{"srcSet":"/static/921f4218d2f63abbdfdd12a0f92443a2/0f80e/carbon-svg.webp 750w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/b38b8/carbon-svg.webp 1080w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/e46c2/carbon-svg.webp 1366w,\n/static/921f4218d2f63abbdfdd12a0f92443a2/2b642/carbon-svg.webp 1564w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.40217391304347827}}}}},"avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg","srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/93848/me.jpg 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/73bb6/me.jpg 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/97a19/me.jpg 480w","sizes":"(min-width: 240px) 240px, 100vw"},"sources":[{"srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/927d1/me.webp 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/507b0/me.webp 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/8d565/me.webp 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/21b1a/me.webp 480w","type":"image/webp","sizes":"(min-width: 240px) 240px, 100vw"}]},"width":240,"height":240}}}},"pageContext":{"slug":"/creating-animated-svgs"}},
    "staticQueryHashes": []}