CODEWITHSUNDEEP
androidgoogle-chromefirefoxsvgtext
Rounin
Rounin

Reputation: 29453

Inconsistent SVG rendering between desktop and mobile - is Arial a web-safe font in SVG?

I have an SVG which is predominantly text.

It is rendering identically (and correctly) in Firefox 53 and Chrome 58 on Windows 7.

It is rendering identically (but incorrectly) in Firefox Mobile 53 and Chrome Mobile 58 on Android 6.

The incorrect rendering is related to spacing - two non-text elements are incorrectly positioned and one non-text element is wider than it ought to be.

My guess is that the font is rendering differently - but would Arial on Android 6 render differently from Arial on Windows 7?

Here is my 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 Z M 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 z m -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 z m -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>

What do I need to explicitly declare in my XML, in order that the SVG renders identically between desktop and mobile? Thanks.

Upvotes: 11

Views: 2516

Answers (3)

Sambulo Senda
Sambulo Senda

Reputation: 1418

Yes, custom fonts are an issue with SVGs. If the font is not included in your css, then it will not transfer to mobile. even then, mobile may change it.

Solution: Convert your fonts to Outlines before exporting.

Use Adobe Illustrator to create your SVGs. Before exporting / saving, use the Type -> Create Outlines to convert your fonts to paths. That will help in retaining your SVGs.

Upvotes: 1

MacHala
MacHala

Reputation: 2429

I'm not sure about Android, but on most Linux distros isn't Arial available out of the box, it's really far better just to use the same font family and if you are dependent on the same way of rendering, just convert the text to path as @FieryCat suggested (and insert the real text as an alt test)

Upvotes: 1

FieryCat
FieryCat

Reputation: 1885

Better to convert text to path interpretation (it's actual not only for SVG, but for any design element; a basic recommendation from Corel/A.Illustrator).

Additional way is to import required fonts (by using Google Fonts or internal files in woff/woff2/eot/ttf/svg group). Please, note, that the current solution is working only for <object> or inline-svg (not workable for <img>):

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

Upvotes: 4

Related Questions