Displaying .svg

Get Started
1

I’m trying to display a logo in .svg format in an html email (hence why my styling is inline below). The direct link to the logo works: http://www.wehi.edu.au/uploads/e-mail/WEHI_logo.svg and setting my img src to the local file on my computer also previews correctly in the browser, but when I set img src to the uploaded file, the browser preview shows a grey box! What have I done wrong? (Code below)

<img src="http://www.wehi.edu.au/uploads/e-mail/WEHI_logo.svg" alt="Walter and Eliza Hall Institute logo" title="institute logo" style="max-width:180px; max-height: 39px; padding-right:10px;">
2

The server may have disabled hotlinking (often via a .htaccess file). That’s just a guess, but it the only thing I can think of.

3

Thanks Ralph, I’ll try asking my IT team then. Good to know it might not just be my noob skills creating the issue!

4

Yes, there are lots of hidden tripwires to make you feel inadequate in this game. :slight_smile:

Let us know what they say, It would be interesting to know.

5

My IT team came back with this: http://www.w3schools.com/svg/svg_inhtml.asp

Unfortunately as I’m writing an HTML email (and therefore am restricted to HTML4) I can only use embed with the object tag (which brings in the logo too big - it doesn’t seem to recognise my dimension styles!) or link it with an <a href> tag, which doesn’t seem to work when I nest it inside a website link.

Looking further into the W3C link, it seems .svg isn’t supported for IE8 and earlier perhaps I should switch back to a conventional .jpg anyway, as I think Outlook would therefore have a compatability issue?

6

Just saw your reply! Lol to the tripwires, I think I’ve stumbled on every single one so far! My favourite one was when it took me about half an hour to work out why my colour styling wasn’t coming through…only to realise I was using Australian spelling for the property facepalm

7

Yes, HTML email is a pain, and forces you to use pretty old coding technques anyhow. There’s no point fighting with SVG when you don’t need to. Just go for JPG, GIF or a standard format like that.

Facepalm indeed. I web design, it pays to learn US spelling. :slight_smile: