Support » Plugin: Add Full SVG Support » Control responsiveness

  • Resolved Essie

    (@de-webconnectie)


    Hi Jens,

    Thanks for making this plugin available. I’m trying it out on one of my clients website and have a question.

    The theme has a feature to minimize the logo after scrolling down the page. I think the quality of the image is better in SVG than in PNG, but the smooth effect of minimizing it had before is now gone. It now ‘flickers’ when minimizing.

    Do you know a solution? This is the url: http://www.hannylynch.nl/aanbod/

    Thanks in advance

    https://wordpress.org/plugins/add-full-svg-support/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jens

    (@jekuer)

    Hi there,

    I checked your site in different browsers. It worked pretty smoothly for me so far. Only some smaller hick-ups, but I am sure that 99% of your users won’t recognize this.

    As far as I can tell, the effect is based on the fact that the svg gets re-rendered by the browser on resizing – and that based on the steps the header gets resized by your script. A regular image simply gets stretched.
    Honestly, I do not have any other explanation right now. But I’m sure it is no bug of the plugin.
    In your place, I would keep it the way it is right now – that’s beautiful!

    Best,
    Jens

    Essie

    (@de-webconnectie)

    Hi Jens,

    Thanks for taking a look. I’ve discovered that it’s an IE thing… IE doesn’t render svg properly when the viewbox is set as an image. I’m trying to find a solution for it.

    Another question, because I’m new to working with svg I’m trying to wrap my head around it… In the description you mention width and height in the shortcode, are these the settings of the viewbox?

    However, if I set these attributes, the svg doesn’t scale at all. I’m I doing something wrong? see: http://www.dewebzandbak.nl/

    regards

    Hi, i figured out how to make an SVG responsive. Or at least this works in the Divi theme I’m using.

    I’m using Jen’s plugin which allows me to upload SVGs to the Media Library. However, I’m not using his shortcode when I want my SVG image to be responsive. Instead I use the <img> tag to insert the image in the HTML. The one drawback to this is that you can’t set up a backup image (png, jpg, etc). I also haven’t tested this in browsers other than the recent versions of firefox and chrome.

    So in the text editor add the following and it should work.
    ‘<img src=”URL for your SVG image” alt=”Image description.”>’

    Plugin Author Jens

    (@jekuer)

    Hi Pat,

    this should work as well. Thank you for your post.
    However, this won’t include a png fallback – but to be honest, since this is only a problem for IE (< V9), I would say “let’s ignore this”.

    Best,
    Jens

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Control responsiveness’ is closed to new replies.