{"id":13682809,"url":"https://github.com/parallax/svg-animation-tools","last_synced_at":"2025-04-30T09:34:32.855Z","repository":{"id":141494077,"uuid":"99225159","full_name":"parallax/svg-animation-tools","owner":"parallax","description":"An awesome workflow for animated SVGs with Adobe Illustrator","archived":false,"fork":false,"pushed_at":"2018-02-03T10:27:42.000Z","size":3794,"stargazers_count":319,"open_issues_count":0,"forks_count":30,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-08-02T13:34:34.582Z","etag":null,"topics":["animation","illustrator","svg"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parallax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-03T11:23:41.000Z","updated_at":"2024-06-30T10:38:36.000Z","dependencies_parsed_at":"2023-07-04T04:47:29.963Z","dependency_job_id":null,"html_url":"https://github.com/parallax/svg-animation-tools","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fsvg-animation-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fsvg-animation-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fsvg-animation-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fsvg-animation-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parallax","download_url":"https://codeload.github.com/parallax/svg-animation-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224206239,"owners_count":17273413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","illustrator","svg"],"created_at":"2024-08-02T13:01:53.591Z","updated_at":"2024-11-12T02:31:56.689Z","avatar_url":"https://github.com/parallax.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"# Parallax SVG Animation Tools\n\nA simple set of python functions to help working with animated SVGs exported from Illustrator. More features coming soon!\nWe used it to create animations like this.\n\n[Viva La Velo](https://parall.ax/viva-le-velo)\n\n![Viva La Velo intro animation](vlv-intro-gif.gif)\n\n\n## Overview\n\nPart of animating with SVGs is getting references to elements in code and passing them to animation functions. For complicated animations this becomes difficult and hand editing SVG code is slow and gets overwritten when your artwork updates. We decided to write a post-processer for SVGs produced by Illustrator to help speed this up. Layer names are used to create attributes, classes and ID's making selecting them in JS or CSS far easier.\n\nThis is the what the svg code looks like before and after the processing step.\n\n```xml\n\u003c!-- Before post processer --\u003e\n\u003csvg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"\u003e\n  \u003crect id=\"_class_my-element_origin_144_234\" data-name=\"#class=my-element, origin=144 234\" x=\"144\" y=\"234\" width=\"148\" height=\"148\"/\u003e\n  \u003crect id=\"_id_my-unique-element\" data-name=\"#id=my-unique-element\" x=\"316\" y=\"234\" width=\"148\" height=\"148\" fill=\"#29abe2\"/\u003e\n  \u003crect id=\"_class_my-element\" data-name=\"#class=my-element\" x=\"488\" y=\"234\" width=\"148\" height=\"148\" fill=\"#fbb03b\"/\u003e\n\u003c/svg\u003e\n\n\u003c!-- After post processer --\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"\u003e\n  \u003crect id=\"my-unique-element\" x=\"316\" y=\"234\" width=\"148\" height=\"148\" fill=\"#29abe2\"/\u003e\n  \u003crect class=\"my-element\" data-svg-origin=\"144 234\" x=\"144\" y=\"234\" width=\"148\" height=\"148\"/\u003e\n  \u003crect class=\"my-element\" x=\"488\" y=\"234\" width=\"148\" height=\"148\" fill=\"#fbb03b\"/\u003e\n\u003c/svg\u003e\n```\n\n![Illustrator layers example](example-image.png)\n\n\n## Quick Example\n\nDownload the [svg tools](parallax_svg_tools.zip) and unzip them into your project folder.\n\nCreate an Illustrator file, add an element and change its layer name to say `#class=my-element`. Export the SVG using the **File \u003e Export \u003e Export for Screens** option with the following settings. Call the svg `animation.svg`.\n\n![Illustrator svg export settings](svg-settings.png)\n\nCreate a HTML file as below. The import statements inline the SVG inline into our HTML file so we don't have to do any copy and pasting. Not strictly neccessary but makes the workflow a little easier. Save it as `animation.html`.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003cmeta charset='utf-8'/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n//import processed_animation.svg\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\nOpen the file called `run.py`. Here you can edit how the SVGs will be processed. The default looks like this. The sections below describe what the various options do.\n\n```javascript\nfrom svg import *\n\ncompile_svg('animation.svg', 'processed_animation.svg', \n{\n\t'process_layer_names': True,\n\t'namespace' : 'example'\n})\n\ninline_svg('animation.html', 'output/animation.html')\n```\n\nOpen the command line and navigate to your project folder. Call the script using `python parallax_svg_tools/run.py`. You should see a list of processed files (or just one in this case) printed to the console if everything worked correctly. Note that the script must be called from a directory that has access to the svg files.\n\nThere should now be a folder called `output` containing an `animation.html` file with your processed SVG in it. All that is left to do is animate it with your tool of choice (ours is [GSAP](https://greensock.com/)).\n\n\n## Functions\n\n### process\\_svg(src\\_path, dst\\_path, options)\nProcesses a single SVG and places it in the supplied destination directory. The following options are available.\n\n+ **process\\_layer\\_names:**\nConverts layer names as defined in Illustator into attributes. Begin the layer name with a '#' to indicate the layer should be parsed. \nFor example `#id=my-id, class=my-class my-other-class, role=my-role` ...etc.\nThis is useful for fetching elements with Javascript as well as marking up elements for accessibility - see this [CSS Tricks Accessible SVG ](https://css-tricks.com/accessible-svgs/) article.\nNOTE: Requires using commas to separate the attributes as that makes the parsing code a lot simpler :)\n\n+ **expand_origin:**\nAllows you to use `origin=100 100` to set origins for rotating/scaling with GSAP (expands to data-svg-origin). \n\n+ **namespace:** \nAppends a namespace to classes and IDs if one is provided. Useful for avoiding conflicts with other SVG files for things like masks and clipPaths.\n\n+ **nowhitespace:**\nRemoves unneeded whitespace. We don't do anything fancier than that so as to not break animations. Use the excellent [SVGO](\u003chttps://github.com/svg/svgo\u003e) if you need better minification.\n\n+ **attributes:**\nAn object of key:value strings that will be applied as attributes to the root SVG element.\n\n+ **title:**\nSets the title or removes it completely when set to `false`\n\n+ **description:**\nSets the description or removes it completely when set to `false`\n\n+ **convert_svg_text_to_html:**\nConverts SVG text in HTML text via the foriegn object tag reducing file bloat and allowing you to style it with CSS. Requires the text be grouped inside a rectangle with the layer name set to `#TEXT`. \n\n+ **spirit:**\nExpands `#spirit=my-id` to `data-spirit-id` when set to `true` for use with the [Spirit animation app](\u003chttps://spiritapp.io/\u003e)\n\n\n### inline\\_svg(src\\_path, dst\\_path)\nIn order to animate SVGs markup needs to be placed in-line with HTML. This function will look at the source HTML file and include any references defined by `//import` statements to SVGs that it finds.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparallax%2Fsvg-animation-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparallax%2Fsvg-animation-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparallax%2Fsvg-animation-tools/lists"}