An SVG is all you need

Downsides of using SVG:

- cannot wrap text

- cannot embed font glyphs - your SVG might be unreadable if the user doesn't have the font installed. You can convert letters to curves, but then you won't be able to select and edit text. It's such an obvious problem, yet nobody thought of it, how? Photoshop solved this long time ago - it saves both text and its rendering, so the text can always be rendered.

- browsers do not publish, which version and features they support

- may contain Javascript and references to external resources, which makes it difficult to view in a secure, isolated environment

One of solutions is having two SVGs: author version, which you edit in Inkscape and which uses Inkscape-specific extensions, and published version, which is generated from the first, that uses only basic features and has text converted to curves.

Safari supports base64-embedding font files in a <style>’s @font-face {} (iirc it's something like `@font-face { src: url('data:application/x-font-woff;charset=utf-8;base64,...'); }`) that can then be referenced as normal throughout the SVG. I don't recommend this though, nobody wants to deal with 500KB SVGs.

You can also point to font files with @font-face. I use a small custom font that's only 16 KB. Although, when opening the file locally, you have to first disable local file restrictions in safari's settings before it works...

  <defs>
  <style type="text/css">
  @font-face {
  font-family: 'A-font';
  src: url('A-font.woff') format('woff');
  font-weight: normal;
  font-style: normal; }
  </style>
  </defs>