LinkedIn
Twitter
Hi, I've been learning how to use svg to add a little more color to my apps and so far is an amazing tool to have. But it seems that some fonts that work just fine in browser don't work on mobile, is there a way to get around this?
Here's my code:
CONCATENATE("data:image/svg+xml;utf8,
<svg width='354' height='395' xmlns='http://www.w3.org/2000/svg'>",
"<g>
<text x='5' y='25' font-size='25' font-weight='bold' font-family='Century Gothic' fill='black' text-decoration='underline'>Mediciones</text>
</g>
<g transform='translate(0,35)'>
<g>
<rect x='3' y='3' width='150' height='40' rx='10' ry='10' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='28' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Distancia A (m)</text>
</g>",
"<g>
<rect x='153' y='3' width='200' height='40' rx='10' ry='10' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='28' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Dist_A]),"</text>
</g>
",
"<g>
<rect x='3' y='50' width='150' height='40' rx='10' ry='10' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='75' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Distancia B (m)</text>
</g>",
"<g>
<rect x='153' y='50' width='200' height='40' rx='10' ry='10' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='75' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Dist_B]),"</text>
</g>
",
"<g>
<rect x='3' y='97' width='150' height='40' rx='10' ry='10' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='122' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Distancia C (m)</text>
</g>",
"<g>
<rect x='153' y='97' width='200' height='40' rx='10' ry='10' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='122' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Dist_C]),"</text>
</g>
",
"<g>
<rect x='3' y='144' rx='10' ry='10' width='150' height='40' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='169' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Diรกmetro (m)</text>
</g>",
"<g>
<rect x='153' y='144' rx='10' ry='10' width='200' height='40' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='169' font-size='15' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Diametro]) ,"</text>
</g>",
"<g>
<rect x='3' y='191' rx='10' ry='10' width='150' height='40' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='216' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Aguas arriba</text>
</g>",
"<g>
<rect x='153' y='191' rx='10' ry='10' width='200' height='40' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='216' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Aguas_arriba]),"</text>
</g>",
"<g>
<rect x='3' y='238' rx='10' ry='10' width='150' height='40' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='263' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Aguas abajo</text>
</g>",
"<g>
<rect x='153' y='238' rx='10' ry='10' width='200' height='40' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='263' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Aguas_abajo]),"</text>
</g>",
"<g>
<rect x='3' y='285' rx='10' ry='10' width='150' height='60' fill='black' stroke='black' stroke-width='3'/>
<text x='12' y='310' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>Tapado de</text>
<text x='12' y='330' font-size='17' font-weight='bold' font-family='Century Gothic' fill='white'>alcantarilla (C)</text>
</g>",
"<g>
<rect x='153' y='285' rx='10' ry='10' width='200' height='60' fill='white' stroke='black' stroke-width='3'/>
<text x='168' y='320' font-size='16' font-weight='bold' font-family='Century Gothic' fill='black'>", TEXT([Tapado_alcantarilla]),"</text>
</g>",
"</g>
</svg>"
)
