I have a simple cutout rectangle with text in the middle.
<svg> <defs> <mask id="mytext"> <rect width='100%' height='100%' fill='white'/> <text>Welcome</text> </mask> </defs> <rect width='100%' height='100%' fill='blue' mask="url(#mytext)"/> </svg>
However, when viewed from the screen of the retina, the edges of the text become jagged. This will not happen if I use only text without masking it, but as soon as the mask is used, it breaks everything.
EDIT: By Retina Display I mean, iOS and OSX are both versions. All browsers. I believe this may be a pixel density problem.
Interesting that
<text fill='url(#mypattern)'>Welcome</text>
The text becomes flawless. The only problem is the use of masks.
Here is a jsfiddle example (please make sure you check on your device that supports retina display).
And here is a screenshot showing the difference on the iPhone (note that the edges of the text are lower and how they look uneven).
source share