3 ms·

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=

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.

m-a-t-t-i 10mo ago
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>
- cubefox 10mo ago
  I don't think that helps with embedding fonts.
- codedokode 10mo ago
  So if you save the SVG image, it won't display without Internet connection. Not great.
codedokode 10mo ago
The idea was that you can embed only the glyphs used in a text. For example, instead of embedding thousands of existing Chinese characters, embed only 20 of them. Embedding is necessary anyway because otherwise you cannot guarantee that your image will be displayed correctly on the other machine. Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure.
- csnover 10mo ago
  > Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure. For better or worse, CSS parsing and WOFF support are both mandatory in SVG 2.[0][1] Time will tell whether this makes it a dead spec! [0] https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS [1] https://www.w3.org/TR/SVG2/text.html#FontsGlyphs https://www.w3.org/TR/SVG2/text.html#FontsGlyphs
  - imtringued 10mo ago
    That's how OpenCL died. They made difficult to implement features mandatory.

m-a-t-t-i 10mo ago

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>

cubefox 10mo ago
I don't think that helps with embedding fonts.
codedokode 10mo ago
So if you save the SVG image, it won't display without Internet connection. Not great.

codedokode 10mo ago

The idea was that you can embed only the glyphs used in a text. For example, instead of embedding thousands of existing Chinese characters, embed only 20 of them. Embedding is necessary anyway because otherwise you cannot guarantee that your image will be displayed correctly on the other machine. Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure.

csnover 10mo ago
> Also, allowing CSS inside SVG is not a great idea because the SVG renderer needs to include full CSS parser, and for example, will Inkscape work correctly when there is embedded CSS with base64 fonts? Not sure. For better or worse, CSS parsing and WOFF support are both mandatory in SVG 2.[0][1] Time will tell whether this makes it a dead spec! [0] https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS https://www.w3.org/TR/SVG2/styling.html#StylingUsingCSS [1] https://www.w3.org/TR/SVG2/text.html#FontsGlyphs https://www.w3.org/TR/SVG2/text.html#FontsGlyphs
- imtringued 10mo ago
  That's how OpenCL died. They made difficult to implement features mandatory.