I tried .gif and .png files for my logo but they are too fuzzy and wanted to try an .svg file so I installed the SVG Support plugin so I could upload an .svg file to the media library. I am using a GoDaddy WordPress theme (Mins) with Beaver Builder. I have decent experience working with existing WordPress sites but this is my first site from scratch and I am new to Beaver Builder and am no where near what I would call a developer to give background on my capabilities. I sized the .svg at exactly 160x50 pixels and yet it resizes to some huge dimensions when plugged into the site identity customization section for the logo area, taking over most of the site width. Plus, when I take a look at the edit functionality in the library, the message, "Image data does not exist. Please re-upload the image." appears (the image is in the library though). That makes me nervous, like the image isn't sticking completely, as though the plugin isn't compatible with WordPress on GoDaddy (and is it a GoDaddy issue potentially or would I see this on any version of WordPress?). I did try to see if I could find out what was happening with the sizing through google searches, and it could be that I need to go into the code directly and make modifications, but if you are using the theme the way I am with Beaver Builder, the code is not readily accessible, and this goes beyond my skill-set as it stands now anyway. Any thoughts? Or am I stuck with a nasty fuzzy .gif or .png logo?
It sounds like your svg isn't being sized. You can control this by sizing the container it lives in, or by defining the viewBox in the svg. This write-up on css-tricks should cover everything you need to know.
You also shouldn't be getting a fuzzy .png at 160x50px unless you're starting with a low-quality image in the first place.
Thank you for the suggestion – I appreciate the link. I don't have access to alter the CSS like this though in the environment I am currently working in however. It's as I feared – that I can't work with an .svg file without altering code. The .svg file I saved is exactly 160x50 in the Illustrator artboard but I guess that's not enough. And regarding the .png file – and the .gif file – that I tried, they are perfect when I start. I begin with a vector file, sizing to exactly what I need in Illustrator and then create from there. They look crisp in Photoshop, but when they go into the website, they are blurry. It's something I have struggled with for quite I while, but was really hoping to find a solution this time.
The Illustrator artboard has nothing to do with your final product. Here's the simplest solution:
<svg width="160" height="50">
Thank you for this workaround. It did help for one version of my file. Although oddly, it appeared differently in Chrome vs. Safari (much smaller in Safari). When I tried to play with different sizes of the file in Illustrator to see if I could get a happy medium in different browsers, I get the error message after editing the HTML, "The SVG is Invalid. Validate it before opening." (And yes, I always start with the original Illustrator file to create a new .svg each time.) It's weird that your suggestion worked only one time for me – I'll have to try again later but I also found with some experimenting that unchecking the "Responsive" box (to keep it from being resizable by CSS in web pages) when saving the .svg file from Illustrator seem to work. At least for now I have a crisp, if kind of small, logo in place.