maxWidth Option for SVG Element (Bodymovin SVG renderer)

[AlexandreKilian]

While embedding a lottie-file with the JS library, I encountered an Issue… There's only an option to disregard width and height of the SVG element or set it to 100%…

if(!this.renderConfig.viewBoxOnly) {
        this.svgElement.setAttribute('width',animData.w);
        this.svgElement.setAttribute('height',animData.h);
        this.svgElement.style.width = '100%';
        this.svgElement.style.height = '100%';
        this.svgElement.style.transform = 'translate3d(0,0,0)';
    }

here's the animation being applied

dodymovin.loadAnimation({
            container: $el,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: $($el).attr('data-animation'),
            renderConfig: {
                viewBoxOnly: true
            }
          })

$el being my Node for some reason, the option is disregared, but that's another issue… Why set the width and height to 100% by default? this could be acchieved with CSS from the outside… and if so, why not allow to set a maxWidth instead? For responsive purposes, this would allow using the animation at animation size and scale it down if the container doesn't allow it:

if(!this.renderConfig.viewBoxOnly) {
        this.svgElement.setAttribute('width',animData.w);
        this.svgElement.setAttribute('height',animData.h);
        this.svgElement.style.maxWidth = '100%';
        this.svgElement.style.maxHeight = '100%';
        this.svgElement.style.transform = 'translate3d(0,0,0)';
    }

[bodymovin]

Hi, if you add a property "className" to the renderConfig, the svg will add that class to it and you can set your own set of properties. I think that if you combine viewBoxOnly: true, className and viewBoxSize, you can get any responsive behavior you want. The reason why it sets the width and height to 100% by default, is because it seems the most intuitive way for elements to behave when containers don't match the animation size.