Jump to content

Official SVG header/logo support


Recommended Posts

SVG files require alot of work and brute forcing to get the desired affect compared to a png file.

Why use an SVG file?

  • Infinite scaling +/-.
  • Can be animated with semi transparency and maintain its quality unlike gifs.

I've read a few posts that gently comment on it being "in the pipeline" however nothing confirmed.


Edited by ElliotHM
Link to comment
Share on other sites

16 hours ago, Silnei L Andrade said:

@bfarber which is the official suggestion to have a logo with good resolution for mobile? Where do I find information to do this in a custom theme?

Well, you have options depending upon your comfort level.

The simplest solution for most of our clients is to create a PNG image twice the size of your logo (as @Joy Rex just alluded to) and upload that as your logo in the theme. You may or may not need to tinker with some size settings or CSS to ensure the logo displays at the height you want.

If you're comfortable with CSS and HTML (and our theme manager), you could upload separate regular and 2x sized images using the Manage Theme Resources tool, and then manually reference them in the template correctly (using srcset and sizes attributes).

Or if you understand SVGs well enough, you could upload those and reference those in the template as well, just the same.

Basically you have two routes:

  1. The easy route is to just upload a logo image using the built in uploader
  2. The longer route that gives you more control is to manually upload your files to the manage resources page, and then adjust the logo template accordingly
Link to comment
Share on other sites

  • 2 years later...
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...