{"id":13446855,"url":"https://github.com/exupero/saveSvgAsPng","last_synced_at":"2025-03-21T16:32:57.275Z","repository":{"id":12802716,"uuid":"15477448","full_name":"exupero/saveSvgAsPng","owner":"exupero","description":"Save SVGs as PNGs from the browser.","archived":true,"fork":false,"pushed_at":"2020-01-27T14:53:52.000Z","size":288,"stargazers_count":1090,"open_issues_count":63,"forks_count":362,"subscribers_count":34,"default_branch":"gh-pages","last_synced_at":"2024-05-17T20:45:19.864Z","etag":null,"topics":["data-uri","javascript","pngs","svg"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/exupero.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}},"created_at":"2013-12-27T16:23:48.000Z","updated_at":"2024-05-15T09:40:44.000Z","dependencies_parsed_at":"2022-08-09T10:02:02.175Z","dependency_job_id":null,"html_url":"https://github.com/exupero/saveSvgAsPng","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exupero%2FsaveSvgAsPng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exupero%2FsaveSvgAsPng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exupero%2FsaveSvgAsPng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exupero%2FsaveSvgAsPng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exupero","download_url":"https://codeload.github.com/exupero/saveSvgAsPng/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244829640,"owners_count":20517349,"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":["data-uri","javascript","pngs","svg"],"created_at":"2024-07-31T05:01:01.610Z","updated_at":"2025-03-21T16:32:56.950Z","avatar_url":"https://github.com/exupero.png","language":"HTML","funding_links":[],"categories":["HTML","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# saveSvgAsPng\n\n## Installation\n\n```\nnpm install save-svg-as-png\n```\n\n## Prerequisites\n\nSaveSvgAsPng relies on JavaScript promises, so any browsers that don't natively support the standard `Promise` object will need to have a polyfill.\n\n## Usage\n\nTo save a PNG, include the script `saveSvgAsPng.js` in your page, then call the `saveSvgAsPng` function with an SVG node and a filename:\n\n```javascript\nsaveSvgAsPng(document.getElementById(\"diagram\"), \"diagram.png\");\n```\n\nThe filename is the preferred filename when saving the image to the file system. The browser may change the name of the file if there is already a file by that name in the target directory.\n\nIf you want to scale the image up or down, you can pass a scale factor in an options object:\n\n```javascript\nsaveSvgAsPng(document.getElementById(\"diagram\"), \"diagram.png\", {scale: 0.5});\n```\n\nOther options are documented below.\n\nIf you just want a dataURI for an SVG, you can call `svgAsDataUri`, which returns a promise:\n\n```javascript\nsvgAsDataUri(document.getElementById(\"diagram\"), options).then(uri =\u003e ...);\n```\n\nIf you want a dataURI of a PNG generated from an SVG, you can call `svgAsPngUri`, which also returns a promise:\n\n```javascript\nsvgAsPngUri(document.getElementById(\"diagram\"), options).then(uri =\u003e ...);\n```\n\nCompatible with [browserify](http://browserify.org/) and [requirejs](http://requirejs.org).\n\nIf you want to use TypeScript, necessary [type definitions](https://github.com/martianov/typed-save-svg-as-png) are available in [Typings](https://github.com/typings/typings) [public registry](https://github.com/typings/registry).\n\n### Options\n\n- `backgroundColor` — Creates a PNG with the given background color. Defaults to transparent.\n- `canvg` - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer\n- `encoderOptions` - A Number between 0 and 1 indicating image quality. The default is 0.8\n- `encoderType` - A DOMString indicating the image format. The default type is image/png.\n- `fonts` - A list of `{text, url, format}` objects the specify what fonts to inline in the SVG. Omitting this option defaults to auto-detecting font rules.\n- `height` - Specify the image's height. Defaults to the viewbox's height if given, or the element's non-percentage height, or the element's bounding box's height, or the element's CSS height, or the computed style's height, or 0.\n- `left` - Specify the viewbox's left position. Defaults to 0.\n- `modifyCss` - A function that takes a CSS rule's selector and properties and returns a string of CSS. Supercedes `selectorRemap` and `modifyStyle`. Useful for modifying properties only for certain CSS selectors.\n- `modifyStyle` - A function that takes a CSS rule's properties and returns a string of CSS. Useful for modifying properties before they're inlined into the SVG.\n- `scale` — Changes the resolution of the output PNG. Defaults to `1`, the same dimensions as the source SVG.\n- `selectorRemap` — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.\n- `top` - Specify the viewbox's top position. Defaults to 0.\n- `width` - Specify the image's width. Defaults to the viewbox's width if given, or the element's non-percentage width, or the element's bounding box's width, or the element's CSS width, or the computed style's width, or 0.\n- `excludeUnusedCss` - Exclude CSS rules that don't match any elements in the SVG.\n- `excludeCss` - Exclude all CSS rules\n\n### Testing\n\nrun tests with [tape](https://www.npmjs.com/package/tape)\n```bash\nnpm test\n```\n\n## Support\n\n[Chrome limits data URIs to 2MB](http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations/41755526#41755526), so you may have trouble generating PNGs beyod a certain size.\n\nInternet Explorer will only work if [canvg](https://github.com/canvg/canvg) is passed in, otherwise it will throw a `SecurityError` when calling `toDataURL` on a canvas that's been written to. [canvg](https://github.com/canvg/canvg) may have it's own issues with SVG support, so make sure to test the output.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexupero%2FsaveSvgAsPng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexupero%2FsaveSvgAsPng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexupero%2FsaveSvgAsPng/lists"}