How to scale the rendered SVG relative to parent elements dimensions ?

[sparkeplug]

How to scale the rendered music staff SVG relative to parent elements dimension ?

I want to render a bigger image of the music staff.

[AaronDavidNewman]

Do you mean scaling (more notes fit in the same measure) or zooming (changing the size of the music, notes and staff proportionally). Either way you can get it by changing the svg view box. If you want to fit more music in the same space, you need to do this pre-rendering and set scale to something < 1.0. If you just want to zoom, keep 'scaling' value = 1.0 and change zoom value.

 
   // assuming your application set up width/height and svg parent element is #boo
    const renderer = new VF.Renderer('boo', VF.Renderer.Backends.SVG);
    const context = renderer.getContext();
    const svg = context.svg;
    const xOffset = 0;
    const yOffset = 0; 
    const zoom = 2.0;
    const scale = 1.0;
    svg.setAttributeNS('', 'width', '' + width * zoom);
    svg.setAttributeNS('', 'height', '' + height * zoom);
    svg.setAttributeNS('', 'viewBox', '' + xOffset + ' ' + yOffset + ' ' + Math.round((width * zoom) / scale) + ' ' +
      Math.round((height * zoom)  / scale));

[sparkeplug]

I want to set relative dimensions for the SVG and pixel values in viewbox. With the above code, looks like I can configure those values using setAttributeNS. I'll try this and update the thread. Basically I want the Rendered SVG to be responsive to the available space.

[sparkeplug]

@AaronDavidNewman Which version of VexFlow is used in the above code snippet ? I could not find context.svg and setAttributeNS in the API documentation.

[AaronDavidNewman]

setAttributeNS is a native SVG DOM call. It is not part of Vex (I assume you're running in a browser and not nodejs).

Here is a demo. I had the zoom value backwards - smaller zoom = larger output. Same with scale, you can play around with those.

https://jsfiddle.net/AaronDavidNewman/bsgc07pj/

[sparkeplug]

@AaronDavidNewman The solution works. However i got confused with the unavailable typescript type for context.svg. Added a screenshot for your reference.

[AaronDavidNewman]

That's the 'type' in 'typescript'. You need to cast the context, like:

(context as SVGContext).svg; // or (context as any)

[sparkeplug]

But implicitly getContext() return is of type RenderContext.

Isn't this a discrepancy ? Or is it a workaround for time being ? Just curious...!

[AaronDavidNewman]

I see what you're asking now. You asked specifically about svg, so you don't need renderer or a generic RenderContext at all. Just create the SVGContext directly: https://jsfiddle.net/AaronDavidNewman/7cgrkfw8/. Renderer and RenderContext is used by our test cases because we run the same tests on SVG and canvas, so they need to be engine-agnostic. But you don't need it if you know you're using svg.

Alternately, context.svg is just a DOM element, so you can get it by document.getElementById. You don't need to go through the context at all. Adjusting the svg viewport isn't part of Vex.