Tuesday Tip: You can open and edit a BIMI SVG file
URL Copied
It's time for the first installment of a new series: Spam Resource Tuesday Tips. And today, I've got BIMI logos on my mind. A BIMI logo, meant to show up in email clients next to a sender's email message, is graphically stored as a certain type of SVG graphic file. Both Google and the BIMI Group website guide you through how to create, export or convert a BIMI logo.
Here's the tip: That SVG file is just a text file. You can open it and edit it in your favorite text editor. Here's what I see when I open my current BIMI logo SVG file in a text editor:
It's close to human readable, depending on what your geek skill level and/or fear factor is. And if your logo is very simple, like mine is, then it could be pretty easy to parse. The real guts of mine don't even start until after the title tag, about halfway through. It's just a white rectangle with a red stop sign on top of it: A "rect" command followed by a "polygon" command, with specified positioning and colors.
Would you ever create an SVG logo from scratch in a text editor? Yah, no. But I have had issues with SVG logos where it was easiest to just correct it by editing the SVG instructions directly. In my example here, you can see what color red I chose for the stop sign, and the polygon points for the stop sign. I could edit any of those, or add to it if I wanted to.
In a prior version of my logo, exporting from Illustrator left a ghost shape floating over part of the stop sign. I was able, through trial and error, to delete the unwanted shape in a text editor.
After updating the SVG file and saving it, just drag it to your web browser to display the updated graphic.
Bonus tip: A common mistake people make when trying to create a BIMI logo on their own is that they take a bitmapped logo from Photoshop or Pixelmator, and they open it, then save it as an SVG file and assume they're done. Technically, this is indeed an SVG file, but it does not follow the BIMI logo spec. BIMI logo SVG files cannot contain bitmapped graphics. They must be 100% vector (shapes/lines/etc) graphics. Converting a bitmap image to SVG generally just creates an SVG shell in which the bitmap data is embedded. It looks like it works when you open it in a web browser or image editor, but it won't work for your BIMI logo.
It's time for the first installment of a new series: Spam Resource Tuesday Tips. And today, I've got BIMI logos on my mind. A BIMI logo, meant to show up in email clients next to a sender's email message, is graphically stored as a certain type of SVG graphic file. Both Google and the BIMI Group website guide you through how to create, export or convert a BIMI logo.
Here's the tip: That SVG file is just a text file. You can open it and edit it in your favorite text editor. Here's what I see when I open my current BIMI logo SVG file in a text editor:
<?xml version="1.0" encoding="utf-8" standalone="yes"?><!-- Generator: Adobe Illustrator 24.3.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny-ps" viewBox="0 0 288 288" xml:space="preserve"><title>srbimi-tiny.svg</title><rect x="-0.2" y="-0.2" fill="#FFFFFF" width="288" height="288"></rect><polygon fill="#CC2E28" points="198.2,13.5 90,13.5 13.5,90 13.5,198.2 90,274.7 198.2,274.7 274.7,198.2 274.7,90 "></polygon></svg>
It's close to human readable, depending on what your geek skill level and/or fear factor is. And if your logo is very simple, like mine is, then it could be pretty easy to parse. The real guts of mine don't even start until after the title tag, about halfway through. It's just a white rectangle with a red stop sign on top of it: A "rect" command followed by a "polygon" command, with specified positioning and colors.
Would you ever create an SVG logo from scratch in a text editor? Yah, no. But I have had issues with SVG logos where it was easiest to just correct it by editing the SVG instructions directly. In my example here, you can see what color red I chose for the stop sign, and the polygon points for the stop sign. I could edit any of those, or add to it if I wanted to.
In a prior version of my logo, exporting from Illustrator left a ghost shape floating over part of the stop sign. I was able, through trial and error, to delete the unwanted shape in a text editor.
After updating the SVG file and saving it, just drag it to your web browser to display the updated graphic.
Bonus tip: A common mistake people make when trying to create a BIMI logo on their own is that they take a bitmapped logo from Photoshop or Pixelmator, and they open it, then save it as an SVG file and assume they're done. Technically, this is indeed an SVG file, but it does not follow the BIMI logo spec. BIMI logo SVG files cannot contain bitmapped graphics. They must be 100% vector (shapes/lines/etc) graphics. Converting a bitmap image to SVG generally just creates an SVG shell in which the bitmap data is embedded. It looks like it works when you open it in a web browser or image editor, but it won't work for your BIMI logo.
Comments
Post a Comment
Comments policy: Al is always right. Kidding, mostly. Be polite, please and thank you.