{"id":20400044,"url":"https://github.com/relaxedjs/relaxed-svg","last_synced_at":"2025-09-04T05:07:00.257Z","repository":{"id":57352717,"uuid":"136844872","full_name":"RelaxedJS/relaxed-svg","owner":"RelaxedJS","description":"SVG awesomeness for ReLaXed","archived":false,"fork":false,"pushed_at":"2019-06-17T17:13:11.000Z","size":885,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-04T05:03:24.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RelaxedJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-10T21:06:17.000Z","updated_at":"2024-02-08T14:34:20.000Z","dependencies_parsed_at":"2022-09-17T14:41:07.047Z","dependency_job_id":null,"html_url":"https://github.com/RelaxedJS/relaxed-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RelaxedJS/relaxed-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RelaxedJS%2Frelaxed-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RelaxedJS%2Frelaxed-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RelaxedJS%2Frelaxed-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RelaxedJS%2Frelaxed-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RelaxedJS","download_url":"https://codeload.github.com/RelaxedJS/relaxed-svg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RelaxedJS%2Frelaxed-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273555462,"owners_count":25126316,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-15T04:36:16.795Z","updated_at":"2025-09-04T05:07:00.214Z","avatar_url":"https://github.com/RelaxedJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# relaxed-svg\n\nThis ReLaXed plugin provides utilities to work with SVG:\n\n- SVG optimization (to reduce the size and complexity of your SVGs)\n- SVG *animation*, which enable to display only certain elements of a SVG,\n  making it possible to do progressive slides in presentations.\n\n\n## Usage\n\nInstall with ``npm install -g relaxed-svg`` and add ``svg`` to the plugins of\nyour project's ``config.yml``:\n\n```yaml\nplugins:\n  - svg:\n      jpeg-quality: 90\n```\n\n**Parameters**\n- **``jpeg-quality``** (default: 85) Compression quality the SVG optimizer should\n  use when converting PNGs to JPEG. Set to 100 for no compression.\n\n## SVG optimization\n\nOptimized SVGs are smaller in size and (hopefully) look exactly the same. They\nmake PDF rendering faster and in most case also lead to smaller PDF file sizes.\n\nSVG optimization is mostly meant to use in interactive mode, when ReLaXed is\nwatching file changes. To elect a SVG for optimization set its extension\nto ``.o.svg``, e.g. ``myschema.o.svg``. Every time the file changes, an\noptimized version ``myschema_optimized.svg`` is created. Use this file in your\ntemplates.\n\n## \"Animated slides\" with SVG\n\nWhen writing a slideshow, you may want some graphic elements to appear progressively, so you can introduce your audience to different components, step by step.\n\nFor instance your might want to turn this complete slide:\n\n\u003cp align='center'\u003e\n  \u003cimg width=\"400px\" src= \"https://github.com/RelaxedJS/relaxed-svg/raw/master/examples/animated_slides/full_slide.png\" /\u003e\n\u003c/p\u003e\n\nInto a series of progressive slides:\n\n\u003cp align='center'\u003e\n  \u003cimg  width=\"400px\" src= \"https://github.com/RelaxedJS/relaxed-svg/raw/master/examples/animated_slides/animated_slides.gif\" /\u003e\n\u003c/p\u003e\n\nIn most slideshow systems, the only way to do so is to generate a series of images, one for each slide. This comes with the inconvenient that, if you want to change an element that is common to all slides, you must regenerate all of them\n\nThe ``relaxed-svg`` plugin provides a ``stepSVG`` plugin that makes it easy, from a single SVG, to create such progressive series of slides where different components can appear or disappear as you wish.\n\nThe Pug code will simply look like this:\n\n```pug\neach step in [0, 1, 2, 3, 4]\n  .slide\n    +stepSVG(step, 'earth-cutaway.svg')\n```\n\nWith this system, any changes to the SVG file get instantly reflected in all the involved slides.\n\nSee [this page](https://github.com/RelaxedJS/relaxed-svg/tree/master/examples/animated_slides) for an example and tutorial on making animated slides with ``relaxed-svg``.\n\nSee also these examples, which make extensive use of progressive SVGs (these PDF slideshows are best viewed in presentation mode):\n\n- [A presentation on software for DNA assembly](https://github.com/Edinburgh-Genome-Foundry/egf-shared-documents/blob/master/slideshows/eastbio_dundee_2018/sample.pdf)\n- [A presentation on cloud biology](https://github.com/Edinburgh-Genome-Foundry/egf-shared-documents/blob/master/slideshows/bbsrc_skills_school_2018/sample.pdf)\n\n## Using SVG layers\n\nSoftware like Inkscape allow to define \"layers\", which are simply SVG ``\u003cg/\u003e`` groups\nthat can be masked and locked in the software. If a layer is masked it generally\nhas a ``display: none`` attribute and won't be displayed in your ReLaXed PDF.\n\n**Important:** To be able to use layers, your svg layers should have a\n``layer`` attribute with value the name of the layer. This is not the case by\ndefault in Inkscape, you have to enter this attribute manually. A layer name\ncannot be ``all``, this word is reserved.\n\n**To hide all layers except one,** add the ``layer='layer_name'`` argument to\n``stepSVG``:\n\n```\n.slide\n    +stepSVG(step, 'car_schema.svg', layer='engine_details')\n```\n\n**To ensure all layers will be shown**, including the ones that are marked as\n\"invisible\" layers in inkscape, use ``layer='all'`` ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frelaxedjs%2Frelaxed-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frelaxedjs%2Frelaxed-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frelaxedjs%2Frelaxed-svg/lists"}