{"id":20756608,"url":"https://github.com/amkreta/svgeditor","last_synced_at":"2025-04-28T20:04:47.710Z","repository":{"id":42027211,"uuid":"459091791","full_name":"AmKreta/svgEditor","owner":"AmKreta","description":"app to create svg images","archived":false,"fork":false,"pushed_at":"2022-10-27T11:11:37.000Z","size":4234,"stargazers_count":72,"open_issues_count":1,"forks_count":23,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T20:04:39.494Z","etag":null,"topics":["front-end-development","indexed-db","javascript","react","redux","svg","typescript","web-application"],"latest_commit_sha":null,"homepage":"https://react-svg-editor.netlify.app/","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/AmKreta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-14T09:18:59.000Z","updated_at":"2025-04-28T18:05:48.000Z","dependencies_parsed_at":"2023-01-20T02:05:05.622Z","dependency_job_id":null,"html_url":"https://github.com/AmKreta/svgEditor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmKreta%2FsvgEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmKreta%2FsvgEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmKreta%2FsvgEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmKreta%2FsvgEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmKreta","download_url":"https://codeload.github.com/AmKreta/svgEditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251380914,"owners_count":21580338,"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":["front-end-development","indexed-db","javascript","react","redux","svg","typescript","web-application"],"created_at":"2024-11-17T09:33:49.366Z","updated_at":"2025-04-28T20:04:47.679Z","avatar_url":"https://github.com/AmKreta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **React Svg Editor**\n\n###### no svg library used, built from scratch\n\nFor any feature request Ping me on linkedIn 👇\n\n[Follow me on linkedin for more interesting projects](https://www.linkedin.com/in/kumar-amresh-1017a7161/)\n\n[Click here to visit site ](https://react-svg-editor.netlify.app/)\n\n## Demo\n\n[![Watch the video](https://img.youtube.com/vi/rqtKGGTlQC4/maxresdefault.jpg)](https://www.youtube.com/watch?v=rqtKGGTlQC4)\n\n\n# About\n - React Svg Editor is a powerful design tool that  helps you to create anything: websites, applications, logos, and much more. \n- Built for Web, React Svg Editor helps you create, share, test, and ship better designs from start to finish. \n- Whether it’s consolidating tools or simplifying workflows React Svg Editor makes the design process faster, more efficient, and fun while keeping everyone on the same page.\n\n## Features\n-  Multiple tools provided to design layouts.\n- Gradient creator provided to create and use beautiful gradients within the project.\n- Theming made easy, select and save colours in palettes and use them throughout in the project, didn't liked a color, change it, it will automatically be applied to all the elements in which it was used.\n- Tool like clipart search, illustration search also provided.\n- Transform shapes easily, manipulate various properties like height, width, border color, background color etc.\n- over 8 css filters available.\n- Divide large projects into small parts , design them in separate pages of a project.\n- Export your project as svg or json.\n- Improt the json file again\n- Effects like outline , box-shadow also available.\n- Everything is saved locally , don't need internet to work\n- Pointer helpers are also provided to help place your shape in a perfect position.\n\n## How To Use\n- click on create new file on header\n- select tool\n- click on canvas to add shape\n- the sidebar on right contains all the properties, manipulate them from there.\n- for multipoints shapes like line, polygon, path use right click to end the path.\n- press ctrl key and drag the shape to scale.\n- press shift key and drag the shape to rotate.\n- Click on file then on pages to add more pages.\n- Click on file and then on save to save your project.\n- Click on gradient , gradient creation tool will open up for you.\n- Click on color , to add colors to palette.\n- Click on Insert, clipart search tool will open up for you.\n\n## What all features u get\n- The most complex project That I made is React Svg Editor, It's a in Browser Svg Design Tool has many use cases like Logo Designer, PPT, Ui/UX Design tool, have inbuilt components to search and user cliparts across your projects and other tools for adding effects like gradients, filters, shadows etc.\n- It includes shapes like Circle, Rectangle, ellipse, Text, Line, Ployline, Polygon, Pencil, Image etc, you can just open this app and start designing whatever u like, all designs will be saved in In Browser Database called IndexedDB.\n- You can also group two shapes together and thus create a component like Product Card, Navigation bar, Quotes etc and reuse them across your designs, For adding group shape I had to start the project again from scratch brcause I was using Linear traversal by storing shapes in an array to render shapes, But with groups it was not possible so I had to store elements in a map and render them using Depth First Traversal algorithm of trees.\n- You can also add multiple pages to your design project and later run it like a power point presentation.\n-The project is made using React.js and Redux and language used is Typescript.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famkreta%2Fsvgeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famkreta%2Fsvgeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famkreta%2Fsvgeditor/lists"}