AnsweredAssumed Answered

SVG center aligned in web viewer.

Question asked by vudoscript on Dec 5, 2018
Latest reply on Dec 6, 2018 by user19752

Hi everyone.

I have no html/css/js knowledge, so the task in hand is painfull to say the list.


1. I have an svg ( for simplicity a rectangle 100px wide x 200px height)


2. I copy the inline svg in the fm text field

3. I can parse the text in any way I want and edit/add viewbox, change viewport size units, etc


4. I am trying to display the svg in the web viewer 50pt x 100pt


This is where my problems begin:

A. Since win, mac, ios use different browsers and have different resolutions, the web viewer displays all 3 different.

B. Even if i edit my svg's viewbox based on operating system, i still cant find a mathematical way to calculate the ratio between get web viewer's with multiply it by some scale factor etc..

C. My fear is not knowing how will this be behaving on ipads which I can put my hands on now, such as giant Ipads and older non retina ipads.



I want/need a piece of html/css code to work in web viewer to grab a svg and center it and fit to max size inside the viewer. No padding, no side allignment, just grab the viewer and center align the svg withn it.

Hopefully something simple which would be supported on all browsers/devices.

Afterall svg is scalable so i would like to have such a viewer, reshape it on the layout's available realestate, and display the best (biggest) size svg possible.


The reason of using svgs this way is I want to parse and combine several svgs into one viewer based on user data entry. Fm's gylphs are frozen in time when inserted, and I need a dynamic content.


Thank you all for your help!