Inline SVG in ion-scroll


I want to display an inline svg in the content part with x-scroll, y-scroll and zoom.
The svg could be very large, so it should be possible to scroll in x and y.
I still got it not worked (x-scroll, y-scroll and zoom). Can anybody help.

  <ion-scroll zoom="true" scrollX="true" scrollY="true" style="height: 100%;">
      <svg viewBox="0 0 100 100">
        <rect height="20" width="20" y="0" x="0" fill="#809DB9"/>
        <rect height="20" width="20" y="50" x="50" fill="#809DB9"/>
        <rect height="90" width="60" y="80" x="90" fill="#809DB9"/>
  ion-scroll {
    white-space: nowrap;