Parametric SVG

You do not want to redesign your box everytime you change only the size?

Introduction

VisiCut (currently only the development version from http://137.226.142.25:5080/wwwshare/VisiCutNightly/feature-psvg) supports a new file format, called "Parametric SVG"

Format Description

A parametric SVG file is an SVG file, which has a name ending with ".parametric.svg". We chose this ending, so it is still recognized by other SVG software, because it is still a valid and editable SVG. First thing you need to do, is specifying your parameters in the SVG's defs block:

Parameter Definition

<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1">
  <defs>
    <ref param="width" />
    <ref param="text" type="String" default="Hello World" />
    <ref param="numberOfBoxes" label="The number of generated boxes" type="Integer(1,2,4)" default="2"/>
    <ref param="height" label="Height" label_de-DE="Höhe" default="4.2"/>
  </defs>
</svg>

In this block, we define 3 parameters (width, text and numberOfBoxes). If no type is given, it defaults to "Double", meaning a decimal number. Other types are "String" (text), "Integer" (number) and "Boolean" (true or false). If you do not give a "default", it is 0 for Integer and Double, false for Boolean and "" for String. For Strings, Integers and Doubles, you cann add a set of default values after the Type (e.g. String(hello, world), Integer(1,2,5)), which will be shown as dropdown box in the UI. The parameter name may only contain [a-zA-Z0-9_-]. If you want a better description in the UI, use the "label" attribute. In fact, you can create different label for different Languages, e.g. label_de-DE = "Hallo" label_en_US = "Hi" label_en_EN = "Good day"...

If you load such an SVG in VisiCut, you will get a Parameters-Panel, where you can adjust the Parameters:

Parameter Usage

The SVG is then processed with thymeleaf (http://www.thymeleaf.org/) to generate the resulting SVG. This means you can use all Thymeleaf operations in your SVG and use the parameters you defined.

#Examples

Some examples are shipped with the VisiCut release. Just check File->Examples->built in->Parametric . If you want to see the source, browse: https://github.com/t-oster/VisiCut/tree/feature-psvg/distribute/files/examples/Parametric

Show/Hide parts of the SVG

If you want a rectangle only to be shown, if some parameter is set, you can use the "th:if"-attribute. Let's assume you have defined a Parameter "CutOutside" like:` Then you can just add the attribute to any node (e.g. a Rectangle, Group etc.) like this:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:th="http://www.thymeleaf.org/"
   version="1.1">
  <defs>
    <ref param="CutOutside" type="Boolean" />
  </defs>
  <rect
     width="949.65588"
     height="640.67358"
     style="fill:none;stroke:#0000ff;stroke-width:11.03565407;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
     x="-974.28479"
     y="17.874624"
     th:if="${CutOutside}" />
</svg>

(Note the xmlns:th Namespace. This makes sure, it is still a valid SVG document and editors leave the th:-Attributes alone) This means, evaluate the expression "${CutOutside}" and only include the node (rect), if it evaluates to true. More information can be found on http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html#standard-expression-syntax

Just set some attribute according to a parameter

You can set attributes of SVG-nodes with the "th:attr" attribute:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:th="http://www.thymeleaf.org/"
   version="1.1">
  <defs>
    <ref param="PositionX"/>
    <ref param="PositionY"/>
  </defs>
  <rect
      x="10" <!-- this value has only an effect when opening with Inkscape or another SVG editor,
in VisiCut the th:attr is executed and overrides this -->
      y="20"
      width="15"
      height="15"
      th:attr="x=${PositionX},y=${PositionY}" /> <!-- set x to PositionX and y to PositionY -->
</svg>

Copy a node a number of times

Let's assume you created a complex shape, e.g. a Smiley and it is grouped in an SVG-Group. Now you want it to appear a variable number of times in a row:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:th="http://www.thymeleaf.org/"
   version="1.1">
  <defs>
    <ref param="NumberOfSmileys" type="Integer" default="3"/>
  </defs>
  <g id="smileyGroup"
    th:each="i : ${#numbers.sequence(1, NumberOfSmileys)}" <!-- for each value between 1 and NumberOfSmileys, copy the group and bind i to the number -->
    th:attr="transform='translate(' + ${i*130} + ', 0)'" <!-- set the Attribute 'transform' to the values 'translate(0,0)', 'translate(130,0)', translate(....i*130, 0), so the groups appear next to each other -->
   >
     <!-- Your awesome Smiley Code here -->
  </g>
</svg>