How to avoid problems with SVG images in email signatures

Problem:

You are trying to use SVG images in email signatures. Unfortunately, you are unable to insert such signatures (either automatically or manually) into emails by using the CodeTwo Signatures Web Add-in in Outlook for Windows or Outlook on the web (OWA). Instead, you receive the following error:

Your signature could not be inserted.

What’s more, you notice that emails with SVG images are very often treated as spam or that SVG images disappear from your signatures altogether.

Solution:

The problem with pictures in the SVG format is that they can be potentially harmful – attackers can easily exploit them to embed malicious JavaScript code. That’s why Outlook might apply certain security policies that block SVG content, thus blocking the insertion of the affected signature as well. The fact that emails with SVG content are often classified as spam by email servers also goes in line with the assumption that the format might be generally unsafe to use.

Microsoft blocks all inline SVG images in Outlook on the web and Outlook for Windows. It means that SVG images will not be rendered and will be replaced with blank spaces instead.

Tips for replacing an SVG picture in an email signature

The point of using vector graphics such as SVG is to make sure your graphic content is scalable and always looks sharp. Since SVG files are completely blocked in Outlook, this method will not work. However, it is possible to add high-quality images to your signatures without introducing the risks related to potentially harmful SVG files. The alternative approach is using raster graphics (in the PNG or JPG format) of doubled size.

For example, if you have a company logo in the SVG format, you need to convert it to PNG or JPG and make sure that it meets the following specification:

• The image size should be twice as big as the default size you want to use in your signature. For example, if you want the logo to display in 150x150 pixels, your image dimensions should be 300x300 pixels. This way, the logo will be easily scalable and sharp on high-resolution screens like 4k screens, Retina displays, etc.
• The image’s width and height values should be even. For example, a 400x300 resolution works well, as it results in whole numbers (integers) of 200x150 pixels when divided by 2. This way, scaling will be performed without any quality loss. On the other hand, dimensions such as 425x425 pixels might cause display issues, since dividing them by 2 results in 212.5x212.5 pixels. Dividing by a number other than 2 can also result in a high-quality output, but only if the division results in integers.

Once your logo has been prepared according to the above guidelines, insert it to your email signature, following these instructions. By default, the original size values (e.g. 300x300 pixels) will be shown in Width and Height fields. Remember to change them to the values that are twice as small, that is, 150x150 pixels in this example (Fig. 1.). These will be the default values that will apply to standard HD screens. For 4k screens, the logo will be displayed in its full size instead, preserving its quality.

Fig. 1. Changing the original image size (for 4k screens) to the size displayed by default (for HD screens).

The downside of this method is that some high-quality images might end up with a considerable file size. Make sure to optimize images when exporting them to keep their size reasonable.

See also:

• Images in email signatures – linked or embedded?
• Good practices for preparing an email signature