Introduction

19 Upvotes | 6 Comments.
This tutorial is an extension of the Ultimate Guide to BIMI. Many users are trying to implement BIMI and getting SVG/logo error with the BIMI validator tools. The objective of this tutorial is to share the solutions to all those errors. 

What is the acceptable file type of the BIMI logo?

BIMI only supported Scaled Vector Graphics (SVG) in Tiny-PS (Portable/Secure) standard. This specific SVG format is highly secure and lesser prone to potential malware or tracking related vulnerabilities. Compared to bitmap formats like GIF, JPEG, and PNG, the vector graphics are less detailed, loads faster, and easy to scale.

Tiny P/S is a pretty new standard, so most existing graphic design tools currently don't directly support creating SVG in Tiny-PS standards.

BIMIGroup, the creator of the BIMI framework, has officially released the following tools which can help you convert your SVG into BIMI compatible SVG in Tiny-PS format:

• GUI Tool for Windows 10: This is a standalone .exe application for Windows 10 that converts an SVG Tiny 1.2 file into SVG Tiny-PS format.
• GUI Tool for MacOS: This is a standalone application for MacOS that converts an SVG Tiny 1.2 file into SVG Tiny-PS format.
• Custom Adobe Illustrator Export Script: This is a custom script that you can add to Adobe Illustrator to convert an open SVG Tiny 1.2 file into SVG Tiny-PS format. This script works fine with both Windows and MacOS installations. 

How to validate whether an SVG image meets the BIMI specifications?

BIMI supports SVG files in Tiny P/S format, which is different from the most commonly used SVG Tiny 1.2 format. 

SVG Tiny P/S is quite a new format, because of which currently, there are limited tools available to generate and validate a BIMI compatible SVG Tiny P/S format logo file. However, there are technical ways to the logo file with BIMI standards.

The upcoming section is going to be more technical, which will explain the exact steps to validate a BIMI logo file.

If you're a programmer with a fair understanding of XML format, then it's easy for your to validate your SVG logo file against the BIMI standards. Your SVG Tiny P/S is actually saved in an XML file, so the best way to validate it against the BIMI specification is to compare this XML file with a BIMI recommended XML file structure.

BIMIGroup has developed a RELAX NG Compact (RNC) XML validation file for the SVG P/S profile. So, you can take your SVG Tiny P/S format XML file and run it against the SVG P/S RNC schema to know any BIMI compliance issue with your logo file.

You will require an RNC schema interpreter like jingtrang to run an SVG file against the SVG P/S RNC. jingtrang is a python library, so if you're using say python 3.x, then you can directly install this library from your terminal using the following command:

pip3 install jingtrang

Once this is installed, you will need to compare your SVG logo file with the standard RNC file published by BIMI.

Step1: Download the RNC XML schema validation file.

Step2: Run the following command in the terminal by changing the file path:

pyjing -c [path/to/svg_1-2_ps.rnc] [path/to/logo.svg]

Step3: If your SVG file passes the SVG P/S RNC profile defined by the BIMI guidelines, then there will be no output after Step 2. This means your logo file is fully compliant with BIMI specification. However, if it fails to validate the defined RNC profile, then there will be some error like the following:

error: value of attribute "version" is invalid; must be equal to "1.2"

error: value of attribute "baseProfile" is invalid; must be equal to "tiny-ps"

error: attribute "x" not allowed here; expected attribute "about", 
"class", "color", "color-rendering", "content", "contentScriptType", "datatype", "direction", 
"display-align", "externalResourcesRequired", "fill", "fill-opacity", "fill-rule", "focusable",
"font-family", "font-size", "font-style", "font-variant", "font-weight", "height", 
"line-increment", "playbackOrder", "preserveAspectRatio", "property", "rel", "resource", "rev",
 "role", "snapshotTime", "solid-color", "solid-opacity", "stop-color", "stop-opacity", "stroke",
 "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-
miterlimit", "stroke-opacity", "stroke-width", "text-align", "text-anchor", "timelineBegin", 
"typeof", "unicode-bidi", "vector-effect", "viewBox", "width", "xml:base", "xml:lang", 
"xml:space" or "zoomAndPan"

error: attribute "y" not allowed here; expected attribute "about", 
"class", "color", "color-rendering", "content", "contentScriptType", "datatype", "direction",
"display-align", "externalResourcesRequired", "fill", "fill-opacity", "fill-rule", "focusable",
"font-family", "font-size", "font-style", "font-variant", "font-weight", "height", 
"line-increment", "playbackOrder", "preserveAspectRatio", "property", "rel", "resource", "rev", 
"role", "snapshotTime", "solid-color", "solid-opacity", "stop-color", "stop-opacity", "stroke", 
"stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit",
"stroke-opacity", "stroke-width", "text-align", "text-anchor", "timelineBegin", "typeof", 
"unicode-bidi", "vector-effect", "viewBox", "width", "xml:base", "xml:lang", "xml:space"
 or "zoomAndPan"

error: element "g" not allowed yet; missing required element "title"

You can open your SVG logo file in any text editor, and fix the problems which are indicated by the RNC validator and re-run to see a new status. Most of the times, many of the errors are interrelated, so fixing one problem can auto-fix many of the other reported errors.

DO's and DONOT's for BIMI SVG Tiny P/S document

You should ensure that the following elements are included while creating a BIMI compatible SVG Tiny P/S file: 

• “baseProfile” attribute is set to “tiny-ps”
• “version” attribute is set to “1.2”
• <title> element must be there which reflects your company name. 
• <desc> element should be included to support accessibility.

DONT's for BIMI SVG Tiny P/S logo file:

• No external links other than to the specified XML namespaces should be present in your logo's XML file.
• Avoid using any script, animation, or other interactive elements in the XML.
• “x=” or “y=” attributes should be within the <svg> root element

Conclusion

Make sure you're using an SVG Tiny P/S format logo file for BIMI. In case the BIMI validator is giving some errors for your SVG logo, then try validating the same with the RNC Schema validation file recommended in this tutorial.