SVG artwork not responsive on mobile browsers

Design help General
1

Hi WF experts,

I’m working on this site (Here is my RO link) and I need the logo to be responsive.

I’m using an html embed to render the SVG logo because I want to add hover states to it.

It’s resizing fine in the designer / preview. But when testing in chrome & safari browser on my phone the logo doesn’t change size.

I set svg width=“currentWidth” in the code which allows me to control the width of the svg at each break point.

I know I’m doing something wrong, I just cant figure it out.

Thank you for your help in advance!

2

@gorinp great question! I’m seeing that your SVG embed logo in the navigation is resizing responsively on this end. Is there a different SVG which you’re referring to by chance?

Can you send a screenshot and let me know which browser/device you’re seeing that behavior in, please?

Shared with CloudApp

3

Thanks for the quick reply Waldo.

I tested on my iPhone 11 in Chrome and Safari:

IMG_26B023326318-1
IMG_26B023326318-11125×2436 434 KB

1 Like
4

Ahhh, gotcha! Thank you so much!

Creating that effect with custom code can be tricky for sure. I can’t tell you home many times I’ve struggled with custom SVGs with regards to responsiveness and browser compatibility when using custom code.

My personal recommendation would be to upload the SVG in the green color as an image and then use filters along with a transition style to account for that hover state. This way the image will be responsive and you won’t have to use any custom code (it would require uploading a new logo or adding Hue Rotate filter if you’re planning to change the colors though).

This would be the static state where you’ll add:

  • The width styles for each break point for the logo
  • A transition on the filter of your choice
  • Filter of: Invert at 100%
  • Filter of: Saturate at 0%

This will set the logo to be black and ensure a transition for the hover state.

Shared with CloudApp

Then on the hover state, update your effects to the following:

  • Filter of: Invert of 0%
  • Filter of: Saturation at 100%

Shared with CloudApp

Another route if you decide to stick with the custom code could be to use a padding style solution which is detailed here to make the SVG responsive.

I hope that this helps! :smile:

2 Likes
5

Hey Waldo,

Thank you for the detailed work around. I knew the backup plan was the jpeg saturation method from the start, but I wanted to avoid using jpegs in favour of vectors which are much sharper on all screens.

But I didnt know about the padding method; very clever. I will give it a shot. Thank you!