• GoDaddy Community
  • Managed WordPress Hosting
  • Managed WordPress Hosting

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 

    SVG File Appears Too Large on Site

    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?

    4 REPLIES 4

    Re: SVG File Appears Too Large on Site

    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.

    Re: SVG File Appears Too Large on Site

    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.

    Re: SVG File Appears Too Large on Site

    The Illustrator artboard has nothing to do with your final product. Here's the simplest solution:

    1. Export your SVG from Illustrator and open it in any HTML editor.
    2. Find the opening tag. It'll start with
      <svg
    3. Add height and width definitions
      <svg width="160" height="50">
    4. Save your file.

     

    Re: SVG File Appears Too Large on Site

    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.