To create custom symbols, it is useful to have a graphical editor or an SVG editor with visual feedback, such as Adobe Illustrator®, Inkscape™, SVG-Edit, Visual Studio Code™. This topic addresses two of them, Inkscape and Visual Studio Code, with tips and instructions for saving symbol definitions when using these tools.

Inkscape

Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in SVG format. You can use it to graphically design your symbols by creating, grouping, aligning, transforming, and styling graphical objects, such as rectangles, ellipses, curves, and lines. For details, please consult the Inkscape online documentation:

Inkscape online documentation


Keep your symbol definitions as simple as possible and do not use the more advanced features offered by Inkscape. Stick to basic shapes and paths, and only use plain colors, if any. Inkscape and similar editors insert a lot of tool-specific information in the SVG files they generate, which is not allowed in symbol definitions.

Once you are done with your symbol design in Inkscape, save the file as follows to remove most of the incompatibilities.

Steps:

  1. In the Inkscape menu, select File > Save As.

  2. In the save as window, choose a file name that is different from your original Inkscape file, set Save as type to Optimized SVG (*.svg), and click Save.



  3. In the Optimized SVG Output window, set the options as shown below:

    Options tab:



    SVG Output tab:



    IDs tab:



  4. Click OK to save the changes.


There still may be unsupported SVG tags and attributes in the saved SVG file. Therefore, always inspect it manually against the recommendations for icons and shapes and the supported SVG specifications.

Visual Studio Code

Visual Studio Code is a free and open-source code editor made by Microsoft. It supports many different programming languages, and therefore, may already be installed on your PC. Next to the out-of-the-box support for basic editing and some common programming languages, VS Code can easily be enhanced by installing extensions that add functionality from the VS Code Marketplace.

For creating and editing SVG vector graphics in VS Code, the SVG extension published by jock is recommended. This extension offers many useful features for handling SVG files, such as:

  • SVG auto completion
  • Live preview
  • Color picker
  • Formatting
  • SVG optimization

Especially the Live preview feature is useful to directly see what the effect is of the changes you make to the SVG code.

The SVG optimization feature is useful to remove some of the SVG tags and attributes that are not supported by Enterprise Studio. For use in VS Code, you can best configure the SVG extension as follows.

Steps:

  1. In the Visual Studio Code menu, go to File > Preferences > Settings.

  2. Look up the SVG extension settings. Start with the defaults, then make the following recommended changes:

    {
      "svg.minify.convertColors": false,
      "svg.minify.convertPathData": false,
      "svg.minify.convertShapeToPath": false,
      "svg.minify.convertTransform": false,
      "svg.minify.mergePaths": false,
      "svg.minify.minifyStyles": false,
      "svg.minify.moveGroupAttrsToElems": false,
      "svg.minify.prefixIds": false,
      "svg.minify.removeDimensions": true,
      "svg.minify.removeStyleElement": true,
      "svg.minify.removeUnknownsAndDefaults": false,
      "svg.minify.removeUselessStrokeAndFill": false,
      "svg.minify.removeViewBox": false,
      "svg.preview.autoShow": true,
      "svg.preview.mode": "svg",
      "svg.preview.showCrossLine": true,
      "svg.preview.showRuler": true
    }


    Once configured, you can invoke the optimization from the context menu.

  3. Select Minify SVG.

  4. Then format using Format Document or Shift+Alt+F.