{"id":28708344,"url":"https://github.com/bpierre/webkit-svg-fixer","last_synced_at":"2025-06-14T18:11:07.378Z","repository":{"id":7314541,"uuid":"8632718","full_name":"bpierre/webkit-svg-fixer","owner":"bpierre","description":"Fix SVG in WebKit browsers by forcing the rendering of images embedded in SVG docs.","archived":false,"fork":false,"pushed_at":"2013-03-08T15:43:55.000Z","size":604,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-13T10:56:12.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://pierrebertet.net/webkit-svg-fixer/demo/","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/bpierre.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","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":"2013-03-07T17:29:38.000Z","updated_at":"2020-09-29T13:16:53.000Z","dependencies_parsed_at":"2022-08-18T14:50:19.105Z","dependency_job_id":null,"html_url":"https://github.com/bpierre/webkit-svg-fixer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bpierre/webkit-svg-fixer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fwebkit-svg-fixer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fwebkit-svg-fixer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fwebkit-svg-fixer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fwebkit-svg-fixer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpierre","download_url":"https://codeload.github.com/bpierre/webkit-svg-fixer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fwebkit-svg-fixer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860438,"owners_count":22922990,"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":"2025-06-14T18:11:05.772Z","updated_at":"2025-06-14T18:11:07.365Z","avatar_url":"https://github.com/bpierre.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebKit SVG Fixer\n\nFix SVG images in WebKit browsers.\n\nWhen an SVG file is not directly in the HTML document (img element, CSS background), WebKit do not display the embedded xlink references (e.g. images), unless the SVG has already been displayed directly in the document.\nWebKit SVG Fixer uses this to force the display on WebKit, by inserting hidden SVGs in the document (as `\u003cobjects\u003e` elements).\n\n- Info: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/\n- Demo: http://pierrebertet.net/webkit-svg-fixer/demo/\n\n## Installation\n\n### With [component](https://github.com/component/component#readme)\n\n    $ component install bpierre/webkit-svg-fixer\n\n### Old Fashion (standalone, AMD)\n\n- Development: [dist/webkit-svg-fixer.js](https://raw.github.com/bpierre/webkit-svg-fixer/master/dist/webkit-svg-fixer.js)\n- Production: [dist/webkit-svg-fixer.min.js](https://raw.github.com/bpierre/webkit-svg-fixer/master/dist/webkit-svg-fixer.min.js)\n\n**Note**: if you use this library standalone, the main object, `webkitSvgFixer`, will be attached to the `window`. You can access it with `window.webkitSvgFixer` or just `webkitSvgFixer`, and call the functions on it, e.g. `webkitSvgFixer.fixall()`.\n\n## Quick Start\n\nJust call the main object directly: `require('webkit-svg-fixer')()`, or `window.webkitSvgFixer()`.\n\n## API\n\n### fixall(options)\n\nFix images in all SVGs embedded as `\u003cimg src=\"something.svg\"\u003e`. If the browser is not webkit, it does nothing.\n\nYou can provide some options:\n\n - `webkitTest`: Custom WebKit test (Function or Boolean, default: tests `/webkit/` in the user agent string)\n - `fixImages`: Fix SVG in image elements (Boolean, default: true)\n - `fixBackgrounds`: Fix SVG in CSS backgrounds (Boolean, default: true)\n\nExample:\n\n```js\nvar svgFixer = require('webkit-svg-fixer');\nsvgFixer.fixall({\n  fixBackgrounds: false // Don’t search in CSS backgrounds\n});\n```\n\n### fixsvg(url)\n\nFix a single SVG URL. You can safely call it multiple times with the same URL, only one `\u003cobject\u003e` will be inserted. **You have to test WebKit before calling this function.**\n\n```js\nsvgFixer.fixsvg('http://example.com/my-image.svg');\n```\n\n### fiximages(images)\n\nFix all `\u003cimg\u003e` ending with `.svg` in the document. You can also provide the images you want, as a CSS selector or a NodeList. **You have to test WebKit before calling this function.**\n\n```js\n// CSS selector\nsvgFixer.fiximages('img.svg');\n\n// NodeList\nvar images = document.getElementsByClassName('svg-image');\nsvgFixer.fiximages(images);\n```\n\n## FAQ\n\n### What are the differences with [dirkweber’s flattensvg](https://github.com/dirkweber/flattensvg.js)?\n\nWebKit SVG Fixer does less. The main goal of flatten SVG is to convert external images in base64. Also, it does Ajax requests for testing the browser cache. WebKit SVG Fixer exposes an API which lets you do what you want.\n\n## Credits\n\n* [flattensvg](https://github.com/dirkweber/flattensvg.js)\n\n## License\n\n  [MIT](http://pierre.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fwebkit-svg-fixer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpierre%2Fwebkit-svg-fixer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fwebkit-svg-fixer/lists"}