SVG images that use webfonts don't actually use those webfonts.

[Pomax]

• [x] Searched existing issues to avoid creating duplicates.
• [x] Confirmed that it can be reproduced in built-in themes without customized css.
• [x] Searched http://support.typora.io/

---

Documents that contain SVG images do not load webfonts, thus malrendering the image.

To Reproduce

Create a document.md containing ![test](test.svg), and create that test.svg with content:

<?xml version="1.0"?>
<svg version="2.0" width="10em" height="2em" viewBox="0 0 10 2" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: "Inter";
        src: url(https://fonts.gstatic.com/s/inter/v3/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
      }
    </style>
  </defs>
  <text x="0" y="1.75" width="10" height="1" font-family="Inter" font-size="2" >test</text>
</svg>

1. open document.md in Typora
2. done, that SVG is not getting rendered properly.

Expected behavior

What it should do is download the webfont, and use it in the SVG images (open this in Chrome or Firefox, for example):

Actual behavior

Instead, depending on way too many factors, this will look like anything except what it should look like. For example, on Win10 pro x64 I get the following preview:

Desktop (please complete the following information):

• OS: win10 pro x64

Typora Version e.g: 0.11.8

[shishtpal]

Hello @Pomax

There are three ways to embed SVG in markdown document,

![](./demo.svg)

<img src="./demo.svg" />

<iframe src="./demo.svg"></iframe>

First two methods just try to load SVG like an Image, Hence You should use 3rd method, It will render SVG just like browser,

Hope It helps, Thanks

[Pomax]

It does not: when SVG documents are loaded "as images", then interactivity should not work, but it should still resolve things like webfonts, because that's the official SVG spec-defined behaviour. SVG2's style element must be treated the same as the HTML5 style element, and if there are url() values for things like background images, or web fonts, etc. those must all be loaded. Not doing so is a CSS spec violation.

See https://www.w3.org/TR/SVG2/styling.html ("SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element.")

If whatever library you're using to display SVG images is not honouring the spec, please update that library (or replace it with something that behaves properly).

[shishtpal]

@Pomax

It's not Typora fault that SVG is loading as it should or what everyone expect, It is browser fault or more specifically fault of HTML img Tag

please look at it https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/#the-image-tag

The only problem is you will lose your fonts. To be more precise, if you have any text in your SVG, unless you embed fonts, your text will be displayed with system fonts,

Thanks

[abnerlee]

Relates https://stackoverflow.com/questions/49629800/embedded-fonts-inside-svg-file-is-not-rendered

It seems not supported by browsers yet, so it is also out of scope for typora to support it by ourselves.