ElliotHM Posted October 18, 2018 Share Posted October 18, 2018 (edited) 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 Cyboman and Silnei L Andrade 1 1 Link to comment Share on other sites More sharing options...
Xenboy Posted October 21, 2018 Share Posted October 21, 2018 It was just confirmed as part of v4.4. Link to comment Share on other sites More sharing options...
ElliotHM Posted October 22, 2018 Author Share Posted October 22, 2018 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. Link to comment Share on other sites More sharing options...
bfarber Posted October 22, 2018 Share Posted October 22, 2018 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. AndyF and ElliotHM 2 Link to comment Share on other sites More sharing options...
Silnei L Andrade Posted October 22, 2018 Share Posted October 22, 2018 (edited) @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 Link to comment Share on other sites More sharing options...
Joy Rex Posted October 22, 2018 Share Posted October 22, 2018 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. Silnei L Andrade 1 Link to comment Share on other sites More sharing options...
bfarber Posted October 23, 2018 Share Posted October 23, 2018 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: The easy route is to just upload a logo image using the built in uploader 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 Silnei L Andrade, IPCommerceFan, Alexander Lee and 2 others 4 1 Link to comment Share on other sites More sharing options...
Eudemon Posted April 21, 2021 Share Posted April 21, 2021 SVG / WebP as one of the features, you can see it live at https://turboduck.net/ and inspect the logo Joy Rex 1 Link to comment Share on other sites More sharing options...
SeNioR- Posted April 21, 2021 Share Posted April 21, 2021 (edited) Ping: SVG for logos and icons and WebP for images. Edited April 21, 2021 by SeNioR- Grafidea 1 Link to comment Share on other sites More sharing options...
Recommended Posts