1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
use ;
/// Represents a serializable/deserialized SVG image structure.
///
/// This structure is used to store the basic information of an SVG image, including class, width, height, and viewBox
/// and other attributes, as well as internal SVG child elements.
///
/// # Field
///
/// - `class` : name of a CSS style class that can be used for SVG appearance control.
/// - `width` : the width of the SVG, usually in pixels (px).
/// - `height` : the height of the SVG, usually in pixels (px).
/// - `view_box` : the viewBox attribute of SVG, which defines the coordinate system range of SVG.
/// - `elements` : a list of elements inside SVG, including the `SvgEle` enumeration, representing different SVG child elements.
///
/// Represents the child element enumeration type inside SVG.
///
/// This enumeration is used to store different types of SVG elements such as `Path` (path), `G` (grouping), `Defs` (definition).
/// Where each variant corresponds to a specific SVG element structure, such as `Path` for the `<path>` tag, `G` for the `<g>` tag, and so on.
///
/// The enumeration is serialized/deserialized using `#[serde(rename_all = "kebab-case")]`.
/// Ensure that the field name conforms to the SVG specification in JSON or XML (for example, the `Path` variant will be serialized to `path`).
///
/// # Variant
///
/// - `Path(Path)` : SVG `<path>` element, containing `d` attribute defines path data.
/// - `G(G)` : SVG `<g>` grouping element, used to organize child elements.
/// - `Defs(Defs)` : SVG `<defs>` Defines a container for storing reusable graphic elements.
///
/// Represents an SVG path with various styling attributes.
///
/// This struct is used to represent the `path` element in SVG, including the path data (`d`),
/// optional CSS properties like `class`, `fill`, `stroke`, and other styling options for the stroke
/// (e.g., `stroke-width`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`). These attributes
/// are typically used to style the SVG path element.
///
/// # Example
///
/// ```rust
/// use typst_2_rsx::svg_types::Path;
///
/// let path = Path {
/// d: "M10 10 H 90 V 90 H 10 Z".to_string(),
/// class: Some("my-path".to_string()),
/// fill: Some("red".to_string()),
/// stroke: Some("black".to_string()),
/// stroke_width: Some("2".to_string()),
/// ..Default::default()
/// };
/// println!("{:?}", path);
/// ```
///
/// # Variants
///
/// - `d`: A string containing the path data that defines the shape of the path.
/// - `class`: Optional string to assign a CSS class to the path.
/// - `fill`: Optional string for the fill color of the path.
/// - `stroke`: Optional string for the stroke (outline) color of the path.
/// - `fill_rule`: Optional string to specify the fill rule (e.g., `"nonzero"`, `"evenodd"`).
/// - `stroke_width`: Optional string specifying the width of the stroke.
/// - `stroke_linecap`: Optional string to specify the stroke's linecap (e.g., `"butt"`, `"round"`, `"square"`).
/// - `stroke_linejoin`: Optional string to specify the stroke's linejoin (e.g., `"miter"`, `"round"`, `"bevel"`).
/// - `stroke_miterlimit`: Optional string to define the miter limit for the stroke, used when `stroke-linejoin` is `"miter"`.
/// Represents a collection of attributes for SVG `<path>` elements.
///
/// The `PathEle` enumeration is used to define common attributes of the `<path>` element, such as `class`, `fill`, `d` (path data),
/// and support **JSON serialization/deserialization**, using **kebab-case** naming format.
///
/// For example:
///
/// ```json
/// { "class": "stroke-primary" }
/// ```
///
/// # JSON format
///
/// - **`class`** : Specifies SVG `<path>` CSS class (string)
/// - **`fill`** : Specifies the fill color of `<path>` (string)
/// - **`d`** : Define path data (`d` attribute, string)
/// - **`fill-rule`** : define filling rules (such as `"evenodd"` or `"nonzero"`)
///
/// Because of `#[serde(rename_all = "kebab-case")]`, all JSON fields will be automatically converted to **kebab-case** format.
/// Represents the `<g>` (Group) element in SVG,
/// Can be used to group multiple SVG child elements and apply a `class` style or `transform` transform.
///
/// The `G` struct supports **optional attributes**, such as ` class ` (CSS class) and ` transform ` (transform).
///
/// # Field
///
/// - `class` (optional) : The CSS class name of the SVG `<g>` element, used to apply the style.
/// - `transform` (optional) : The transform attribute, such as ` rotate(45) `, affects all elements in the group.
/// - `elements` : List of included SVG child elements (type ` GEle `).
/// Represents the enumerated type of `g` (grouping), `use` (reference), `path` (path) and other elements in an SVG image.
///
/// This enumeration is used to represent different types of SVG elements and uses `serde(rename_all = "kebab-case")`
/// Perform JSON serialization/deserialization to make the field names conform to the SVG specification (e.g. `class`, `g`, `use`, `path`).
///
/// # Variants
///
/// - `G(G)` : stands for `<g>` element (grouping), used to organize multiple SVG elements.
/// - `Use(Use)` : represents the `<use>` element, representing references to other SVG elements.
/// - `Path(Path)` : represents the `<path>` element, which defines a path in SVG.
/// - `Image(Image)` : represents the `<image>` element, which is used to embed raster or vector images in SVG.
/// Represents the structure of the SVG `<use>` element.
///
/// The `Use` struct is used to describe SVG `<use>` tag, which is used to reuse existing graphic elements.
/// This struct supports **Serialize/Deserialize** and uses a`kebab-case` field name to conform to the naming style of SVG attributes.
///
/// # Field
///
/// - `fill` : fill color, such as `"red"`, `"#ff0000"` or `"none"`.
/// - `x` : the x coordinate of the element, usually a pixel value or a percentage string.
/// - `fill_rule` : Fill rule. Possible values include `nonzero` or `evenodd`.
/// - `href` : The ID of the referenced SVG element, usually in the form "#id", for example "#circle1".
/// - `transform` : Transformation applied to the element, such as translation, scaling, rotation, or skewing.
/// Represents an SVG `<image>` element.
///
/// This struct defines the attributes required to embed a raster image within an SVG document.
/// The fields correspond to standard SVG attributes:
///
/// # Field
/// - `width`: Specifies the width of the image. The value is a string and may include units (e.g., `"100px"`, `"50%"`).
/// - `height`: Specifies the height of the image, also as a string with potential units.
/// - `preserve_aspect_ratio`: Determines how the image should scale within its viewport while preserving its aspect ratio.
/// - `href`: Contains the URI of the image resource. This is used by the SVG renderer to locate and display the image.
/// - `transform` : Transformation applied to the element, such as translation, scaling, rotation, or skewing.
/// Represents the struct of the `<defs>` element, which is used to store reusable SVG definitions.
///
/// The `Defs` structure is usually used to contain reusable SVG elements such as `symbols`, which are not rendered directly.
/// but can be referenced in SVG `s` use` tag.
///
/// # Field
///
/// - `id` : The ID of the `<defs>` element, which can be used to uniquely identify the definition block.
/// - `elements` : contains a list of `Symbol` elements to store reusable graphic definitions.
/// Represents an SVG symbol (`<symbol>`) structure.
///
/// This structure is used to store the basic information of SVG symbol elements, including `id`, `overflow`, and other attributes.
/// and the internal `Path` element (path information).
///
/// The `Symbol` structure is commonly used to define reusable SVG fragments and can be referenced in multiple places via the `<use>` tag.
///
/// # Field
///
/// - `id` : a unique identifier for the SVG symbol, which can be used for `<use>` tag references.
/// - `overflow` : The overflow style attribute of the symbol that defines whether content overflow is allowed.
/// - `element` : The Path inside the symbol, representing the graphic content inside the symbol.
/// Represents a symbolic element that can be either a `Path` or an `Image`.
///
/// This enum is serialized and deserialized using kebab-case naming conventions.
///
/// # Variants
///
/// - `Path` : Represents a vector path element.
/// - `Image` : Represents an image element.
/// ```
/// Represents a `Class` struct containing text content.
///
/// This structure is mainly used to store text content in SVG or other XML formats, and supports Serialize and
/// `Deserialize`.
///
/// # Field
///
/// - `content` : The actual stored text content, represented as a JSON direct string when serialized.
/// Represents the structure of the SVG fill attribute (`fill`).
///
/// This structure is used to store the value of the SVG `fill` attribute and supports Serialize and Deserialize.
/// where the `content` field is serde serialized/deserialized to **direct text values** instead of JSON key-value pairs.
///
/// # Field
///
/// - `content` : fill color values, such as `"red"`, `"#FF0000"`, `"none"`.
/// Represents the `fill-rule` attribute in SVG, which defines the fill rule.
///
/// `fill-rule` determines how to determine the fill area according to the path direction, and is usually used for the `path`, `polygon`, and `clipPath` elements.
/// Its value is usually `nonzero` or `evenodd`.
///
/// # field
///
/// - `content` : The value of the filling rule. Common values include:
/// Represents a simple structure with serializable and deserialized capabilities that contains a content field.
///
/// This struct is mainly used to store a string field `content`, which is renamed by `$value`
/// is the value part of JSON, using specific field names when serializing and deserializing.
///
/// # Field
///
/// - `content` : Stores the content of the string, renaming it as `$value`, which becomes the value part of the JSON when serialized.