Designer – SVG Code tool

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

How to export your vector design as an SVG

Open your design in your vector software and ensure its dimensions match the selected badge format in Designer. Click Export As and select SVG as the file format. In the export settings, set Font Type to Convert to Outline. Click Show Code and copy the generated SVG code. Paste the code into the Content (SVG) field in IDpack. Alternatively, save the SVG file, open it in a text editor, copy the code, and paste it into the Content (SVG) field.

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>

Position

The Position properties define the placement and size of an element within the design. Adjusting these values allows precise control over where the SVG appears and how much space it occupies.

• Left (X) – Sets the horizontal position of the element, measured from the left edge of the design.
• Top (Y) – Sets the vertical position of the element, measured from the top edge of the design.
• Width – Defines the horizontal size of the SVG.
• Height – Defines the vertical size of the SVG.

Adjusting these properties ensures the SVG is properly aligned and scaled within the design.

Properties

• Visible

  Controls whether the SVG is displayed in the badge preview and print output. When unchecked, the SVG remains in the design but is not printed.

• Content (SVG)

  Defines the SVG markup rendered as a vector graphic. Paste valid SVG code directly into this field.

• Opacity

  Adjust the SVG opacity using predefined levels: None, 25%, 50%, 75%, or 90%.