Search code examples
google-chromesvgoperaemoji

Why is the emoji not displayed in the SVG in Chrome?


The emoji in the SVG correctly displays in both Safari and Firefox. In Chrome and Opera it is not displayed at all. What do I need to do to have the emoji also display in Chrome and Opera?

<svg id="SVGbgcolor1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 144 144" alt="SVG Bitcoin Pictograph">
    <g>
        <text id="flag" x="0" y="136" font-family="courier" font-size="144">🇺🇸</text>
        <g id="SVGbgcolor2" transform="matrix(2.403433 0 0 2.403433 133.9157 -.2672786)" fill="#ffff11" stroke="black">
        <path d="m-29.67313 32.30631c-0.0078 3.964844-0.01563 7.929687-0.02344 11.89453 4.250716-0.05757 9.512582 0.672079 12.68164-2.011719 2.020462-1.485994 1.7925-8.830264-2.508482-9.337212-3.355145-0.489526-6.76593-0.500321-10.14972-0.5456z"></path>
        <path d="m-29.66532 15.95475 0.09375 9.896485c3.94585-0.118673 9.206302 0.331177 11.81609-1.285296 2.052885-1.630257 1.024997-8.44682-3.021329-8.344769-2.954353-0.25838-5.925276-0.251126-8.888509-0.26642z"></path>
        <path d="m-56.63264-1.090505-0.08727 63.0228 62.6767-0.05623-0.033283-62.95665zm22.46341 6.233736h7.091797v4.530687h4.558594l-0.147496-4.383191h7.132551l-0.05164 4.411386c5.97362 0.3102366 11.03635 8.194718 8.783373 13.20227-1.403588 2.992536-4.061669 5.443424-7.199219 6.509766 4.270871 0.752585 9.289582 2.353423 9.201172 8.21875 0.4854457 8.953997-3.897788 10.18234-10.63281 13.90966v4.358297h-7.089844v-4.379284h-4.554687v4.52678h-7.091797v-4.52678h-10.81445l-0.05977-5.75189c1.541302 0.125363 4.914709-0.106688 4.939639-2.629801-0.03614-7.277082 0.06346-18.24454-0.02479-25.51909-0.172768-2.90147-4.855077-2.632184-4.855077-2.632184v-5.314695h10.81445z"></path>
        </g>
    </g>
    <circle id="rounded1" cx="72" cy="72" r="72" stroke="black" stroke-width="2" fill="transparent"></circle>
    <rect x="0" y="0" width="144" height="144" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0"></rect>
</svg>

Solution

  • Worked it out. Needed to change font-size to 71 or less (font-size="71"). It seems that in Chrome 55.0.2883.95 greater font-sizes result in nothing being rendered. Though the emoji is present in code as can be seen when using toDataURL.