Fix zoom scale problem for synoptic view

Description

• extract the zoom levels from the svg file and compare it with the current transform to get a proper zoom level - Fix the issue that zooming deeper would make the svg disappear.
• Set the zoom level to be only updated when a transform happens - fix the zoom level flickering issue
• Remove changing viewBox to avoid improper view size when switching between SVGs.

The fix can be tested by svg file

Motivation

Background on use case, changes needed

Fixes:

• Items added

Changes:

• changes made

Tests included/Docs Updated?

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)
• Docs updated?
• New packages used/requires npm install?
• Toggle added for new features?