SVG Not Scaling with Shrinking Header

[simeoned]

I was trying to configure a sticky bar which had a 0.75 shrink amount applied and a the logo was set to “scaling”. Originally, I was using a PNG for this but wanted to move to an SVG logo because the shrunk version looks blurry when I do this a lot of the time.

Once I did, the shrinking logo stopped working. It just stays the same size even thought the header still shrinks as expected. Can anything be done about this?

I reworked the design so that the header no longer shrinks and reset the logo back to standard. So, I don’t have a live example of this currently to show. I’m hoping my explanation is sufficient to get a resolution to this though. Can you help please?

Thanks

[prakash_s]

Hello @simeoned,

Thanks for writing to us.

In order to help you with your concern, we need to check your settings, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[simeoned]

Secure note added

[marc_a]

Hi @simeoned,

We cannot access your wp-admin because it is asking for popup information, would you mind sharing the credential in the secure note so that we can check your settings?

Thank you.

[simeoned]

Sorry, forgot about that. Secure note sent. Thanks.

[ruenel]

Hello @simeoned,

The issue here are SVG’s without height and width which then result to 0 size (responsive is based on multiplication and division, and 0 will always result to 0 . And there are SVG’s that has dimensions, depending on which editor your SVG file is created, and they works fine with flex layout. I recommend checking this https://medium.com/@ayumitabinote/how-to-resize-a-svg-image-7829bac8948c, you can add bigger dimensions, it will then scale properly within the layout. This means your SVG will be responsive to any layout since it has values, example, 50% of 800px is 400px compared to 50% of 0px is 0px .

Thanks!

[simeoned]

@ ruenel the SVG does have dimensions though:

and you can see them in the SVG when viewed as text as well:

250px x 67px – which is exactly what I want. But the scaling does not work. Please advise.

[friech]

Hi Dan,

The image won’t be responsive if it has a fixed dimension. You need to set the SVG height="100%" and width="auto" so it will adapt to the Bar.

You can not do this with the Image element, so you need your entire SVG code inside a RAW Content Element. With the width="auto" and height="100%" property.

Hope it helps,
Cheers!

[simeoned]

@friech, yes, that is very helpful thank you. It is, however, almost exactly the opposite thing @ruenel told me. Why would there be such a difference in the approach between you two? In other words, is there something about what @ruenel was getting at that could still be useful for this discussion? Or was that all just inapplicable?

Thanks

[tristup]

Hi Dan,

My colleague Friech is correct here, the image won’t be responsive if it has a fixed dimension. I would also suggest you follow the way explained by him.

Thanks

[simeoned]

Yes, thank you. I have done that and it does work now.

[simeoned]

@friech, any ideas as to why when I wrap the SVG in a an anchor that the scaling breaks again?

Heres what I tried:

<?xml version="1.0" encoding="UTF-8"?><a href="https://ppp.11massmedia.net/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="auto" height="100%" viewBox="0 0 250 67" version="1.1"><title>Performance Plus Programming</title> {...} </svg></a>

This breaks the scaling again… no good. I also tried adding a row inside the bar’s container and making the column an anchor but, same result. Thanks for your help.

[friech]

Hi Dan,

In that case, place a Div element inside the container first. Use this Div element as your link, you can set the tag to anchor <a>, also set this Div height to 100%. This place your RAW Content element (containing SVG) inside this Div element.

Remove the anchor code from your SVG.

Hope it helps,
Cheers!

[simeoned]

@friech

I previously stated:

@simeoned

I also tried adding a row inside the bar’s container and making the column an anchor but, same result.

This is no different than using the Div element as you suggested. Obviously it generates less markup to use the Div but the result is the same. Please log back in if you need to and have a look at the header. I need to solve this issue.

Thanks

[christian]

Hey @simeoned,

Friech mentioned:

@friech

also set this Div height to 100% .

That will make the Div follow the height of the shrunk bar. I see that’s not done yet.

[simeoned]

Ah! Right you are. I think this is fully resolved now. Thanks!

[marc_a]

Hi @simeoned,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.