Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vdelachaux/SVG-with-Classes
A class to manage SVG creation
https://github.com/vdelachaux/SVG-with-Classes
4d-class 4d-code 4d-project
Last synced: about 1 month ago
JSON representation
A class to manage SVG creation
- Host: GitHub
- URL: https://github.com/vdelachaux/SVG-with-Classes
- Owner: vdelachaux
- License: mit
- Created: 2021-10-06T14:47:45.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T15:55:12.000Z (7 months ago)
- Last Synced: 2024-08-03T20:03:01.007Z (5 months ago)
- Topics: 4d-class, 4d-code, 4d-project
- Language: 4D
- Homepage:
- Size: 1.11 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-4d - SVG with Classes
README
# SVG-with-Classes
After 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.
The goal of this class is to reduce the complexity of code to create and manipulate svg images/documents.
This 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).
For more details on properties and functions, see the [documentation for the svg class](Documentation/Classes/svg.md)
`Enjoy the 4th dimension`
## Code sample
Using 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:
```4d
// Create a new canvas
var $root : Text
$root:=SVG_New
// Create a "background" layer at the root level
var $background : Text
$background:=SVG_New_group($root)
// Create a "foreground" layer, at the root level, and apply a translation
var $foreground : Text
$foreground:=SVG_New_group($root)
SVG_SET_TRANSFORM_TRANSLATE($foreground; 45; 45)
// Create a yellow square into the "foreground" layer
var $rect : Text
$rect:=SVG_New_rect($foreground; 2.5; 2.5; 20; 20)
SVG_SET_FILL_BRUSH($rect; "yellow")
SVG_SET_STROKE_BRUSH($rect; "yellow")
// Add, into the "background" layer, a blue circle without fill & with a border of 4 pixels
var $circle : Text
$circle:=SVG_New_circle($background; 100; 100; 50)
SVG_SET_FILL_BRUSH($circle; "none")
SVG_SET_STROKE_BRUSH($circle; "blue")
SVG_SET_STROKE_WIDTH($circle; 4)
// Create a red square into the "background" layer
$rect:=SVG_New_rect($background; 10; 10; 100; 100)
SVG_SET_FILL_BRUSH($rect; "red")
SVG_SET_STROKE_BRUSH($rect; "red")
// Show the result into the SVG viewer
SVGTool_SHOW_IN_VIEWER($root)
// Do not forget to release the memory !
SVG_CLEAR($root)
```
The `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 (only 8 lines of easily understandable code versus 21 complicated lines with the component):
```4d
var $svg : cs.svg
// Create a new canvas
$svg:=cs.svg.new()
// Create a "background" & '"foreground" group & apply a translation to the last one
// [Layers are automatically created at the root level]
$svg.layer("background"; "foreground").translate(45; 45)
// Create a yellow square & memorize its reference as "original"
// [The object is automatically added to the latest created/used "container" ("foreground")]
$svg.square(20).position(2.5; 2.5).color("yellow").push("original")
// Set "background" layer for the next operations
If ($svg.with("background"))
// Add, a blue circle without fill & with a border of 4 pixels
$svg.circle(50).color("blue").position(100; 100).fill(False).stroke(4)
// Clone the "original" square, colore it red, change its dimensions
$svg.clone("original").color("red").position(10; 10).size(100; 100)
End if
// Show the result into the SVG viewer
// [The memory is automatically freed]
$svg.preview()
```
The svg tree created:
```xml
```
The result image:
