Responsive SVGs

Beaver Builder
1

I’m trying to use SVGs inline in text boxes as topic markers.

With the SVG Support plugin installed, I import SVGs rendered to approximately 30px height and 30px width to the Media Library. Then I place them as media objects in the text module.

This works at the level of desktop display.

But on mobile, the SVGs are not responsive. They seize the entire width of the display. I’m aware of the issue of viewBox size and went through the painful process (as a rank beginner at coding) of trying to create 3 different sized SVG symbols and uses. I then assigned them by pixel breakpoints. Do do so, I emulated the process explained here: https://webdesign.tutsplus.com/tutorials/how-to-create-responsive-svg-images--cms-32140.

It took hours. Now the SVGs are too small and appear in a container that spans 5 or 6 lines of text. I can continue to slog along on this process. I’ll probably get it right eventually, but it’s burning way too much time.

(In another use case, I stuffed the SVGs into their own column. While the SVGs took the entire column width, they could be resized by resizing the column.)

Is there’s anything BB can do to make SVGs responsive or at least make resizing easier?

2

Hi,

There is nothing in Beaver Builder that will allow you to make SVG’s responsive as WordPress itself doesn’t support SVG’s. If you want to make them responsive you would need to use custom CSS. The article below should help.

3

Hi Danny,

That’s the very article I referenced.

I adapted the CSS and HTML in the section, “Making SVGs adaptive Using CSS Media Queries.” I’m no coder, but I tried to get every letter and semi-colon correct.

Yet the result doesn’t work.

On a support ticket, Carlos reports that test SVGs appear properly on an iPhone, but too big on an Android phone. We’ll see what comes of that too.