Use SVG in signature

Occasional Visitor

Hi,

 

I was wondering if anyone ever tried to use inline svg structure into their signature. I use this om my apple mail and want to use it in outlook for Mac as well. The problem is I can nog make it work because I can not add HTML signature to outlook. 

 

I want to use this because I see a lot of FWD emails with attached images of all logo and icons. By using inline svg this problem is solved and everything will always stays in place. 

 

Does anyone know how I maybe can use this type. And not by adding a image and than select a svg file because than it still will be added as a separate fill and not encoded in the signature. I hope someone has a solution for this.

 

12 Replies

@rubenlourens 

 

Hi

 

So you should go to the following link: https://www.base64-image.de/ 

Then you should do the drag and drop as you see in the picture

2020-03-04 16_54_24-Base64 Image Encoder.png

 

Then copy the code of the picture

2020-03-04 16_55_41-Base64 Image Encoder.png

2020-03-04 16_58_27-Base64 Image Encoder.png

and paste it in the following string <img src="[[HERE]]" />

 

Create an html page and paste the following string  <img src="[[HERE]]" />

 

Open page with browser:

  • command + a --> select all
  • command + c --> copy
  • and command + v --> paste in signature

I hope I have been helpful

 

Thanks

 

 

 

@FabioO365GoD the question was how to use a SVG (vectorial) in signature, not how to use arbitrary JPEG data

@sdudnic to use an SVG you need to change the HTML of the signature

https://lazyadmin.nl/office-365/outlook-html-signature/

but you have to post the image otherwise, whoever receives your email does not have the possibility to see the image

 

I suggest you convert it to base64

https://codebeautify.org/svg-to-base64-converter

 

Thank u

@FabioO365GoD when converted to base 64, will it remain the scalable vector graphic? like same quality on zoom?

@sdudnic No, I'm sorry the image loses quality

If you want this not to happen publish the image and get the URL

 

'<img src="my-url-image.svg">'

I tried to edit the HTML file and put the SVG instead of the JPEG logo

<img width='139' height='39' src='default_files/logo.svg'

it didn't work, the default_files folder was deleted after that try

@sdudnic I have not encountered any problems

FabioO365GoD_0-1654848950515.png

 

FabioO365GoD_1-1654849038328.png

FabioO365GoD_2-1654849140646.png

 

 

I mean, I put the SVG in HTML, not just a link to a file.
the problem with the link to SVG, you should host it somewhere, the file, to be available to people outside your organisation, as well as that you should be online to view it. it will not download it...
Yeah, you can do this. Assuming you already have a sig designed, it's a very quick (about 1 minute) process to convert to SVG images. The trick is to create the sig in the Outlook message using the SVG images and size everything the way you want in the original message before copying and saving as a signature. Outlook will convert these to PNG files without telling you (presumably for better compatibility). Then you just go into the Signatures folder where all of these are saved and replace the PNG files with SVG. Here's a step by step to do this in 2022 (note that this comes from a response I wrote to a newer version of this same question at https://answers.microsoft.com/en-us/outlook_com/forum/all/add-a-vectorial-svg-picture-in-outlook-sig...:(

1. For any images you'll have in your signature, in the Outlook message where you're creating the signature, use the SVG images you will ultimately want to store. Outlook will convert them to PNG, but that's OK. Using them here ensures they display at the correct size later. To insert an SVG image into the signature, just go to the Insert tab in the Ribbon -> Pictures -> Pictures... Browse to your SVG image and insert it. Size and position it how you want. (advanced positioning tip (optional): using a table can be a good way to get vertical positioning to work better across diverse mail systems)

2. When you have the text and SVG image(s) set up how you like, copy the block to be saved as the signature. Be sure not to copy anything above or below what you want saved as the signature.

3. Hit the Signature button on the Message tab of the Ribbon bar (you may need to hit the three dots on the right to see it, depending on your window width and Ribbon configuration) and select Signatures...

4. Hit New and name your signature.

5. Paste the stuff you copied from your Outlook message in step #2 into the "Edit signature" block. Do NOT make any changes here and don't worry if it looks different from what you did. This display (as of this writing at least) is not reliable. Ignore it. Trust that your signature is actually stored to look like what you had originally copied.

6. Hit Save below the list of signatures. If you want this signature to be added automatically to some or all messages, specify your preferences in the drop-downs in the upper right.

7. Hit OK to close the window.

8. Confirm the signature is saved and available for use through the Signature button in the Ribbon. If you don't see it, then you missed something in the above steps (or I've missed something minor here). Repeat those steps carefully to set up the signature and confirm it works.

9. In Windows Explorer, go to %appdata%\Microsoft\Signatures

10. You will see 3 files and a subfolder for every Signature you have created. You may want to back these up if you're concerned about damaging them, or you can always just delete everything here and recreate any signatures by repeating steps 1-8 above. We're focused on the file <sig_name_as_saved_in_outlook>.HTM and the folder <sig_name_as_saved_in_outlook_files>.

11. Open the <sig_name_as_saved_in_outlook_files> folder and put your SVG file(s) here. If an SVG file has a complex name with spaces, rename it/them so there are no spaces in the file name (you can just replace them with underscores if you wish). Spaces in the filename will cause the changes made in step #13 to fail.

12. You will see image001.png (and image002.png, image003.png, etc. for every image you had put in your signature). Open it to confirm it's a PNG of the image in your SVG file. If there is only 1 PNG file, it will be. If you have multiple SVG and PNG files, be clear which is which so you know which PNG file came from which SVG file. Delete all the imagexxx.png file(s).

13. Using Notepad or Notepad++ (or any other text or HTML editor) open <sig_name_as_saved_in_outlook>.HTM. Do a global search and replace on image001.png to the name of your SVG file. If there is more than 1 image, do the same for image002.png to the matching SVG file, etc. for each image. Do NOT make any other changes to the HTML (unless you know HTML and know what you're doing, in which case, you can go ahead and edit to your heart's content -- this is the file that defines how your signature will appear).

14. Save and close the <sig_name_as_saved_in_outlook>.HTM file.

Note that the above steps assume that you want all PNG files replaced with SVG files. If you need some of each, then just don't delete the PNG files you want to keep and don't replace their name(s) in the HTM file.

That's it. You're done. Test this by going into Outlook, creating a message, and adding this signature. If you zoom in on the image to 500% (Outlook's max zoom), now you'll notice that the images are still absolutely sharp with no jagged edges or curves.

Just remember that some older mail programs may still choke on an SVG image in a sig, so you may want to keep a copy of the original sig to use with any recipients you learn have trouble with your SVG sig. However, given that I couldn't find any mail programs as of July 2022 that failed, I suspect this problem will fade away to effectively zero in the relatively near future.

Hello, @rubenlourens, I also understand the advantages of SVG format in signature, it supports animation, gradients, transparency, and scalable.

 

The first thing you should understand - you can only add an SVG signature in the web version or the Office 365 version of Outlook.

 

The second thing you should remember is that SVG signature file must be on an online image hosting site. Then you have to copy that file’s link and embed that link in the Outlook web’s HTML code with an image source tag. 

 

Here you can find the complete instructions on how to add an SVG signature in Outlook Emails. This thread should be also useful to you.

 

System issues and ransomware errors are common problems any administrator faces, so make sure to be prepared in advance and to have great backup options for your Outlook, Microsoft Teams, and Microsoft 365 environment.

Terry, that is incorrect about SVG requiring the web version. If you follow the steps I posted above (or a slightly better version at https://answers.microsoft.com/en-us/outlook_com/forum/all/add-a-vectorial-svg-picture-in-outlook-sig..., look for the long reply from GraniteStateColin with the 14 step list), it will work with the desktop version of Outlook. It does have some quirks, like if the SVG file is larger than a few dozen KB, Outlook wants to convert it to a UUencoded PNG file inside the sig HTM file, but you can forcibly override that.