{"id":13791626,"url":"https://github.com/mathisonian/sketch-interactive-export","last_synced_at":"2025-04-13T15:40:56.397Z","repository":{"id":66098505,"uuid":"122598623","full_name":"mathisonian/sketch-interactive-export","owner":"mathisonian","description":"Plugin to make it easy to use JavaScript to add interactivity to SVGs exported from sketch.","archived":false,"fork":false,"pushed_at":"2020-04-26T17:20:08.000Z","size":646,"stargazers_count":54,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T06:34:43.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mathisonian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-02-23T09:11:47.000Z","updated_at":"2024-12-07T13:24:36.000Z","dependencies_parsed_at":"2024-01-20T15:57:26.295Z","dependency_job_id":null,"html_url":"https://github.com/mathisonian/sketch-interactive-export","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathisonian%2Fsketch-interactive-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathisonian%2Fsketch-interactive-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathisonian%2Fsketch-interactive-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathisonian%2Fsketch-interactive-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathisonian","download_url":"https://codeload.github.com/mathisonian/sketch-interactive-export/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248739854,"owners_count":21154247,"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":[],"created_at":"2024-08-03T22:01:02.615Z","updated_at":"2025-04-13T15:40:56.369Z","avatar_url":"https://github.com/mathisonian.png","language":"JavaScript","funding_links":[],"categories":["Opensource Projects"],"sub_categories":[],"readme":"# Sketch Interactive Export\n\n\nThis is a sketch plugin designed to make it easy to use JavaScript (e.g. D3) to add\ninteractivity to SVGs created with sketch.\n\n## Installing\n\nGo to [the release page](https://github.com/mathisonian/sketch-interactive-export/releases) and download the latest ZIP file. Unzip it and double click the `.sketchplugin` file to add it to sketch.\n\n## What does this do?\n\nThis plugin does two main things:\n\n* It uses your Sketch layer names to add class names to exported SVG\n  * CSS conventions are used to determine class names. For example, if you have a layer named like `.blue.rectangle`, the resulting SVG markup will contain `class=\"blue rectangle\"`.\n  * Anything in the layername that isn't prefixed with a period will be used as the ID (as is standard Sketch behaviour). So, for example a layer named `my-id.classname`  will result in markup like `id=\"my-id\" class=\"classname\"`\n* It removes the hard coded `width` and `height` values from the SVG markup, and uses `viewBox` instead, so that everything is responsive.\n\n## Example\n\n### Designing in sketch\n\nFor example, here is a simple Sketch that shows three rectanges, two with the class `color-change` and one\nwith the class `disappear`:\n\n![sketch example](./assets/sketch-readme.png)\n\nWhen exported to SVG, this becomes\n\n\n```html\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003csvg  viewBox=\"0 0 1338 1142\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\n    \u003c!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --\u003e\n    \u003ctitle\u003eSlice\u003c/title\u003e\n    \u003cdesc\u003eCreated with Sketch.\u003c/desc\u003e\n    \u003cdefs\u003e\n        \u003crect id=\"path-1\" x=\"136\" y=\"244\" width=\"386\" height=\"314\"\u003e\u003c/rect\u003e\n        \u003crect id=\"path-2\" x=\"769\" y=\"123\" width=\"386\" height=\"314\"\u003e\u003c/rect\u003e\n        \u003crect id=\"path-3\" x=\"798\" y=\"653\" width=\"386\" height=\"314\"\u003e\u003c/rect\u003e\n        \u003crect id=\"path-4\" x=\"226\" y=\"746\" width=\"386\" height=\"314\"\u003e\u003c/rect\u003e\n    \u003c/defs\u003e\n    \u003cg id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"\u003e\n        \u003cg class=\"color-change\" id=\"\"\u003e\n            \u003cuse fill=\"#D8D8D8\" fill-rule=\"evenodd\" xlink:href=\"#path-1\"\u003e\u003c/use\u003e\n            \u003crect stroke=\"#979797\" stroke-width=\"1\" x=\"136.5\" y=\"244.5\" width=\"385\" height=\"313\"\u003e\u003c/rect\u003e\n        \u003c/g\u003e\n        \u003cg class=\"disappear\" id=\"\"\u003e\n            \u003cuse fill=\"#D8D8D8\" fill-rule=\"evenodd\" xlink:href=\"#path-2\"\u003e\u003c/use\u003e\n            \u003crect stroke=\"#979797\" stroke-width=\"1\" x=\"769.5\" y=\"123.5\" width=\"385\" height=\"313\"\u003e\u003c/rect\u003e\n        \u003c/g\u003e\n        \u003cg class=\"color-change\" id=\"\"\u003e\n            \u003cuse fill=\"#D8D8D8\" fill-rule=\"evenodd\" xlink:href=\"#path-3\"\u003e\u003c/use\u003e\n            \u003crect stroke=\"#979797\" stroke-width=\"1\" x=\"798.5\" y=\"653.5\" width=\"385\" height=\"313\"\u003e\u003c/rect\u003e\n        \u003c/g\u003e\n        \u003cg class=\"spin\" id=\"\"\u003e\n            \u003cuse fill=\"#D8D8D8\" fill-rule=\"evenodd\" xlink:href=\"#path-4\"\u003e\u003c/use\u003e\n            \u003crect stroke=\"#979797\" stroke-width=\"1\" x=\"226.5\" y=\"746.5\" width=\"385\" height=\"313\"\u003e\u003c/rect\u003e\n        \u003c/g\u003e\n    \u003c/g\u003e\n\u003c/svg\u003e\n```\n\n\n### Using with D3\n\n\nWe can use D3 to select portions of the exported SVG and dynamically add interactions. For example, this\ncode changes the color of the rectangles with the `color-change` class, and fades out the rectangle with\nthe `disappear` class when a user clicks them.\n\n```js\nconst d3 = require('d3');\nconst fs = require('fs');\n\nconst svgString = fs.readFileSync(__dirname + '/example.svg', 'utf8');\nconst svg = d3.select('body').html(svgString).select('svg');\n\nsvg.selectAll('.color-change')\n  .on('click', function() {\n    // random fill\n    d3.select(this).transition().attr('fill', \"hsl(\" + Math.random() * 360 + \",100%,50%)\")\n  })\n\nsvg.selectAll('.disappear')\n  .on('click', function() {\n    // fade out\n    d3.select(this).transition().attr('opacity', 0)\n    setTimeout(() =\u003e {\n      d3.select(this).transition().attr('opacity', 1)\n    }, 500);\n  })\n```\n\nThis results in the following behaviour\n\n![browser example](./assets/d3-example.gif)\n\n\n\n## How to hack on this package\n\n_This plugin was created using `skpm`. For a detailed explanation on how things work, checkout the [skpm Readme](https://github.com/skpm/skpm/blob/master/README.md)._\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nOnce the installation is done, you can run some commands inside the project folder:\n\n```bash\nnpm run build\n```\n\nTo watch for changes:\n\n```bash\nnpm run watch\n```\n\nAdditionally, if you wish to run the plugin every time it is built:\n\n```bash\nnpm run start\n```\n\n### Custom Configuration\n\n#### Babel\n\nTo customize Babel, you have two options:\n\n* You may create a [`.babelrc`](https://babeljs.io/docs/usage/babelrc) file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a \"presets\" object, it will replace \u0026 reset all Babel presets that skpm defaults to.\n\n* If you'd like to modify or add to the existing Babel config, you must use a `webpack.skpm.config.js` file. Visit the [Webpack](#webpack) section for more info.\n\n#### Webpack\n\nTo customize webpack create `webpack.skpm.config.js` file which exports function that will change webpack's config.\n\n```js\n/**\n * Function that mutates original webpack config.\n * Supports asynchronous changes when promise is returned.\n *\n * @param {object} config - original webpack config.\n * @param {boolean} isPluginCommand - wether the config is for a plugin command or a resource\n **/\nmodule.exports = function (config, isPluginCommand) {\n  /** you can change config here **/\n}\n```\n\n### Debugging\n\nTo view the output of your `console.log`, you have a few different options:\n\n* Use the [`sketch-dev-tools`](https://github.com/skpm/sketch-dev-tools)\n* Open `Console.app` and look for the sketch logs\n* Look at the `~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log` file\n\nSkpm provides a convenient way to do the latter:\n\n```bash\nskpm log\n```\n\nThe `-f` option causes `skpm log` to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathisonian%2Fsketch-interactive-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathisonian%2Fsketch-interactive-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathisonian%2Fsketch-interactive-export/lists"}