{"id":19874904,"url":"https://github.com/marp-team/marpit-svg-polyfill","last_synced_at":"2025-05-02T10:31:43.704Z","repository":{"id":33941941,"uuid":"163354236","full_name":"marp-team/marpit-svg-polyfill","owner":"marp-team","description":"Polyfill for inline SVG slides rendered by Marpit","archived":false,"fork":false,"pushed_at":"2024-04-11T06:24:17.000Z","size":1575,"stargazers_count":13,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-29T08:01:41.506Z","etag":null,"topics":["marp","marpit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/marp-team.png","metadata":{"funding":{"github":["yhatt"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-28T02:05:32.000Z","updated_at":"2024-06-18T20:13:13.096Z","dependencies_parsed_at":"2023-01-15T03:45:56.537Z","dependency_job_id":"5a977e36-f8cd-4b03-9270-727fbe0d0728","html_url":"https://github.com/marp-team/marpit-svg-polyfill","commit_stats":{"total_commits":127,"total_committers":2,"mean_commits":63.5,"dds":"0.015748031496062964","last_synced_commit":"be214e46a9ddbe067d0ee756c4daa7cc781f2c6d"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarpit-svg-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarpit-svg-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarpit-svg-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marp-team%2Fmarpit-svg-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marp-team","download_url":"https://codeload.github.com/marp-team/marpit-svg-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252023305,"owners_count":21682163,"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":["marp","marpit"],"created_at":"2024-11-12T16:25:57.430Z","updated_at":"2025-05-02T10:31:43.429Z","avatar_url":"https://github.com/marp-team.png","language":"TypeScript","funding_links":["https://github.com/sponsors/yhatt"],"categories":[],"sub_categories":[],"readme":"# @marp-team/marpit-svg-polyfill\n\n[![CircleCI](https://img.shields.io/circleci/project/github/marp-team/marpit-svg-polyfill/main.svg?style=flat-square\u0026logo=circleci)](https://circleci.com/gh/marp-team/marpit-svg-polyfill/)\n[![Codecov](https://img.shields.io/codecov/c/github/marp-team/marpit-svg-polyfill/main.svg?style=flat-square\u0026logo=codecov)](https://codecov.io/gh/marp-team/marpit-svg-polyfill)\n[![npm](https://img.shields.io/npm/v/@marp-team/marpit-svg-polyfill.svg?style=flat-square\u0026logo=npm)](https://www.npmjs.com/package/@marp-team/marpit-svg-polyfill)\n[![LICENSE](https://img.shields.io/github/license/marp-team/marpit-svg-polyfill.svg?style=flat-square)](./LICENSE)\n\nThe polyfill for [the inline SVG slide][inline-svg] rendered by [Marpit].\n\n[marpit]: https://github.com/marp-team/marpit\n[inline-svg]: https://marpit.marp.app/inline-svg\n\n### Supported browser\n\n- [WebKit](#webkit) based browser: Safari and iOS browsers (including iOS Chrome, iOS Firefox, iOS Edge, and so on...)\n\n## Usage\n\n```html\n\u003c!-- Generated HTML by Marpit's inline SVG mode --\u003e\n\u003cdiv class=\"marpit\"\u003e\n  \u003csvg viewBox=\"0 0 1280 720\" data-marpit-svg=\"\"\u003e\n    \u003cforeignObject width=\"1280\" height=\"720\"\u003e\n      \u003csection\u003e...\u003c/section\u003e\n    \u003c/foreignObject\u003e\n  \u003c/svg\u003e\n\u003c/div\u003e\n\n\u003c!-- After than, use polyfill through jsDelivr CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@marp-team/marpit-svg-polyfill/lib/polyfill.browser.js\"\u003e\u003c/script\u003e\n```\n\n## Why need?\n\n### WebKit\n\n[Marpit]'s [inline SVG slide][inline-svg] has a lot of advantages: No requires JavaScript, gives better performance for scaling, and has predicatable DOM structure.\n\nBut unfortunately, WebKit browser has not scaled the wrapped HTML correctly. It is caused from a long standing [bug 23113](https://bugs.webkit.org/show_bug.cgi?id=23113), and it does not resolved in the last 15 years.\n\n![](https://raw.githubusercontent.com/marp-team/marpit-svg-polyfill/main/docs/webkit-bug.png)\n\n\u003e **Note**\n\u003e A brand-new SVG engine for WebKit called as [**\"Layer-based SVG engine (LBSE)\"**](https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/) is currently under development, and it will finally bring glitch-free scaling without JS. (See also: [Status of the new SVG engine in WebKit](https://wpewebkit.org/blog/05-new-svg-engine.html))\n\u003e\n\u003e You can test LBSE in [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/) by following these steps:\n\u003e\n\u003e 1. Install Safari Technology Preview\n\u003e 1. Run `defaults write com.apple.SafariTechnologyPreview IncludeInternalDebugMenu 1` in terminal\n\u003e 1. Open Safari Technology Preview\n\u003e 1. Turn on **\"Layer-based SVG engine (LBSE)\"** from \"Debug\" menu → \"WebKit Internal Features\"\n\u003e 1. Restart app\n\u003e\n\u003e marpit-svg-polyfill v2.1.0 and later will try to detect whether or not enabled LBSE, and does not apply polyfill if LBSE was available.\n\n## Solutions\n\n### For Webkit\n\n#### Scaling\n\nWe try to simulate scaling and centering by applying `transform` / `transform-origin` style to Marpit `\u003csection\u003e` elements.\n\n```html\n\u003csvg viewBox=\"0 0 1280 960\"\u003e\n  \u003cforeignObject width=\"1280\" height=\"960\"\u003e\n    \u003csection style=\"transform-origin:0 0;transform:matrix(......);\"\u003e\n      ...\n    \u003c/section\u003e\n  \u003c/foreignObject\u003e\n\u003c/svg\u003e\n```\n\nmarpit-svg-polyfill uses the result of `getScreenCTM()` method, so the polyfill will sacrifice \"zero-JS slide\", the key feature of inline SVG.\n\n#### Repainting\n\nWebKit browser would not trigger repainting even if modified the contents of slide. It becomes a problem when supporting the live preview feature in Marp tools.\n\nFortunately, [a genius already resolved this problem only in CSS!](https://stackoverflow.com/a/21947628) `transform:translateZ(0)` would trigger re-painting immidiately when modified contents.\n\n#### Animation GIF\n\nPeople like to put GIF animation in the slide. However, GIF in polyfilled slides have glitches. GIF updates only a cropped part somewhere.\n\nApplying `transform:translateZ(0.0001px)` to each `\u003csection\u003e` elements within SVG is a magic to resolve that. 🪄\n\n\u003e **Warning**\n\u003e This style brings slightly blurred contents too. Our polyfill prefers to render animated contents correctly.\n\n\u003c!--\n\n## Advanced\n\n### Apply polyfill manually\n\nYou may pick out the logic of polyfill if you required. When called a picked function, it applies polyfill forcibly without browser detection.\n\n```javascript\nimport { webkit } from '@marp-team/marpit-svg-polyfill'\n\nconst observer = () =\u003e {\n  // Apply polyfill for webkit forcibly\n  webkit()\n\n  window.requestAnimationFrame(observer)\n}\n\ndocument.addEventListener('DOMContentLoaded', observer)\n```\n\n#### Use case in Blink browsers\n\nWe have confirmed a similar rendering bug to WebKit in a few Blink based browsers. (e.g. Chrome 66, Electron 3.x. refs: [marp-team/marpit#35](https://github.com/marp-team/marpit/pull/35), [marp-team/marp-cli#15](https://github.com/marp-team/marp-cli/pull/15))\n\nWe are not applied polyfill for Blink browsers because [they are working toward to resolve this.](https://bugs.chromium.org/p/chromium/issues/detail?id=467484) But you may apply `webkit()` manually if you required.\n\n--\u003e\n\n## Contributing\n\nWe are following [the contributing guideline of marp-team projects](https://github.com/marp-team/.github/blob/master/CONTRIBUTING.md). Please read these guidelines this before starting work in this repository.\n\n## Author\n\nManaged by [@marp-team](https://github.com/marp-team).\n\n- \u003cimg src=\"https://github.com/yhatt.png\" width=\"16\" height=\"16\"/\u003e Yuki Hattori ([@yhatt](https://github.com/yhatt))\n\n## License\n\nThis module releases under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarp-team%2Fmarpit-svg-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarp-team%2Fmarpit-svg-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarp-team%2Fmarpit-svg-polyfill/lists"}