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
|
![]() |
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 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.