This topic shows a few examples of SVG symbol definitions. They can serve as an example when creating custom symbols. It is advised that you have some experience with creating SGV files. For further examples of symbol definitions, you can check out the Bizzdesign supplied symbols definitions in your Enterprise Studio configuration. Please make sure not to make any changes to these files you default configuration!

Block arrow symbol

The block arrow symbol provides a simple, but useful shape. It is designed as a polygon for the standard dimensions of objects (400, 160). Due to its simplicity, it also works well as an icon. Here is the symbol definition for it:

<svg viewBox="0 0 400 160">
  <polygon points="0,0 300,0 400,80 300,160 0,160 0,0" />
</svg>

Desktop symbol


This is an original SVG from the FontAwesome* collection:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="desktop"
  class="svg-inline--fa fa-desktop fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path fill="currentColor"
    d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z">
  </path>
</svg>

Use as shape

To use this symbol as a shape, the explicit fill is removed, the stroke set to "none", and a transparent <rect> is placed behind it according to the recommendations for shapes. The result is the following:

<svg viewBox="0 0 576 512">
  <g stroke="none">
    <rect width="576" height="512" fill-opacity="0" />
    <path
      d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z" />
  </g>
</svg>


The outer <svg>…</svg> tags and any of their attributes will be ignored and may be removed. They are added here just for the convenience of being able to load the symbol file in an external SVG editor.

Use as icon

To use this symbol as an icon, the transparent background is not required, and the path must be given an explicit fill:

<svg viewBox="0 0 576 512">
  <path stroke="none" fill="black"
    d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z" />
</svg>


Fire symbol

This is an original SVG from the FontAwesome* collection:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fire-alt"
  class="svg-inline--fa fa-fire-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path fill="currentColor"
    d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z">
  </path>
</svg>


This can be converted to a simple line drawing, such that the colors and thickness of the line can be fully controlled by Enterprise Studio. Use Inkscape™ to break apart the path. Then remove the inner path and save the file as Optimized SVG. Remove the remaining unsupported attributes using a text editor, which will give the following result:

<svg viewBox="0 0 448 512">
  <path d="M 323.56,51.2 C 302.76,70.5 283.98,90.79 267.34,111.17 240.08,73.62 206.28,35.53 168,0 69.74,91.17 0,209.96 0,281.6 0,408.85 100.29,512 224,512 347.71,512 448,408.85 448,281.6 448,228.33 396.02,118.46 323.56,51.2 Z"/>
</svg>


If desired, you can fix the stroke-width="30".



* https://fontawesome.com/license