डेस्कटॉप और मोबाइल के बीच असंगत एसवीजी प्रतिपादन - एसवीजी में एरियल एक वेब-सुरक्षित फ़ॉन्ट है?

Question

मेरे पास एक एसवीजी है जो मुख्य रूप से टेक्स्ट है।

यह Windows 7 पर फ़ायरफ़ॉक्स 53 और क्रोम 58 में हूबहू (और सही ढंग से) प्रतिपादन है

यह Android 6.

पर Firefox मोबाइल 53 और क्रोम मोबाइल 58 में हूबहू (लेकिन गलत तरीके से) प्रदर्शित हो रहा है गलत प्रतिपादन रिक्ति से संबंधित है - दो गैर-पाठ तत्व गलत तरीके से स्थित हैं और एक गैर-पाठ तत्व यह होना चाहिए जितना होना चाहिए।

मेरा अनुमान है कि फॉन्ट अलग ढंग से प्रदर्शित हो रहा है है - लेकिन एंड्रॉयड 6 पर एरियल विंडोज 7 पर एरियल से अलग ढंग से प्रस्तुत करना चाहते हैं?

यहाँ मेरी एसवीजी है:

<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>

क्या मैं स्पष्ट रूप से मेरे एक्सएमएल में घोषित करने के लिए, क्रम में है कि एसवीजी डेस्कटॉप और मोबाइल के बीच समान रूप से प्रस्तुत करने की आवश्यकता है? धन्यवाद।

Answer 1

पाठ व्याख्या में पाठ को परिवर्तित करने के लिए बेहतर (यह केवल एसवीजी के लिए वास्तविक नहीं है, बल्कि किसी भी डिजाइन तत्व के लिए; कोरल/ए इलस्ट्रेटर से मूलभूत सिफारिश)।

अतिरिक्त फ़ॉन्ट आयात करने के लिए अतिरिक्त तरीका है (Google फ़ॉन्ट्स या woff2/eot/ttf/svg समूह में आंतरिक फ़ाइलों का उपयोग करके)। कृपया ध्यान दें, कि मौजूदा समाधान केवल <object> या इनलाइन svg (<img> के लिए व्यावहारिक नहीं) के लिए काम कर रहा है:

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

Answer 2

मैं नहीं कर रहा हूँ एंड्रॉयड के बारे में निश्चित है, लेकिन सबसे Linux distros पर बाहर एरियल उपलब्ध नहीं है बॉक्स के, यह वास्तव में एक ही फ़ॉन्ट परिवार का उपयोग करने के लिए वास्तव में बेहतर है और यदि आप प्रतिपादन के समान तरीके से निर्भर हैं, तो बस पाठ को पथ में @FieryCat के रूप में परिवर्तित करें (और एक वास्तविक परीक्षण के रूप में वास्तविक पाठ डालें)