Alter dynamically-generated SVG to make it responsive?

Question

I'm trying to use an SVG library like Two.js or SVG.js and alter (on-the-fly) their dynamically generated SVG elements in order to make them responsive. I have a basic example here, showing how a predefined, inline SVG can be responsive.

It involves wrapping the SVG element in a container, assigning some CSS values, adding viewBox and preserveAspectRatio attributes. This appears to be the common way to do responsive SVG elements:

http://jsfiddle.net/N4PK4/

<div class='container'>
    <div class='svg-container'>
        <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
            <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="1" />
        </svg>
    </div>
</div>

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    outline: 1px solid red;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.container {
    max-width: 400px;
}

However, when I dynamically generate an SVG element with Two.js, and then I try to use jQuery to edit the DOM and make the SVG element responsive (similar to the above example), the SVG element is no longer visible:

http://jsfiddle.net/g5WZj/5/

You can see that I have two SVGs in that example. The first one is the one that doesn't show up. The second, is the inline, static SVG markup that I copied from what was generated in the first example. So obviously, it is not the markup that is the problem.

Also, here is a similar example using svg.js. Same result:

http://jsfiddle.net/3Luaw/5/

So basically, the problem lies in the fact that if you create a static SVG element in your HTML, then it's easy to make it responsive. But if you try to dynamically create an SVG element, its difficult (or impossible I dunno?) to make it responsive.

I know that the SVG DOM is kind of different than the normal HTML DOM, so there can be unexpected results when trying to make changes to it dynamically.

How do I overcome this hurdle?

Answer 1

Sure, the SVG DOM is kind of different than the normal HTML DOM. So you'd better to use special-purpose svg lib to handle that. Use SVG.js or two.js to modify SVG node, not jQuery.

If you want to your app will be compatible with old bjust start your work, you can try Raphealjs too.

Answer 2

In your example http://jsfiddle.net/g5WZj/5/ the reason why your "dynamic" svg doesn't show up is because you haven't set a size on it. If you rightclick the svg part and inspect the svg element you'll find that its computed layout size in the page is 0x0.

You can set the width and height attributes on the <svg> element, or you can add something similar to your css stylesheet, eg svg { width: 500px; height 500px; } svg { width: 500px; height 500px; }