{"id":13787525,"url":"https://github.com/vdelachaux/SVG-with-Classes","last_synced_at":"2025-05-12T00:31:07.394Z","repository":{"id":58647411,"uuid":"414252491","full_name":"vdelachaux/SVG-with-Classes","owner":"vdelachaux","description":"A class to manage SVG creation","archived":false,"fork":false,"pushed_at":"2024-06-07T15:55:12.000Z","size":1159,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-18T00:37:28.565Z","etag":null,"topics":["4d-class","4d-code","4d-project"],"latest_commit_sha":null,"homepage":"","language":"4D","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/vdelachaux.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}},"created_at":"2021-10-06T14:47:45.000Z","updated_at":"2024-06-07T15:55:15.000Z","dependencies_parsed_at":"2023-01-28T22:15:47.835Z","dependency_job_id":"9bc9cb2b-9c47-48a0-9e60-0b9e1cec53fd","html_url":"https://github.com/vdelachaux/SVG-with-Classes","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/vdelachaux%2FSVG-with-Classes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdelachaux%2FSVG-with-Classes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdelachaux%2FSVG-with-Classes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdelachaux%2FSVG-with-Classes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vdelachaux","download_url":"https://codeload.github.com/vdelachaux/SVG-with-Classes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253655813,"owners_count":21943069,"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":["4d-class","4d-code","4d-project"],"created_at":"2024-08-03T20:00:37.243Z","updated_at":"2025-05-12T00:31:05.250Z","avatar_url":"https://github.com/vdelachaux.png","language":"4D","funding_links":[],"categories":["Programming"],"sub_categories":["Classes"],"readme":"# SVG-with-Classes\n\nAfter creating and using the [4D SVG component](https://doc.4d.com/4Dv19/4D/19/4D-SVG-Component.100-5461938.en.html), I became aware of the need to build a new API much smaller, faster and closer to the SVG format and my use to manage the user interface. \n\nThe goal of this class is to reduce the complexity of code to create and manipulate svg images/documents.\n\u003cbr/\u003eThis class will be augmented according to my needs but I strongly encouraged you to enrich this project through [pull request](https://github.com/vdelachaux/SVG-with-Classes/pulls). This can only benefit the [4D developer community](https://discuss.4d.com/search?q=4D%20for%20iOS). \n\nFor more details on properties and functions, see the [documentation for the svg class](Documentation/Classes/svg.md)\n\n`Enjoy the 4th dimension`\n\n## Code sample\nUsing the 4D SVG component to create and manipulate SVG elements requires knowledge of many commands and becomes difficult to understand and maintain. Creating a simple SVG requires many lines of code:\n\n```4d\n// Create a new canvas\nvar $root : Text\n$root:=SVG_New\n\t\n// Create a \"background\" layer at the root level\nvar $background : Text \n$background:=SVG_New_group($root)\n\t\n// Create a \"foreground\" layer, at the root level, and apply a translation\nvar $foreground : Text\n$foreground:=SVG_New_group($root)\nSVG_SET_TRANSFORM_TRANSLATE($foreground; 45; 45)\n\t\n// Create a yellow square into the \"foreground\" layer\nvar $rect : Text\n$rect:=SVG_New_rect($foreground; 2.5; 2.5; 20; 20)\nSVG_SET_FILL_BRUSH($rect; \"yellow\")\nSVG_SET_STROKE_BRUSH($rect; \"yellow\")\n\t\n// Add, into the \"background\" layer, a blue circle without fill \u0026 with a border of 4 pixels\nvar $circle : Text\n$circle:=SVG_New_circle($background; 100; 100; 50)\nSVG_SET_FILL_BRUSH($circle; \"none\")\nSVG_SET_STROKE_BRUSH($circle; \"blue\")\nSVG_SET_STROKE_WIDTH($circle; 4)\n\t\n// Create a red square into the \"background\" layer\n$rect:=SVG_New_rect($background; 10; 10; 100; 100)\nSVG_SET_FILL_BRUSH($rect; \"red\")\nSVG_SET_STROKE_BRUSH($rect; \"red\")\n\t\n// Show the result into the SVG viewer\nSVGTool_SHOW_IN_VIEWER($root)\n\t\n// Do not forget to release the memory !\nSVG_CLEAR($root)\n```\nThe `svg` class simplifies the creation and manipulation of the SVG elements thanks to a set of simple functions and some automatisms, and decrease the number of variables needed. Here is the equivalent code to get the same result (\u003cmark\u003eonly 8 lines of easily understandable code versus 21 complicated lines with the component\u003c/mark\u003e):\n\n```4d\nvar $svg : cs.svg\n\t\n// Create a new canvas\n$svg:=cs.svg.new()\n\t\n// Create a \"background\" \u0026 '\"foreground\" group \u0026 apply a translation to the last one\n// [Layers are automatically created at the root level]\n$svg.layer(\"background\"; \"foreground\").translate(45; 45)\n\t\n// Create a yellow square \u0026 memorize its reference as \"original\"\n// [The object is automatically added to the latest created/used \"container\" (\"foreground\")]\n$svg.square(20).position(2.5; 2.5).color(\"yellow\").push(\"original\")\n\t\n// Set \"background\" layer for the next operations\nIf ($svg.with(\"background\"))\n\t\n\t// Add, a blue circle without fill \u0026 with a border of 4 pixels\n\t$svg.circle(50).color(\"blue\").position(100; 100).fill(False).stroke(4)\n\t\t\n\t// Clone the \"original\" square, colore it red, change its dimensions\n\t$svg.clone(\"original\").color(\"red\").position(10; 10).size(100; 100)\n\t\t\nEnd if \n\t\n// Show the result into the SVG viewer\n// [The memory is automatically freed]\n$svg.preview()\n```\nThe svg tree created:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\" ?\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" font-family=\"'lucida grande','segoe UI',sans-serif\" font-size=\"12\" preserveAspectRatio=\"none\" shape-rendering=\"crispEdges\" stroke=\"black\" text-rendering=\"geometricPrecision\" viewport-fill=\"none\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\n  \u003cg id=\"background\"\u003e\n    \u003ccircle cx=\"0\" cy=\"0\" fill=\"none\" r=\"50\" stroke=\"blue\" stroke-width=\"4\" transform=\"translate(100,100)\"/\u003e\n    \u003crect fill=\"yellow\" height=\"100\" stroke=\"yellow\" width=\"100\" x=\"10\" y=\"10\"/\u003e\n  \u003c/g\u003e\n  \u003cg id=\"foreground\" transform=\"translate(45,45)\"\u003e\n    \u003crect fill=\"blue\" height=\"20\" stroke=\"blue\" width=\"20\" x=\"2.5\" y=\"2.5\"/\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n```\nThe result image:\n\n\u003cimg src=\"Documentation/svg.png\"\u003e\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdelachaux%2FSVG-with-Classes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvdelachaux%2FSVG-with-Classes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdelachaux%2FSVG-with-Classes/lists"}