Template Editor - SVG Code toolTemplate Editor – SVG Code tool

The SVG Code tool allows you to insert custom SVG code into your template. This feature is ideal for adding scalable vector graphics created in design software such as CorelDRAW, Illustrator, Inkscape, or Affinity Designer.

How to export your vector design as an SVG

  1. Open your design in your preferred vector software and ensure that its dimensions match your selected badge format in Template Editor – Edit Template.
  2. Click Export As and select SVG as the file format.
  3. In the export settings, set Font Type to Convert to Outline.
  4. Click Show Code and copy the generated SVG code.
  5. Paste the copied code into the Content (SVG) field in IDpack.
  6. Alternatively, you can save the SVG file, open it in Notepad or any text editor, copy the code, and paste it into the Content (SVG) field in IDpack.
Export As

SVG code example

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.28 243.96">
  <defs>
    <style>
      .cls-1 { fill: #c52928; }
      .cls-2 { fill: #facdd2; }
      .cls-3 { fill: #7d2225; }
      .cls-3, .cls-4 {mix-blend-mode: screen; opacity: .5; }
      .cls-5 { isolation: isolate; }
      .cls-4 { fill: #b73236; }
    </style>
  </defs>
  <g class="cls-5">
    <g id="Layer_1">
      <polygon class="cls-2" points="153.28 0 153.28 47.59 22.63 103.18 0 111.67 0 0 153.28 0" />
      <polygon class="cls-1" points="153.28 0 28.44 51.53 28.44 215.96 0 243.96 0 0 153.28 0" />
      <polygon class="cls-4" points="28.44 51.53 0 77.9 0 23.09 28.44 51.53" />
      <polygon class="cls-3" points="28.44 106.34 0 132.71 0 77.9 28.44 106.34" />
      <polygon class="cls-4" points="28.44 161.15 0 187.52 0 132.71 28.44 161.15" />
      <polygon class="cls-4" points="28.44 215.96 0 243.96 0 187.52 28.44 215.96" />
    </g>
  </g>
</svg>

SVG Badge sample

Position

The Position properties define the placement and dimensions of an element within the template. Adjusting these values allows you to precisely control where an element appears and how much space it occupies.

  • Left (X) – Specifies the horizontal position of the element, measured from the left edge of the template.
  • Top (Y) – Specifies the vertical position of the element, measured from the top edge of the template.
  • Width – Defines the width of the element, determining how much horizontal space it takes up.
  • Height – Defines the height of the element, determining how much vertical space it occupies.

By adjusting these properties, you can ensure elements are properly aligned and scaled within your design.

Properties

  • Visible

    Determines whether the SVG element is displayed in the badge preview and print output. If unchecked, the SVG remains in the Template but will not be printed.

  • Content (SVG)

    Defines the SVG code that will be rendered as a vector graphic on the template. You can paste custom SVG code directly into the field to display scalable graphics.

  • Opacity

    You can adjust the object’s opacity to one of the following levels: None, 25%, 50%, 75%, or 90%, allowing for semi-transparency effects.