How to put a vector (AI, EPS, SVG or ) as a logo?

I somehow think the logo is depending on the display type not that sharp, crisp or clear. Would it be possible to have a vector image like svg,ai or eps file as a logo? How could this be done?

Hi Mrtn,

I'm back from a long break to overcome fatigue and past stress issues.

My understanding is that Vector files need special programs to read them and they can't be used as a general photo. I could be wrong.

The logos I use on my sites are exceptionally good, so I'm wondering if your problem is in how they're applied.

I use IrfanView, a free photo program without all the bells and whistles. Here's what I do:

1. I resize the logo to exactly the size I plan to use. In my case, around 600 x 180 px.

2. I save the logo as a JPG because Dolphin converts other files to JPG as far as I'm aware.

3. I save the file at 80% compression because this is acceptable to me and it makes the file size very small.

4. Upload it in the normal way.

Note: You can use Irfanview to sharpen the image and that may help.

I hope that helps a little.

topic bump

As we can have vector icons in the menu bar and everywhere else. How can one have this functionality in the logo section. 

The menu, ect uses Font Awesome fonts. They are scalable vector fonts which is not quite the same as vector graphics. And not used the same way.

Of the 3 formats you mentioned, web browsers only support SVG images. You cannot use a AI or EPS file on a webpage because the browser will not display it. Although SVG is supported by most browsers, there are still issues with some. Here is a list of browsers that support SVG https://caniuse.com/#feat=svg

Being that even Edge does not properly scale them yet would be a reason not to use them yet.

So, in dolphin you would need to manually modify the template to put the image tag in directly rather then through the admin panel.

It depends on your template, but in most cases you would need to edit _sub_header.html and look for __main_logo__ and replace it with a html image tag like this for example.

<img style="width: 294px; height: auto; max-width: 738px;" src="https://yoursite.com/media/images/yourlogo.svg">

You can also use a PNG in this method using CSS to scale it down to proper size. The key to using PNG images is to make sure you start with a image that is larger than what you will ever need. This is because scaling up a png image to a size larger than it's original distorts it and makes it fuzzy. But they can be scaled down without problems.