Fonts embedded in svg are not rendered?

  • 28 May 2020
  • 1 reply
  • 505 views

Can you give some advice about the prerequisites for rendering fonts in SVGs.

3 scenarios:

  1. The font is referenced in svg. Renders in other svg viewers, not with Miro.
    <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
    <text x="73.871" y="160.562" style="white-space: pre; fill: rgb(51, 51, 51); font-family: "Permanent Marker&quot;; font-size: 28px;">haha</text>
    </svg>

     

  2. The font is embedded as glyphs in svg. Renders in other svg viewers, not with Miro.
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.2" width="20.48mm" height="11.58mm" viewBox="2651 4810 2048 1158" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xml:space="preserve">
    <defs>
    <font id="EmbeddedFont_1" horiz-adv-x="2048">
    <font-face font-family="Permanent Marker embedded" units-per-em="2048" font-weight="normal" font-style="normal" ascent="2249" descent="635"/>
    <missing-glyph horiz-adv-x="2048" d="M 0,0 L 2047,0 2047,2047 0,2047 0,0 Z"/>
    <glyph unicode="h" horiz-adv-x="1191" d="M 1024,194 C 1027,159 1023,131 1012,108 1001,85 987,66 968,50 949,34 928,21 904,12 880,3 857,-6 834,-14 823,-7 813,0 803,7 793,14 781,20 768,24 751,56 734,84 718,109 702,134 695,162 696,194 696,195 697,203 699,216 701,229 704,244 707,260 710,276 713,291 715,305 717,319 718,327 718,328 687,325 655,319 622,308 589,297 556,285 525,270 494,255 464,241 437,226 410,211 387,199 370,188 370,184 367,174 362,159 357,144 350,128 342,111 334,94 325,79 316,66 307,53 297,46 288,46 289,42 291,38 294,34 297,30 297,25 294,18 275,13 259,6 244,-3 229,-12 214,-19 198,-25 182,-31 165,-34 146,-34 127,-34 105,-27 80,-14 80,-6 77,1 70,7 63,13 56,18 49,23 42,28 35,32 30,35 25,38 22,41 22,44 15,43 13,47 14,58 15,69 21,71 30,66 15,85 6,101 3,115 0,129 -8,147 -20,168 -17,171 -15,175 -13,182 -11,189 -9,195 -8,200 -7,205 -5,209 -2,212 1,215 4,214 8,210 5,222 5,232 8,240 11,248 13,255 16,262 19,269 21,275 22,282 23,289 21,296 16,304 37,333 51,365 58,399 65,433 69,464 70,492 79,501 88,515 95,532 102,549 108,567 112,585 116,603 118,620 117,637 116,654 114,667 110,678 111,685 119,687 132,684 140,728 146,778 149,833 152,888 158,941 166,991 174,1041 187,1085 206,1123 225,1161 255,1186 296,1198 304,1170 314,1145 327,1124 340,1103 354,1082 369,1063 384,1044 400,1024 415,1004 430,984 445,961 458,936 457,911 454,881 450,848 446,815 441,781 435,746 429,711 423,678 417,646 411,614 405,587 400,564 401,557 405,553 411,552 417,551 418,545 414,534 446,542 479,549 514,556 549,563 583,570 618,578 653,586 686,595 719,605 752,615 782,627 810,642 817,694 825,746 836,798 847,850 848,903 840,958 847,963 852,970 856,978 860,986 867,991 876,994 869,1019 867,1046 868,1074 869,1102 874,1129 883,1154 892,1179 904,1201 921,1219 938,1237 958,1249 982,1254 997,1233 1009,1210 1020,1185 1031,1160 1042,1136 1053,1111 1064,1086 1076,1063 1089,1041 1102,1019 1118,1000 1138,984 1142,945 1145,905 1147,864 1149,823 1151,781 1152,738 1141,687 1130,638 1117,591 1104,544 1095,493 1090,440 1081,429 1073,417 1068,404 1063,391 1057,377 1052,363 1047,349 1041,336 1034,323 1027,310 1019,299 1010,290 1015,274 1016,259 1013,245 1010,231 1013,214 1024,194 Z"/>
    <glyph unicode="a" horiz-adv-x="1271" d="M 1058,168 C 1050,145 1038,122 1023,99 1008,76 990,55 969,37 948,19 925,4 900,-8 875,-20 848,-27 820,-28 803,-24 791,-20 785,-15 779,-10 773,-6 766,-2 762,1 758,3 755,5 752,7 749,9 746,10 L 722,20 730,46 C 733,57 732,65 728,71 724,77 716,85 704,96 700,100 696,104 692,108 688,112 685,116 682,120 L 648,158 702,172 C 735,181 758,193 769,208 780,223 785,247 782,282 755,287 733,288 715,284 697,280 679,275 660,270 636,263 612,258 587,253 562,248 535,246 506,246 495,246 485,246 476,247 467,248 457,249 446,250 L 426,254 C 423,269 421,277 418,279 415,281 413,283 410,286 403,293 396,302 389,313 382,324 380,339 384,356 377,368 373,380 372,392 364,376 358,359 354,342 L 346,322 326,318 C 323,317 321,314 320,309 319,304 318,301 318,298 L 308,264 C 305,261 303,259 300,257 297,255 295,253 292,250 289,238 286,226 282,214 278,202 274,191 270,180 263,163 258,146 253,129 248,112 247,96 248,80 L 240,58 C 233,50 226,44 218,39 210,34 202,30 194,26 191,23 188,21 183,19 178,17 175,15 172,14 L 166,-8 142,-12 C 127,-15 117,-17 111,-18 105,-19 98,-20 90,-20 L 70,-18 C 55,-6 44,4 36,11 28,18 19,25 8,32 -4,48 -11,60 -12,68 -13,76 -15,83 -16,90 -19,98 -20,105 -21,110 -22,115 -23,119 -26,122 L -52,146 -30,164 -28,198 C -1,266 27,331 57,394 87,457 118,521 150,586 161,607 171,629 181,650 191,671 201,693 212,714 211,718 210,723 210,728 210,733 211,739 214,746 229,769 241,789 250,807 259,825 269,843 278,862 289,885 300,907 311,928 322,949 337,971 354,994 L 386,1008 C 390,1009 395,1011 400,1013 405,1015 411,1016 418,1016 L 448,1012 C 485,1029 518,1054 546,1085 574,1116 603,1154 632,1198 L 652,1226 678,1210 C 685,1206 694,1202 706,1199 718,1196 731,1192 744,1188 768,1183 791,1177 812,1170 833,1163 851,1153 864,1140 872,1119 877,1103 878,1092 879,1081 881,1071 884,1060 888,1037 892,1015 895,992 898,969 901,944 902,916 909,893 914,871 919,849 924,827 928,805 932,782 939,750 945,719 952,689 959,659 967,631 978,604 989,604 995,603 998,602 1005,605 1012,607 1019,608 1026,609 1035,611 1044,612 L 1066,614 1074,594 C 1075,587 1082,581 1094,574 1111,573 1124,569 1132,563 1140,557 1147,551 1154,544 1159,539 1165,535 1170,532 L 1200,520 1184,490 C 1171,466 1152,443 1127,421 1102,399 1075,381 1044,366 1045,358 1046,350 1047,343 1048,336 1049,328 1052,320 1056,297 1059,274 1062,250 1065,226 1065,201 1062,176 L 1058,168 Z M 480,514 C 520,517 556,520 589,523 622,526 658,532 698,540 689,580 679,622 668,665 657,708 646,751 634,794 L 622,774 C 595,746 570,715 545,680 520,645 499,613 482,582 474,570 466,558 458,546 450,534 443,522 436,510 444,511 452,512 459,512 466,512 473,513 480,514 Z"/>
    <glyph unicode="H" horiz-adv-x="1403" d="M 30,68 C 26,67 23,68 22,72 21,76 20,80 21,84 22,88 24,91 27,94 30,97 35,97 40,94 23,115 12,135 7,152 2,169 -7,191 -20,216 -16,220 -13,226 -12,233 -11,240 -9,247 -7,254 -5,261 -2,266 1,269 4,272 9,271 14,266 11,281 11,293 14,302 17,311 20,320 23,328 26,336 29,344 30,352 31,360 29,369 24,380 49,415 66,452 74,493 82,534 87,571 88,604 100,616 110,632 119,652 128,672 134,693 138,714 142,735 144,756 144,777 144,798 141,814 136,826 137,831 140,834 145,835 150,836 155,835 162,834 171,887 178,947 181,1012 184,1077 191,1140 201,1201 211,1262 227,1315 250,1361 273,1407 309,1437 358,1450 367,1417 380,1387 395,1362 410,1337 427,1312 445,1288 463,1264 481,1240 500,1216 519,1192 536,1165 552,1136 551,1105 548,1070 543,1030 538,990 532,949 525,908 518,867 510,827 503,788 496,749 489,717 482,690 483,683 488,679 496,677 504,675 505,667 500,654 539,663 579,672 621,681 663,690 704,698 745,707 786,716 826,726 865,738 904,750 941,765 976,782 984,846 994,909 1006,972 1018,1035 1019,1098 1010,1162 1018,1169 1025,1177 1030,1186 1035,1195 1043,1201 1054,1204 1046,1235 1043,1267 1044,1301 1045,1335 1051,1367 1061,1396 1071,1425 1086,1451 1106,1473 1126,1495 1151,1509 1180,1516 1197,1491 1213,1463 1226,1434 1239,1405 1253,1375 1266,1345 1279,1315 1294,1287 1309,1260 1324,1233 1344,1211 1368,1192 1372,1145 1375,1098 1378,1049 1381,1000 1383,950 1384,898 1372,838 1358,780 1343,723 1328,666 1317,606 1310,542 1299,530 1291,516 1284,499 1277,482 1271,466 1265,449 1259,432 1252,416 1244,400 1236,384 1226,371 1214,360 1219,341 1220,324 1217,307 1214,290 1218,271 1230,248 1233,207 1228,172 1215,145 1202,118 1185,94 1163,75 1141,56 1116,40 1087,29 1058,18 1030,7 1002,-2 989,6 976,14 965,23 954,32 940,38 924,42 L 934,60 C 907,87 884,115 865,145 846,175 837,209 838,248 838,249 839,258 842,275 845,292 848,309 851,328 854,347 858,364 861,381 864,398 866,407 866,408 829,404 790,395 750,382 710,369 671,354 633,337 595,320 560,303 527,285 494,267 468,252 448,240 448,236 445,225 438,206 431,187 423,168 414,147 405,126 394,108 383,92 372,76 360,69 348,70 351,63 353,58 356,55 359,52 359,45 356,36 333,29 313,21 295,10 277,-1 259,-10 240,-17 221,-24 201,-28 179,-27 157,-26 131,-18 100,-2 100,7 96,16 88,23 80,30 72,37 63,42 54,47 47,52 40,56 33,60 30,64 30,68 Z"/>
    </font>
    </defs>
    <defs class="EmbeddedBulletChars">
    <g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
    </g>
    <g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
    </g>
    <g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
    </g>
    <g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
    </g>
    <g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
    </g>
    <g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
    </g>
    <g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
    </g>
    <g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
    </g>
    <g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
    </g>
    <g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
    <path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
    </g>
    </defs>
    <g class="Page">
    <g class="com.sun.star.drawing.TextShape">
    <g id="id3">
    <rect class="BoundingBox" stroke="none" fill="none" x="2651" y="4810" width="2048" height="1158"/>
    <text class="TextShape"><tspan class="TextParagraph" font-family="Permanent Marker" font-size="635px" font-weight="400"><tspan class="TextPosition" x="2901" y="5638"><tspan fill="rgb(0,0,0)" stroke="none">Haha</tspan></tspan></tspan></text>
    </g>
    </g>
    </g>
    </svg>

     

  3. The font is embedded as defs style in svg. Renders in other svg viewers, not with Miro.
    <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
    <defs>
    <style bx:fonts="Permanent Marker">@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-stretch: normal; font-variant: normal; font-feature-settings: normal; src: url("data:font/ttf;base64,..."); }</style>
    </defs>
    <text style="fill: rgb(51, 51, 51); font-family: &quot;Permanent Marker&quot;; font-size: 28px; white-space: pre;" x="73.871" y="160.562">haha</text>
    </svg>

     

Any recommendations welcome.


1 reply

Userlevel 7
Badge +5

Hi @Thomas Krause,

I have converted your question into a support ticket so that the support team takes a proper look at the scenarios you have described. They will get back to you via email.

Thank you for your understanding! 

Reply