SVG is not loading properly in Mobile Safari

SVG is not loading properly in Mobile Safari

I was able to get fonts to load in Android but when it came to iOs the
.svg file seems to not load properly.
In iOs, it seems that it is still using the default Apple font for
converting "Shruti" (Gujarati font). This conversion causes issues in font
rendering. Thats why I was resorting to supply the "Shruti" font by using
svg. However its not loading properly.
Here is the definition I am using :
@font-face {
font-family: "Shruti";
src: url('http://www.bhajansangrah.com/shruti.eot?') format('eot'),
url('http://www.bhajansangrah.com/shruti.woff') format('woff'),
url('http://www.bhajansangrah.com/shruti.ttf') format('truetype'),
url('http://www.bhajansangrah.com/shruti.svg#Shruti') format('svg');
} div { font-family: "Shruti", Verdana, Tahoma; }
Here is an example site: http://www.bhajansangrah.com/index.php?title=96
So for example, in line 1 we see that the text should be
"બાદશાહી
ગૌરવ બિરાજે,
ત્રાતાના
લલાટે,"
which appears fine on all browsers, including Android, except for Mobile
Safari (my guess is that its not loading the svg file properly)
In iOs (Mobile safari) it shows up as, incorrectly :