width=auto and max-width

Hi there,

first, it is important to be aware of the difference between images and vectors (like svg). Vectors don’t necessarily have a width, height or aspect ratio at all! They are only a list of data that is basically some kind of blueprint for the final image. So in the end, svg file are no objects like png or jpg files.

Regarding your feature request:
This would be very tricky. One could give the svg an auto width, but the svg still would not know which height to display. You could then add the ratio information in the svg file itself, but this would only be a quickfix for your specific problem. The only “real” solution would be to constantly check the size of the container around the svg via Javascript and calculate the svg size dynamically. To be honest, I don’t want to blow up the plugin with such performance consuming functions.
Right now, I can’t imagine any other way that would work with vectors.

You can try the following: Add a usual png image and repleace the filename with the svg filename. Some browser might be able to read this. However, this only works with some svg files and not at every system. Another workaround would be to integrate the svg code directly into your theme and add special css classes to it (not sure if this would work).

My suggestion for you: If you really need the svg files to resize dynamically, you should change their width and height individually via JavaScript.
Finally, I think you are better off with iconfonts. They behave more like normale images or text and can be easily adjusted dynamically.

Hope this helps.

Best,
Jens

Jens, thank you for quick and detailed response.

I’m quite aware of svg basics, and do understand that it’s simple (not actually, but…) lines of commands to draw shapes, paths and fonts (not pixels). Additionally, I regularly use svg to create presentations with slides (and edit it in a text editor for custom behavior). And recently even managed to embed it into the html documents. If you curious, you can take a look on the example https://bit.ly/1FcNxNA.

It’s quite a fidget job to embed the svg presentation into the responsive html. I use the following approach (https://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php), and it takes creating and editing css styles for every single svg image in order to make it properly displayed in responsive html. So, when I saw your awesome plugin I thought “It could ease my life!” Alas, it doesn’t. The reason is the subject.

If your plugin could adjust a width on basis of height (and vice versa) or better, use max-width element as basis, it would be awesome solution. Then everybody (I mean full browser support) could embed images with a typographical text without worries regarding resize of rasterized image. That’s the reason I wrote the topic and still curious if it possible to develop the plugin with such options. I’m with you on resource consuming solution like js etc. It should be lean and fast. But fixed size of vector image makes it mostly kinky yet pointless solution. In most cases it would be done faster and simpler with png or jpg.

Anyway, thank you for the plugin and the support.