Clever Geek Handbook

SVG doesn't use font if inside HTML

I have an SVG that renders fine in Chrome, but when I use it in an HTML page, it doesn't use the correct font, it uses the default instead.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      <![CDATA[
        /* latin-ext */
        @font-face {
          font-family: 'Roboto-Black';
          src: url(./Roboto-Black.ttf)
        }
      ]]>
    </style>
  </defs>
  <text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
    <tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
  </text>
</svg>

The SVG is rendered in Chrome, but when rendered in an HTML page, it does not use the correct font.

<html>
  <head></head>
  <body>
    <img src="test.svg" width="100%">
  </body>
</html>

What am I missing?

Appendix: Although a valid solution was suggested below, I found it was easier to include the svg code directly in the html instead of linking to the svg file. Thus, the problem does not arise.

+3


source to share


1 answer


When used as an image (using an html <img>

tag, an SVG tag, <image>

or as a CSS background image), the SVG must consist of a single file to protect user privacy.



You can use the font, but you will need to convert the font data to data URI and embed the font in the SVG file.

+4


source






More articles:


All Articles