{"id":13430873,"url":"https://github.com/KristofferStrube/Blazor.SVGEditor","last_synced_at":"2025-03-16T06:31:31.024Z","repository":{"id":41310358,"uuid":"346172307","full_name":"KristofferStrube/Blazor.SVGEditor","owner":"KristofferStrube","description":"A basic SVG editor written in Blazor.","archived":false,"fork":false,"pushed_at":"2024-08-04T10:23:14.000Z","size":43861,"stargazers_count":319,"open_issues_count":8,"forks_count":52,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-14T02:48:02.271Z","etag":null,"topics":["blazor","blazor-webassembly","drag-and-drop","editor","path","renderer","svg","webassembly","wysiwyg"],"latest_commit_sha":null,"homepage":"https://kristofferstrube.github.io/Blazor.SVGEditor/","language":"C#","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/KristofferStrube.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2021-03-09T23:26:02.000Z","updated_at":"2025-03-08T16:50:46.000Z","dependencies_parsed_at":"2023-10-22T15:33:08.249Z","dependency_job_id":"438d74a2-4dc7-4c5f-9807-125e623f1749","html_url":"https://github.com/KristofferStrube/Blazor.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/KristofferStrube%2FBlazor.SVGEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KristofferStrube","download_url":"https://codeload.github.com/KristofferStrube/Blazor.SVGEditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243676764,"owners_count":20329434,"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":["blazor","blazor-webassembly","drag-and-drop","editor","path","renderer","svg","webassembly","wysiwyg"],"created_at":"2024-07-31T02:00:58.616Z","updated_at":"2025-03-16T06:31:30.997Z","avatar_url":"https://github.com/KristofferStrube.png","language":"C#","funding_links":[],"categories":["Sample Projects","others","C# #"],"sub_categories":["Others"],"readme":"# KristofferStrube.Blazor.SVGEditor\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/KristofferStrube/Blazor.SVGEditor)](https://github.com/KristofferStrube/Blazor.SVGEditor/issues)\n[![GitHub forks](https://img.shields.io/github/forks/KristofferStrube/Blazor.SVGEditor)](https://github.com/KristofferStrube/Blazor.SVGEditor/network/members)\n[![GitHub stars](https://img.shields.io/github/stars/KristofferStrube/Blazor.SVGEditor)](https://github.com/KristofferStrube/Blazor.SVGEditor/stargazers)\n[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/KristofferStrube.Blazor.SVGEditor?label=NuGet%20Downloads)](https://www.nuget.org/packages/KristofferStrube.Blazor.SVGEditor/)\n\nA basic HTML SVG Editor written in Blazor.\n\n![Showcase](./docs/showcase.gif?raw=true)\n\n# Demo\nThe WASM sample project can be demoed at [https://kristofferstrube.github.io/Blazor.SVGEditor/](https://kristofferstrube.github.io/Blazor.SVGEditor/)\n\n# Getting Started\n## Prerequisites\nYou need to install .NET 7.0 or newer to use the library.\n\n[Download .NET 7](https://dotnet.microsoft.com/download/dotnet/7.0)\n\n## Installation\nYou can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:\n```bash\ndotnet add package KristofferStrube.Blazor.SVGEditor\n```\nThe package can be used in Blazor WebAssembly and Blazor Server projects. In the samples folder of this repository, you can find two projects that show how to use the `SVGEditor` component in both Blazor Server and WASM.\n\n## Import\nYou need to reference the package to use it in your pages. This can be done in `_Import.razor` by adding the following.\n```razor\n@using KristofferStrube.Blazor.SVGEditor\n```\n\n## Add to service collection\nTo use the component in your pages you also need to register som services in your service collection. We have made a single method that allows you to add the needed service which you use like so:\n\n```csharp\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\nbuilder.RootComponents.Add\u003cApp\u003e(\"#app\");\nbuilder.RootComponents.Add\u003cHeadOutlet\u003e(\"head::after\");\n\nbuilder.Services.AddScoped(sp =\u003e new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });\n\n// Adding the needed services.\nbuilder.Services.AddSVGEditor();\n\nawait builder.Build().RunAsync();\n```\n\n## Include needed stylesheets and scripts\nThe libraries that the component uses also need to have some stylesheets and scripts added to function.\nFor this, you need to insert the following tags in the `\u003chead\u003e` section of your `index.html` or `Host.cshtml` file:\n```html\n\u003clink href=\"_content/BlazorColorPicker/colorpicker.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/Blazor.ContextMenu/blazorContextMenu.min.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/KristofferStrube.Blazor.SVGEditor/kristofferStrubeBlazorSVGEditor.css\" rel=\"stylesheet\" /\u003e\n```\nThe library uses Scoped CSS, so you must include your project-specific `.styles.css` CSS file in your project for the scoped styles of the library components. An example is in the test project in this repo:\n```html\n\u003clink href=\"KristofferStrube.Blazor.SVGEditor.WasmExample.styles.css\" rel=\"stylesheet\" /\u003e\n```\n\nAt the end of the file, after you have referenced the Blazor Server or Wasm bootstrapper, insert the following:\n\n```html\n\u003cscript src=\"_content/Blazor.ContextMenu/blazorContextMenu.min.js\"\u003e\u003c/script\u003e\n```\n\n## Adding the component to a site.\nNow, you are ready to use the component in your page. A minimal example of this would be the following:\n\n```razor\n\u003cdiv style=\"height:80vh\"\u003e\n    \u003cSVGEditor Input=@Input InputUpdated=\"(string s) =\u003e { Input = s; StateHasChanged(); }\" /\u003e\n\u003c/div\u003e\n\n@code {\n    private string Input = @\"\u003crect x=\"\"0\"\" y=\"\"0\"\" height=\"\"200\"\" width=\"\"200\"\" fill=\"\"green\"\" stroke=\"\"blue\"\" stroke-width=\"\"2\"\"\u003e\u003c/rect\u003e\";\n}\n```\n\n# Tag type support and attributes\n- RECT (x, y, width, height, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- CIRCLE (cx, cy, r, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- ELLIPSE (cx, cy, rx, ry, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- POLYGON (points, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- POLYLINE (points, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- LINE (x1, y1, x2, y2, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- TEXT (x, y, style:(font-size,font-weight,font-family), fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n- PATH (d, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n    - Movements\n    - Lines\n    - Vertical Lines\n    - Horizontal Lines\n    - Close Path\n    - Cubic Bézier Curve\n        - Shorthand aswell\n    - Quadratic Bézier Curve\n        - Shorthand aswell\n    - Elliptical Arc Curve\n        - Needs more work for radi interaction\n- G (fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-offset)\n    - Missing scaling of children\n- ANIMATE\n    - Support for showing all Animate tags when Playing\n    - Support for editing Fill animation values\n    - Support for editing Stroke animation values\n    - Support for editing Stroke Offset values\n- LINEARGRADIENT (x1, x2, y1, y2, and stops)\n\n# Current goals\n- Add support for touch devices\n- Support errors better to recover instead of crashing when parsing malformed SVGs.\n\n# Issues\nFeel free to open issues on the repository if you find any errors with the package or have wishes for features.\n\n# Related articles:\n- https://kristoffer-strube.dk/post/blazor-svgeditor-released/\n\n# Diagram of relation between core types in the project.\n\n```mermaid\n  graph LR;\n      subgraph Shapes\n      Circle\n      Ellipse\n      Line\n      Text\n      Path\n      Polygon\n      Polyline\n      Rect\n      G\n      end\n      subgraph Path Instructions\n      ClosePathInstruction\n      CubicBézierCurveInstruction\n      EllipticalArcInstruction\n      HorizontalLineInstruction\n      LineInstruction\n      MoveInstruction\n      QuadraticBézierCurveInstruction\n      ShorthandCubicBézierCurveInstruction\n      ShorthandQuadraticBézierCurveInstruction\n      VerticalLineInstruction\n      end\n      ISVGElement[[ISVGElement]]\n      Shape[[Shape]]\n      BasePathInstruction[[BasePathInstruction]]\n      BaseControlPointPathInstruction[[BaseControlPointPathInstruction]]\n      IPathInstruction[[IPathInstruction]]\n      Shape-.-\u003eISVGElement;\n      SVG------ISVGElement\n      G---ISVGElement;\n      Path-.-\u003eShape;\n      Path-----IPathInstruction\n      G-.-\u003eShape;\n      Circle-.-\u003eShape;\n      Ellipse-.-\u003eShape;\n      Line-.-\u003eShape;\n      Text-.-\u003eShape;\n      Polygon-.-\u003eShape;\n      Polyline-.-\u003eShape;\n      Rect-.-\u003eShape;\n      ClosePathInstruction--\u003eBasePathInstruction\n      CubicBézierCurveInstruction--\u003eBaseControlPointPathInstruction\n      EllipticalArcInstruction--\u003eBasePathInstruction\n      HorizontalLineInstruction--\u003eBasePathInstruction\n      LineInstruction--\u003eBasePathInstruction\n      MoveInstruction--\u003eBasePathInstruction\n      QuadraticBézierCurveInstruction--\u003eBaseControlPointPathInstruction\n      ShorthandCubicBézierCurveInstruction--\u003eBaseControlPointPathInstruction\n      ShorthandQuadraticBézierCurveInstruction--\u003eBaseControlPointPathInstruction\n      VerticalLineInstruction--\u003eBasePathInstruction\n      BaseControlPointPathInstruction--\u003eBasePathInstruction\n      BasePathInstruction--\u003eIPathInstruction\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKristofferStrube%2FBlazor.SVGEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKristofferStrube%2FBlazor.SVGEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKristofferStrube%2FBlazor.SVGEditor/lists"}