{"id":13445910,"url":"https://github.com/canvg/canvg","last_synced_at":"2025-05-13T15:03:13.158Z","repository":{"id":24286629,"uuid":"27681516","full_name":"canvg/canvg","owner":"canvg","description":"JavaScript SVG parser and renderer on Canvas","archived":false,"fork":false,"pushed_at":"2025-04-24T09:45:15.000Z","size":33542,"stargazers_count":3739,"open_issues_count":130,"forks_count":618,"subscribers_count":66,"default_branch":"master","last_synced_at":"2025-05-05T22:26:31.901Z","etag":null,"topics":["canvas","hacktoberfest","javascript","svg"],"latest_commit_sha":null,"homepage":"https://canvg.js.org","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/canvg.png","metadata":{"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,"zenodo":null}},"created_at":"2014-12-07T19:18:53.000Z","updated_at":"2025-05-04T17:41:35.000Z","dependencies_parsed_at":"2023-10-20T16:44:56.956Z","dependency_job_id":"69a9c3f7-73af-467b-9858-181e8a229d0f","html_url":"https://github.com/canvg/canvg","commit_stats":{"total_commits":935,"total_committers":54,"mean_commits":"17.314814814814813","dds":0.720855614973262,"last_synced_commit":"937668eced93e0335c67a255d0d2277ea708b2cb"},"previous_names":["gabelerner/canvg"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canvg%2Fcanvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canvg%2Fcanvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canvg%2Fcanvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canvg%2Fcanvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canvg","download_url":"https://codeload.github.com/canvg/canvg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253968289,"owners_count":21992253,"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":["canvas","hacktoberfest","javascript","svg"],"created_at":"2024-07-31T05:00:41.700Z","updated_at":"2025-05-13T15:03:13.068Z","avatar_url":"https://github.com/canvg.png","language":"TypeScript","readme":"# canvg\n\n\u003cimg align=\"right\" width=\"120\" height=\"120\" alt=\"Logo\" src=\"website/static/img/logo.svg\"\u003e\n\n[![NPM version][npm]][npm-url]\n[![Dependencies status][deps]][deps-url]\n[![Build status][build]][build-url]\n[![Coverage status][coverage]][coverage-url]\n\n[npm]: https://img.shields.io/npm/v/canvg.svg\n[npm-url]: https://npmjs.com/package/canvg\n\n[deps]: https://img.shields.io/librariesio/release/npm/canvg\n[deps-url]: https://libraries.io/npm/canvg/tree\n\n[build]: https://img.shields.io/github/actions/workflow/status/canvg/canvg/ci.yml?branch=master\n[build-url]: https://github.com/canvg/canvg/actions\n\n[coverage]: https://img.shields.io/codecov/c/github/canvg/canvg.svg\n[coverage-url]: https://app.codecov.io/gh/canvg/canvg\n\nJavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.\n\n\u003ca href=\"#quickstart\"\u003eQuickstart\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"#docs\"\u003eDocs\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://canvg.js.org/demo/\"\u003eDemo\u003c/a\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\n## Quickstart\n\nInstall this library using your favorite package manager:\n\n```sh\npnpm add canvg\n# or\nyarn add canvg\n# or\nnpm i canvg\n```\n\nThen, just import `Canvg` and use it:\n\n```js\nimport { Canvg } from 'canvg';\n\nlet v = null;\n\nwindow.onload = async () =\u003e {\n  const canvas = document.querySelector('canvas');\n  const ctx = canvas.getContext('2d');\n\n  v = await Canvg.from(ctx, './svgs/1.svg');\n\n  // Start SVG rendering with animations and mouse handling.\n  v.start();\n};\n\nwindow.onbeforeunload = () =\u003e {\n  v.stop();\n};\n```\n\n[Description of all exports you can find in Documentation.](https://canvg.js.org/api)\n\n\u003cbr /\u003e\n\n## Docs\n\n- [Migration to v4](https://canvg.js.org/docs/migration-to-v4)\n- [API](https://canvg.js.org/api/classes/Canvg)\n- [Examples](https://canvg.js.org/examples)\n\n## What's implemented?\n\nThe end goal is everything from the [SVG spec](http://www.w3.org/TR/SVG/). The majority of the rendering and animation is working. If you would like to see a feature implemented, don't hesitate to add it to the issues list, or better is to create pull request 😎\n","funding_links":[],"categories":["JavaScript","Libraries","TypeScript","11. 图表绘制/图形库(Graphics)"],"sub_categories":["Data processing","SVG","10.10 样式修正"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanvg%2Fcanvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanvg%2Fcanvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanvg%2Fcanvg/lists"}