Solving SVG Issues

by | Jun 19, 2024

There are many reasons why your SVG might fail one of the online BIMI validators, and many of these issues stem from the requirement that all SVG images conform to the Tiny Portable Secure (Tiny-PS) standard.

What is SVG Tiny-PS?

SVG Tiny PS (Portable/Secure) is a streamlined profile of the SVG (Scalable Vector Graphics) specification, designed to provide a lightweight, secure, and portable solution for displaying vector graphics, particularly in environments with resource constraints. It retains the core functionality necessary for rendering scalable images while eliminating more complex features that may pose security risks or require extensive processing power. Its simplicity and focus on security ensure that graphics are rendered consistently and safely across diverse platforms.

The basics of SVG tiny-PS

When updating an SVG file to comply with the SVG Tiny-PS standard, additional considerations include ensuring device compatibility, maintaining performance efficiency, and adhering to the standard’s limitations. SVG Tiny-PS supports a limited subset of SVG elements and attributes.

Supported elements:

  • Basic shapes (<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>)
  • Basic text elements (<text>, <tspan>)
  • Simple gradient definitions (linear and radial)
  • Path data (<path>) should be simplified to reduce complexity

Unsupported elements include:

  • Filters and effects
  • Embedded images
  • Scripting and animations (<script>, <animate>, <animateTransform>, etc.)

Common errors and issues

Assume you’ve done everything right: built a Tiny-PS SVG, hosted it, and published a BIMI record. However, you hit a snag with an error message like this: `SVG_FETCH_ERROR: Could not fetch SVG (Size of response body exceeds the maximum allowed of 65535)`, preventing your logo from rendering in the validation tools. This error indicates that your SVG file exceeds the maximum allowed size limit set by the Tiny-PS standard of 32KB (32,768 bytes). Note that some systems enforce a higher limit to provide more flexibility. The primary goal is to reduce your SVG file size while maintaining its integrity and appearance (your designer might have other tools or steps they prefer to use).

Simplify the Vector Graphic

SVG Tiny-PS is designed for small devices, so simplicity is key. Here are steps to simplify your vector graphic:

  • Reduce the Number of Nodes: Simplify paths and reduce the number of nodes (points) in your vector graphic. This can be done using path-simplifying tools in vector graphic software.
  • Limit Colors and Gradients: Use a limited color palette and avoid complex gradients. SVG Tiny-PS supports only simple linear and radial gradients.

Optimize for SVG Tiny-PS Compliance

Ensure your vector graphic meets the SVG Tiny-PS specifications:

  • Use Supported Features: SVG Tiny-PS supports a subset of SVG features. Make sure your graphic only uses elements and attributes that are part of this subset. For example, use basic shapes (rectangles, circles, lines) and simple text formatting.
  • Avoid Unsupported Elements: Avoid using elements like filters, animations, and scripting, as these are not supported by SVG Tiny-PS.

Validate and Optimize the SVG File

After converting and simplifying your vector graphic, validate and optimize the SVG file:

  • SVG Validation: Use an SVG validator to ensure your file conforms to the SVG Tiny-PS specification. Online tools and plugins for vector graphic software can help with this validation.
  • File Optimization: Use tools like SVGO (SVG Optimizer) to clean up the SVG code, remove unnecessary metadata, and reduce file size. This ensures better performance on small devices.

Once your SVG file size is reduced and validated, re-upload it to your server or email platform. Test it to ensure the error no longer appears and that the logo displays correctly in BIMI-compatible email clients.

Convert the Raster Image to Vector Format

If image size isn’t your error you might have a bad vector graphic that is trying to use a raster image within the SVG. This also needs to be corrected before being considered valid. To achieve this you’ll need to convert your raster image (e.g., JPEG, PNG) into a vector format. This process, known as vectorization or tracing, can be done using software tools such as:

  • Adobe Illustrator: Use the “Image Trace” feature to convert the raster image to vector paths.
  • Inkscape: Use the “Trace Bitmap” tool to achieve a similar result.

Ensure that you’re saving the newly made file as a optimized SVG image to ensure the simplest code is being used to render the image, and that most of the unsupported elements are removed. For more information on the SVG tools available to support BIMI, review the BIMI Group’s SVG Documentation. Also, this video may help troubleshoot your issues with building a compliant SVG image.

Encountering an SVG size error when implementing BIMI can be frustrating, but with the right tools and strategies, you can quickly resolve this issue. By optimizing your SVG file to meet the size requirements, you ensure a smooth implementation of BIMI, enhancing your brand’s visibility and email authentication.