Using Media in SVG Format in an Optimal Way

Modified on Mon, 1 Jun at 9:47 AM

When using media in SVG format, display issues may occur depending on the settings used to create the SVG file. This article explains how to optimize SVG files.

Possible Issues

The following issues may be caused by an SVG file:

The SVG media is displayed in the media search but not in the course itself.
The PDF export fails.
The SVG media is not displayed or appears very small in the exported PDF.
The SVG media does not upload correctly and is not displayed in the course preview.

Optimization Options

To create SVG files with the highest possible compatibility, it is recommended to keep the settings as simple as possible and avoid overly complex effects.

The following overview provides examples of settings that you should check when creating an SVG media file in a graphics program, or adjust if display issues occur:

Using the Symbols feature in Adobe Illustrator: This feature causes vectors to not be transferred to the SVG format using standard settings, which can lead to incorrect rendering, e.g. in web browsers.
Using too much whitespace: A media item appearing too small may be caused by excessive whitespace around the actual graphic. In this case, remove the whitespace by cropping the canvas to fit the content.
Using a disallowed element in the SVG, e.g. <ContainsAiGeneratedContent>.
Overly complex layer structure: Fewer nested groups and layers can help improve compatibility.
Overly complex filter effects, especially for drop shadows: Simpler filters help reduce complexity, particularly when multiple filters have been combined.
Using 3D effects: Avoid 3D effects to keep complexity low.
Using feDropShadow: This tag is not allowed.
Missing "in2" attribute in the feComposite tag: Make sure the attribute is included when the feComposite tag is used.
Missing size specifications: Check that the appropriate values are provided for "width" and "height".
Using appropriate export settings: Use the SVG format SVG 1.1 and UTF-8 encoding.