Parametric SVG

Thomas Oster edited this page May 18, 2013 · 3 revisions

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 Interface

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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.