Representación inconsistente de SVG entre escritorio y móvil – ¿es Arial una fuente segura en SVG?

Tengo un SVG que es predominante texto.

Se está haciendo idéntica (y correctamente) en Firefox 53 y Chrome 58 en Windows 7.

Se está reproduciendo de forma idéntica (pero incorrecta) en Firefox Mobile 53 y Chrome Mobile 58 en Android 6.

La representación incorrecta está relacionada con el espaciado – dos elementos no textuales se colocan incorrectamente y un elemento no textual es más ancho de lo que debería ser.

Mi conjetura es que la fuente está prestando diferentemente – pero Arial en androide 6 rinden diferentemente de Arial en Windows 7?

Aquí está mi SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 805 120"> <defs> <filter id="shadow" x="0" y="0"> <feOffset result="offOut" dx="2" dy="2" /> <feColorMatrix result="matrixOut" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <feGaussianBlur result="blurOut" stdDeviation="2" /> <feBlend in="SourceGraphic" mode="normal" /> </filter> <style type="text/css"><![CDATA[ svg { font-family: arial; font-size: 84px; font-weight: 900; text-transform: uppercase; } text, rect, path { fill: rgb(0, 75, 165); stroke: rgb(30, 40, 90); stroke-width: 1; } rect + text { fill: rgb(255, 255, 255); } a:nth-of-type(2) rect { stroke: none; fill: rgb(255, 255, 255); } path { transform: translate(414px, 12px); } ]]></style> </defs> <a xlink:href="http://handsoffhri.org/"><text x="0" y="70" filter="url(#shadow)">#Hands</text><rect x="396" y="0" width="200" height="80" /><text x="406" y="70">Off</text><text x="603" y="70" filter="url(#shadow)">HRI</text></a> <a xlink:href="http://handsoffnhs.org/"> <rect x="426" y="20" width="30" height="40" /> <path d="M 17.923077,46.076923 C 14.343392,42.497239 14.27418,40.818155 17.53034,36.54911 19.670795,33.742828 19.964561,32.558959 19.43687,28.865832 19.093774,26.464624 18.091959,22.925 17.210613,21 15.473393,17.205632 14.946739,8.8090066 16.395225,8 c 0.492374,-0.275 1.522812,1.75 2.289861,4.5 0.76705,2.75 1.785893,5.9 2.264097,7 0.478204,1.1 1.121144,2.7875 1.428755,3.75 0.388325,1.215052 1.601353,1.75 3.968232,1.75 1.874918,0 3.94672,0.647984 4.604006,1.439966 0.657286,0.791981 2.129739,1.579481 3.272118,1.75 3.300549,0.492661 6.095959,4.949339 4.942528,7.879795 C 38.638723,37.406393 37.617787,40.525 36.896075,43 c -1.470078,5.04141 -2.354638,5.96259 -5.746769,5.984687 -2.184572,0.01423 -2.312807,-0.285031 -1.814586,-4.234687 0.29486,-2.3375 0.828492,-5.625597 1.18585,-7.306882 0.910327,-4.282879 -1.674633,-6.518656 -4.539328,-3.926143 -2.445773,2.213395 -2.522575,5.352525 -0.231242,9.451617 1.687087,3.018122 1.680216,3.182812 -0.19113,4.581039 -2.817812,2.105407 -4.353952,1.809133 -7.635793,-1.472708 z M 5.9073963,33.25 2.6076082,29.5 5.0157824,29.152671 C 7.7278899,28.761505 11,32.019342 11,35.110784 11,37.937782 9.573836,37.416676 5.9073963,33.25 ZM 41.007272,27 c 0.549073,-1.375 1.491079,-3.7375 2.093346,-5.25 0.602268,-1.5125 1.726011,-2.75 2.497207,-2.75 2.311553,0 1.576924,2.264983 -2.108223,6.5 -2.678238,3.077864 -3.250499,3.423665 -2.48233,1.5 zm -8.000683,-3.75 c 0.0036,-0.9625 0.900659,-3.1 1.993411,-4.75 1.092752,-1.65 1.989787,-4.4074 1.993411,-6.127555 0.0073,-3.4695992 2.322706,-6.2880071 3.543292,-4.3130587 0.626634,1.0139159 -1.08136,7.8982867 -3.644702,14.6906137 -1.001533,2.653854 -3.894924,3.026194 -3.885412,0.5 zm -6.936221,-3.118517 c -0.55,-1.027684 -0.689818,-2.1787 -0.310706,-2.557811 0.379112,-0.379112 0.559103,-3.58828 0.39998,-7.131483 C 25.922072,5.152178 26.148965,4 27.42827,4 c 1.304453,0 1.537588,1.4643706 1.432844,9 -0.123753,8.903267 -0.849702,10.758358 -2.790746,7.131483 z" id="path3690" /> </a> </svg>

¿Qué necesito declarar explícitamente en mi XML, para que el SVG se muestre de forma idéntica entre el escritorio y el móvil? Gracias.

Mejor convertir el texto a la interpretación de la ruta (es real no sólo para SVG, sino para cualquier elemento de diseño, una recomendación básica de Corel / A.Illustrator).

Una forma adicional es importar las fuentes necesarias (usando fuentes de Google o archivos internos en el grupo woff / woff2 / eot / ttf / svg). Tenga en cuenta que la solución actual sólo funciona para <object> o inline-svg (no es posible para <img> ):

 <defs> <style type="text/css"> @font-face { font-family: Arial; src: url('font_path/arial-like-font.woff'); } </style> </defs>

No estoy seguro acerca de Android, pero en la mayoría de distribuciones de Linux no es Arial disponible fuera de la caja, es realmente mucho mejor sólo para utilizar la misma familia de fuentes y si usted es dependiente de la misma forma de representación, sólo convierta el texto A path como @FieryCat sugirió (e inserta el texto real como una prueba de alt)