How to create SVG Tiny PS file for VMC

Introduction – SVG Tiny ps 

What is an SVG Tiny ps file used for? Lets explain it from the beginning. Verified Mark Certificate (VMC) enables your company to render a logotype next to your brand name in your customer’s email clients. According to trials with companies on board for the initial rollout of VMC, they increased the open rate by 10%.

VMC is designed to be simple, but considering how new this technology is and how the security specifications of the logos are designed, it is required that you first save your logotype to an SVG file and then you either have to make some manual changes to the file or download the conversion tool that recently launched to export the file directly to a VMC-compliant logo. Keep in mind that the conversion tool might not be 100% polished yet since it is so new.

Many companies have created their logo in Photoshop or other pixel-based software. However, this format does not work for the logo to be approved for VMC. You must therefore first convert the logo to a vector format.

The logo that will ultimately be displayed in the recipient’s email client must therefore be in SVG Tiny PS format. PS stands for Portable / Secure and the specific SVG profile belongs to SVG Tiny 1.2 but somewhat stricter in terms of the security mechanisms in the VMC certificate.

In order to be able to get the certificate issued, in addition to the logo being in the correct file, you are required to follow the remaining steps which you will find here or contact us at support@abion.com

Requirements for VMC logo – SVG Tiny ps file

• Logo must be in vector format and not pixel format
• Logo must be a registered figurative mark
• The image with the logo should be square (keep in mind that the image will be round during use and should therefore be centered)
• The format of the file must be SVG Tiny PS (PS stands for Portable / Secure)
• A solid background color to ensure that the logo is not affected by different display environments
• Do not exceed 32KB

SVG conversion tool

You have the option to download the conversion tool in GitHub under an MIT free open source software license, depending on whether you have a Windows or MacOS or work in Adobe Illustrator. If you do not have Illustrator and have a logo that you have already exported to SVG Tiny 1.2 format, you should download one of the standalone applications. If you have Illustrator, this script is useful as you can upload the script and easily access it from the “script” menu.

1. Save the original file (vector file of the figurative trademark) in SVG format, select SVG Tiny 1.2
2. Download the conversion tool depending on which suits you:
   – Standalone GUI Tool – Windows 10: A standalone application for Windows 10
   – Standalone GUI Tool – MacOS: A standalone MacOS application
   – Adobe Illustrator Export Script: A script that can be added to Adobe Illustrator (both Windows and MACOS) that creates the ability to convert an SVG Tiny 1.2 file to SVG PS format
3. Follow the additional instructions given on each selection

We are aware that the SVG Tiny PS format is so new that the converters have not yet been fully developed. There is a risk that you may encounter problems converting the logo. If this happens, it is the creators of the tool who should be contacted.

Manual changes – SVG Tiny ps

Overview, quick guide

1. In Illustrator, save the original file in SVG format, select SVG Tiny 1.2
2. Open the SVG Tiny 1.2 file in any code editor
3. Make the following adjustments to the XML code:
   – Change baseProfile to “tiny-ps”
   – Delete x / y attributes
   – Delete overflow = “visible”
   – Add title tag with your brand name

Step by step

Step 1: Save file as SVG Tiny 1.2 in Illustrator

1. Open your original file (vector-based with .ai, .eps, .svg) in Illustrator
2. Go to File -> Save As
3. You will now get a box where you name the file. In the “Type:” box, select SVG
4. Click “Save”
5. In the next box that appears in “SVG Profiles”, select “SVG Tiny 1.2” and as Image Location select “Preserve”
   
6. Click “OK”

Step 2: Manual steps to convert the SVG Tiny ps file

1. Open the saved file in any text editor, such as Atom, CodePen, Nano, Sublime Text, Vim or Visual Studio Code
2. The XML code displayed will resemble the following image
   
3. Change baseProfile to “tiny-ps”
4. Remove any “x =: 0px” y = ”0px”
5. Remove any overflow = “visible”
6. Make sure the file has a tag
7. Add a title tag with your company name above the g tag
   
8. Then save the file. Your new XML code will look like the following:
   

Congratulations!!

Your image should now be safe and adapted to SVG Tiny PS!