{"id":13759370,"url":"https://github.com/brentvatne/react-native-svgkit","last_synced_at":"2025-04-05T20:06:01.764Z","repository":{"id":30477000,"uuid":"34031055","full_name":"brentvatne/react-native-svgkit","owner":"brentvatne","description":"Experimental SVG library for react-native based off of SVGKit. Not under active development, if you would like to take over and push this forward please get in touch @notbrent on Twitter","archived":false,"fork":false,"pushed_at":"2016-04-20T23:33:54.000Z","size":6490,"stargazers_count":424,"open_issues_count":15,"forks_count":38,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-29T19:01:46.633Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/brentvatne.png","metadata":{"files":{"readme":"README.markdown","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":"2015-04-16T02:56:09.000Z","updated_at":"2025-02-28T19:22:32.000Z","dependencies_parsed_at":"2022-09-11T13:31:36.676Z","dependency_job_id":null,"html_url":"https://github.com/brentvatne/react-native-svgkit","commit_stats":null,"previous_names":["brentvatne/react-native-svg"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-svgkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-svgkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-svgkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-svgkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brentvatne","download_url":"https://codeload.github.com/brentvatne/react-native-svgkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393568,"owners_count":20931812,"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":"2024-08-03T13:00:51.842Z","updated_at":"2025-04-05T20:06:01.744Z","avatar_url":"https://github.com/brentvatne.png","language":"JavaScript","funding_links":[],"categories":["组件","Components","Libraries"],"sub_categories":["图形动画","UI"],"readme":"# react-native-svgkit\n\nRender SVG images or write your own in-line and animate them, fun! Uses\nSVGKit. Formerly known as react-native-svgkit, but this now belongs to a\nlibrary that is actually under active development: see [magicmight's\nreact-native-svg](https://github.com/magicismight/react-native-art-svg).\n\n## How to use it\n\n- `npm i react-native-svgkit --save`\n- `cd node_modules/react-native-svgkit/Libraries/ \u0026\u0026 git clone git@github.com:SVGKit/SVGKit.git)`\n- Then add RNSVg.Xcodeproj to your Libraries, and libRNSvg.a to your\n  linked binaries.\n- Also add `libxmyl2.2.dylib` (`libxml2.2.tbd` for iOS9) to your linked binaries.\n- `var Svg = require('react-native-svgkit'); var Path = Svg.Path`\n\n## Examples\n\n[Wave.js](https://github.com/brentvatne/react-native-svgkit/blob/master/Wave.js) and [ReactLogo.js](https://github.com/brentvatne/react-native-svg/blob/master/ReactLogo.js) for examples!\n\n[![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-svgkit/master/line.gif)](https://github.com/brentvatne/react-native-svg/blob/master/Wave.js) [![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-svg/master/logo.gif)](https://github.com/brentvatne/react-native-svg/blob/master/ReactLogo.js)\n\n\n[![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-svgkit/master/chart-example.png)](https://github.com/brentvatne/react-native-svg/blob/master/Chart.js)\n*This chart renders from a source file, but I'm sure that a backend could be made for [d3/xkcd](http://dan.iel.fm/xkcd/) to do this for us live*\n\nUses [SVGKit](https://github.com/SVGKit/SVGKit) to do all of the hard work.\n\n## TODO (probably never going to happen unless you want to do it)\n\n- Hit detection and events on individual SVG composites (Path, Line, etc)\n- Component for every SVG element: ‘circle’, ‘ellipse’, ‘line’,\n  ‘polygon’, ‘polyline’, ‘rect’, [etc..](http://www.w3.org/TR/SVG/intro.html)\n- Load source over HTTP\n- Look at performance..\n- Add animations to morph from one svg to another [like this](https://github.com/alexk111/SVG-Morpheus)\n- Add support for \"drawing\" animations [like this](https://github.com/maxwellito/vivus)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrentvatne%2Freact-native-svgkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrentvatne%2Freact-native-svgkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrentvatne%2Freact-native-svgkit/lists"}