{"id":19881542,"url":"https://github.com/chifisource/toolipssvg.jl","last_synced_at":"2026-03-05T17:11:06.680Z","repository":{"id":90783852,"uuid":"534928212","full_name":"ChifiSource/ToolipsSVG.jl","owner":"ChifiSource","description":"SVG image interface for Toolips.jl","archived":false,"fork":false,"pushed_at":"2024-05-12T01:39:19.000Z","size":101,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T18:52:26.659Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Julia","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/ChifiSource.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["emmaccode","UnformalPenguin"]}},"created_at":"2022-09-10T07:42:40.000Z","updated_at":"2024-04-27T02:52:01.000Z","dependencies_parsed_at":"2024-05-12T19:15:20.802Z","dependency_job_id":null,"html_url":"https://github.com/ChifiSource/ToolipsSVG.jl","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/ChifiSource%2FToolipsSVG.jl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChifiSource%2FToolipsSVG.jl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChifiSource%2FToolipsSVG.jl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChifiSource%2FToolipsSVG.jl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChifiSource","download_url":"https://codeload.github.com/ChifiSource/ToolipsSVG.jl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241309104,"owners_count":19941725,"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-11-12T17:14:34.779Z","updated_at":"2026-03-05T17:11:06.671Z","avatar_url":"https://github.com/ChifiSource.png","language":"Julia","funding_links":["https://github.com/sponsors/emmaccode","https://github.com/sponsors/UnformalPenguin"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n\u003cimg src = \"https://github.com/ChifiSource/image_dump/blob/main/toolips/toolipsSVG.png\"\u003e\u003c/img\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n  \n[![version](https://juliahub.com/docs/General/ToolipsSVG/stable/version.svg)](https://juliahub.com/ui/Packages/General/ToolipsSVG)\n\n[docs](https://chifidocs.com/toolips/ToolipsSVG) \n\n\n\u003c/div\u003e\n\nToolipsSVG provides SVG components, a `Component{:path}` mutation interface, a multiple dispatch interface for managing and setting size, shape, and positions of different components, and SVG shapes for [Toolips](https://github.com/ChifiSource/Toolips.jl) and [Gattino](https://github.com/ChifiSource/Gattino.jl) powered by [ToolipsServables](https://github.com/ChifiSource/ToolipsServables.jl).\n```julia\nusing ToolipsSVG\n\nwindow = svg(\"main\", width = 500, height = 500)\nsquarepath = path(\"new-square\")\nM!(squarepath, 50, 50)\nL!(squarepath, 100, 50)\nL!(squarepath, 100, 100)\nL!(squarepath, 50, 100)\nL!(squarepath, 50, 50)\nZ!(squarepath)\n\npush!(window, squarepath)\ndisplay(\"text/html\", window)\n```\n\n```julia\nst = star(\"sample\", x= 100, y = 150, outer_radius = 15, inner_radius = 40, angle = 20)\nstyle!(st, \"fill\" =\u003e \"orange\", \"stroke\" =\u003e \"green\")\npush!(window, st)\ndisplay(\"text/html\", window)\n```\n## map\n- [get started](#get-started)\n  - [adding ToolipsSVG](#adding)\n- [components](#components)\n  - [shapes](#shapes)\n  - [paths](#paths)\n- [contributing](#contributing)\n  - [contributing guidelines](#guidelines)\n#### get started\n`ToolipsSVG` may be used with or without a `Toolips` server, but will require an SVG display output of some kind --for example an [IJulia](), [Olive](), [Pluto]() notebook, or [Electron]() window. To show components, call `display(\"text/html\", ::AbstractComponent)`. This will usually be called whenever a `Component` is *shown*, or returned, as well.\n```julia\nusing ToolipsSVG\nnew_window::Component{:svg} = svg(width = 500, height = 500)\nnewcircle::Component{:circle} = circle(cx = 250, cy = 250, r = 20)\nstyle!(newcircle, \"fill\" =\u003e \"blue\")\npush!(new_window, newcircle)\n\ndisplay(\"text/html\", new_window)\n```\n\n\u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2011-32-20.png\"\u003e\u003c/img\u003e\n\n###### adding\n`ToolipsSVG` can be added via `Pkg`.\n```julia\nusing Pkg; Pkg.add(\"ToolipsSVG\")\n```\nFor the latest updates, which might sometimes be broken, you can also add the `Unstable` branch.\n```julia\nusing Pkg; Pkg.add(\"ToolipsSVG\", rev = \"Unstable\")\n```\n###### documentation\nWe are working on a large documentation website for all of these modules (based on `Toolips`) -- documentation will be available for `0.1.1` -- the first patch of this package. In the mean time, a full list of exports is inside of the `ToolipsSVG` doc-string.\n```julia\n?ToolipsSVG\n```\n## components\n`ToolipsSVG` builds an SVG interface atop the parametric `Component` type provided by [ToolipsServables](https://github.com/ChifiSource/ToolipsServables.jl). This *begins* with some base `Component` types to provide accessible constants for high-level templating in typical `Toolips` fashion.\n```julia\n                       #     property                property\n     # element (svg) ( id, key       value         key    value  )\nsample_svg = svg(\"mysvg\", \"prop1\" =\u003e \"sixty-five\", prop2 = 5)\n```\n```julia\ntext\nimage\ncircle\nrect\npath\nline\nellipse\npolyline\npolygon\nuse\ng\n```\nAll of these are normal components, which are used like any other component. We provide `Pair{String, \u003c:Any}` alongside key-word arguments to give properties with the first positional argument being the name.\n```julia\nusing ToolipsSVG\nw, h = 250, 250\nwindow = svg(\"julia_over\", width = w, height = h)\neach_w = (w - 10) / 3\neach_height = h / 2\ncircs = [begin\n          circ = circle(cx = (each_w * e), cy = each_height, r = 10)\n          style!(circ, \"fill\" =\u003e \"#$color\")\n          circ\n     end for (e, color) in enumerate((\"D5635C\", \"60AD51\", \"AA79C1\"))]\n\nwindow[:children] = circs\nwindow\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2017-46-05.png\"\u003e\u003c/img\u003e\n\u003c/div\u003e\n\n`ToolipsSVG` also includes two special components, the `Component{:star}` and `Component{:polyshape}`. These are two different pre-made shapes with unique arguments that change how the shape is rendered. For example, a `star`.\n```julia\nnewstar = star(\"newstar\", x = 50, y = 50, points = 5, inner_radius = 14, outer_radius = 30)\npush!(window, newstar)\n```\n\n\u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2017-54-57.png\"\u003e\u003c/img\u003e\n\n###### shapes\nIn addition to just the basic components to work with, `ToolipsSVG` also includes a parametric shape interface. This interface has support for the following shapes:\n- `:circle`\n- `:rect`\n- `:square`\n- `:polyshape`\n- `:star`\n\nThe shape interface consists of\n- `get_position`\n- `set_position!`\n- `size(::Component{\u003c:Any})`\n- `set_size!`\n- `set_shape`\n- `get_shape`\n\nThis interface provides us with an easy way to consistently get and set the position of different shapes and also translate shapes between eachother with `set_shape`.\n```julia\nwindow[:children] = window[:children][1:3]\nwindow[:children] = [set_shape(comp, :star) for comp in window[:children]]\n```\n\n\u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2018-23-08.png\"\u003e\u003c/img\u003e\n#### paths\nThe last noteworthy feature in `ToolipsSVG` is an interface for drawing `d` data in paths. This is a rather small interface, but can be quite effective. Each argument will be provided to `d` with a space; beyond this, it is simply knowing how to use SVG.\n```julia\nusing ToolipsSVG\nsquarepath = path(\"new-square\")\nM!(squarepath, 50, 50)\nL!(squarepath, 100, 50)\nL!(squarepath, 100, 100)\nL!(squarepath, 50, 100)\nL!(squarepath, 50, 50)\nZ!(squarepath)\n```\n```julia\nwindow = svg(\"main\", width = 200, height = 200, children = [squarepath])\ncont = div(\"holder\", children = [window])\nstyle!(cont, \"padding\" =\u003e 10px)\ncont\n```\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2018-31-25.png\"\u003e\u003c/img\u003e\n\u003c/div\u003e\n\nLet's try a more advanced example ...\n```julia\ncuteheart = path(\"heart\")\nM!(cuteheart, 12, \"21.593c-5.63-5.539-11-10.297-11-14.402\", \n\"0-3.791 3.068-5.191 5.281-5.191 1.312\", 0, \"4.151.501\", \n5.719, 4.457, \"1.59-3.968\", \"4.464-4.447\",\n \"5.726-4.447\", 2.54, 0, 5.274, 1.621, 5.274, 5.181, 0,\n \"4.069-5.136 8.625-11\", \"14.402m5.726-20.583c-2.203\", \"0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183\",\n  \"0-6.281\", \"2.187-6.281\", 6.191, 0, 4.661, 5.571, 9.429, 12, 15.809, \"6.43-6.38 12-11.148 12-15.809\",\n   \"0-4.011-3.095-6.181-6.274-6.181\")\n\nneww = svg(width = 25, height = 25, children = [cuteheart])\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/ChifiSource/image_dump/blob/main/toolips/tlsvgsc/Screenshot%20from%202024-04-26%2020-42-52.png\"\u003e\u003c/img\u003e\n\u003c/div\u003e\n\n### contributing\nThank you for lending a helping hand in the development of this package, and others like it. There are a myriad of different ways to contribute to this project.\n- submitting [issues](https://github.com/ChifiSource/ToolipsSVG.jl/issues)\n- creating packages which use `ToolipsSVG`\n- forking and pull-requesting your changes to this code\n- trying other [chifi](https://github.com/ChifiSource) projects.\n- contributing to other [chifi](https:://github.com/ChifiSource) projects (gives more attention here).\n##### guidelines\n- If there is no issue for what you want to do, create an issue.\n- If you have multiple issues, submit multiple issues rather than typing each issue into one issue.\n- Make sure the issue you are solving or feature you want to implement is still feasible on Unstable -- this is the top-level development branch which represents the latest unstable changes.\n- Please format your documentation using the technique presented in the rest of the file.\n- Make sure Pkg.test(\"ToolipsSVG\") works with your version of ToolipsSVG before making a pull-request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchifisource%2Ftoolipssvg.jl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchifisource%2Ftoolipssvg.jl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchifisource%2Ftoolipssvg.jl/lists"}