Running SCADA on iPhone/iPad

To ensure SCADA mimic can be shown correctly on iPhone or iPad, you must first ensure the SVG graphic can be shown perfectly in Apple Safari, which is the browser used for iPhone/iPad. The screen shot below shown that some SVG gradient effects are not correctly rendered in Safari browser as compared to Firefox, Chrome and IE + ASV. Below described the issues caused the defect of SVG gradient display in Safari.

Safari could not render gradient effect correctly.

Gradient that Repeated with Reflected Effect

Firstly Safari doesn’t support ‘Repeat’ with ‘Reflected’ option. If this option is chosen, no reflection will be seen but only blank area will be shown. The workaround is to duplicate the targeted graphic object and flip it either vertically or horizontally.

Gradient Over Horizontal/Vertical Bezier Line’s Stroke

And then this is one of the funny problem for Safari, the gradient effect on stroke only works if the Bezier line is neither horizontal nor vertical.

Gradient over 2 points Bezier horizontal line will not work in Safari, it will show solid line instead.

To get rid of this problem, simply use filled rectangle instead. However, for any reason that you must use gradient over horizontal/vertical stroke, you may add one redundant node at the end making it like a L-shape line, but the redundant node must be placed within the width of the stroke so it will not affect the intended graphic look.

Workaround for Gradient on horizontal bezier line by using 3 Points L-shape stroke.