Official SVG header/logo support

[ElliotHM]

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 October 18, 2018 by ElliotHM

[Xenboy]

It was just confirmed as part of v4.4.

 

[ElliotHM]

On 10/21/2018 at 2:21 AM, Xenboy said:

It was just confirmed as part of v4.4.

 

Very limited in its explanation though and only really mentions apple systems.

Looking for genuine support for animated / coloured SVGs on all systems.

 

[bfarber]

Just to be clear, the SVG mention in the blog entry relates specifically to the Safari Mask Icon, not the theme header/logo.

A custom theme can add custom theme options, including the ability to upload an SVG logo.

[Silnei L Andrade]

@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?

Edited October 22, 2018 by Silnei L Andrade

[Joy Rex]

For a HiDPI or "retina" display logo, you need to make the logo at 2x pixels so on those devices it will display sharper.

Googling "how to make retina-ready images" should provide some tutorials.

[bfarber]

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

[Eudemon]

  

SVG / WebP as one of the features, you can see it live at https://turboduck.net/ and inspect the logo

 

[SeNioR-]

Ping: SVG for logos and icons and WebP for images.

Edited April 21, 2021 by SeNioR-