Skip to content

SVG MultiPlate Format (V2)

This defines the SVG format visible to end users. You should also consult the internal format definition for details.

Files

  • cuttingPlan.svg defines the cutouts/engravings of the asset and is available as a to-be-filled-out template (AI + SVG). The file may also be named differently, usually the import should search for some .svg containing cutting or similar.
  • 3dModel.obj and 3dModel.png are optional. If present, the model will be displayed in the editor when placing the asset. The origin (0, 0, 0) of the model is placed on the origin of the asset coordinate system (imagine the model being placed on top of the asset plate in 0, 0, 0, growing z-upwards). The 3D model may also be in a subfolder.
  • (possibly obsolete) assetDetails.md or descriptionForWebsite.md defines the metadata of the asset and is available as a to-be-filled-out template. This becomes irrelevant if the user enters these details on the website directly.
  • (possibly obsolete) thumbnail1024.jpg (optional) defines the thumbnail to be shown in the asset browser. There may also be a gallery (sub)sub folder containing multiple images which should be put on the website. As with the asset details, this could also be done on kyub.com directly and may be obsolete.

SVG Format

Embedded in plate On an edge (inside) Two parts
in-plate.png edge.png twp-parts.png

In the SvG, multiple plates can be defined. A plate is at least defined by an rectangle or polygon that has an ID that starts with plateBorder (e.g. platerBorder0, plateBorder1, ...). Inside a plate, you can define to-be-engraved (with the stroke color #FFA500, CSS color orange) or to-be-cut (#FF0000, red) elements. Each plate may also contain a circle with an ID that starts with plateCenter. If present, it defines the point that will be considered as the plate's center (else, the plateBorder's AABB's center is used).

If the SVG contains no plateBorder and exactly one plateCenter element, it defines a single plate with no translation and rotation that is centered on the plateCenter. The importer should determine the plate's size by building the AABB around engraved/cutout elements in the SVG. In this case, the plate border is conisdered to be fully "green" (see below).

If neither a plateBorder nor a plateCenter is found, this means that this asset defines no plate. This may be useful in cases where an asset can be represented by a 3D model which is not connected to kyub geometry in any way. Everything in the provided SVG will then be considered "additional geometry" (see below).

The Plate's border is either black or green

The plate border can either be black (#000000) or green (#00FF00, CSS color lime). Individual sections (a section is the part of the polygon or rectangle that connects two consecutive points) can also be re-colored by overlaying a green line on the otherwise black plate border.

Green means "this plate can be extended in that direction", whereas black means "this edge needs to exist". Take for example:

  • A fully green rectangle means "this plate can extend in any direction" and thus also means "this plate can be embedded into any bigger plate". Such an asset, as the example swivel caster, can be placed anywhere on an existing plate, given the plate is big enough
  • A rectangle with three out of four sides being green means "this plate can extend, but requires one edge". This asset can be placed on an existing plate as well, as long as it is placed on the edge of the plate, so that the asset's requirement of an edge is met.
  • A rectangle with three black sides and only one green side consequently means that this asset can probably not being embedded in existing plates. It could however be placed adjacent to existing plates, so that the green side of the asset's plate will be merged with existing plates.

Multiple plates can have different placement in space

Below each plate, there is a text that describes the plate's placement. It has a format like PartA|0,0,0|0°0°0°.

  • partA describes the part this plate belongs to (e.g. PartA, PartB, ...). All plates of one part are rigidly connected, however, different parts may move relative to each other (e.g. A closet and its door are two parts, as the door can rotate around the closet at a certain angle). Defining the type of movement is not supported yet and will be implemented in a future format version.
  • The second part |0,0,0| describes the XYZ coordinates of the plate (= of the plate's center point, which is the center of the plateCenter element if it exists, or otherwise the center point of the plateBorder's AABB) in asset coordinates. All plates lie in the same coordinate system and are in mm. You can imagine the SVG template as a plate lying on the ground, all plate material extruding into z-negative space, y going upwards and x to the right. you can move the plate e.g. by defining |25,0,25|, which moves the plate 25mm to the right (x) and 25mm towards you (z upwards).
  • The last part |0°0°0°| describes the plate's rotation along the asset's XYZ axis. |0°90°0°| thus means that the plate is (first translated, then) rotated by 90° clockwise along the y-axis, which means flipping it to the right. Rotations are applied in X-Y-Z order and always based on the asset's (global) rotation axes - meaning that the y-rotation will not, as with Euler angles, use the already rotated coordinate system after the x-rotation, but the initial y-axis.

Additional geometry: cutouts outside of plates

If your asset requires more material to be cut, you can just draw red shapes outside of the plate borders. These red shapes will be exported to SVG as well if your asset is used in a model.

Program specifics

For Illustrator, there is a kyubTemplateColors file that contains the kyub template colors as color swatches.