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
Thread Starter
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.”>’
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
