All Media Lab Posted October 27, 2021 Posted October 27, 2021 Hi, How do I embed fonts in a SVG? In Affinity Designer? Regards & Thanks, David Quote
walt.farrell Posted October 27, 2021 Posted October 27, 2021 I think you would need to do that manually, @All Media Lab, by: Finding or creating a web font version of the font. Hosting that font on a server. Generating a URL/URI for the server-hosted font. Editing the text of the SVG to refer to that URL/URI. Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. Laptop 2: Windows 11 Pro 24H2, 16GB memory, Snapdragon(R) X Elite - X1E80100 - Qualcomm(R) Oryon(TM) 12 Core CPU 4.01 GHz, Qualcomm(R) Adreno(TM) X1-85 GPU iPad: iPad Pro M1, 12.9": iPadOS 18.5, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sequoia 15.4
All Media Lab Posted October 27, 2021 Author Posted October 27, 2021 Hi @walt.farrell Walt, I need to use the SVG for a animation application and normally you can convert text "Write text as paths" in for example Keyshape (an other SVG animation editor). Is this possible in Designer? This means that the font are sort of "embed" then! David Quote
Guest Posted October 27, 2021 Posted October 27, 2021 7 minutes ago, All Media Lab said: I need to use the SVG for a animation application and normally you can convert text "Write text as paths" in for example Keyshape (an other SVG animation editor). Is this possible in Designer? This means that the font are sort of "embed" then! You can convert the text to curves which will preserve their appearance. Check the 'Export text as curves for font independence' check box in the export dialog. Unfortunately actual SVG font embedding isn't supported. Quote
All Media Lab Posted October 27, 2021 Author Posted October 27, 2021 Wauw!! Never noticed that text there! Thanks very much! Exactly what I need! David Quote
Old Bruce Posted October 27, 2021 Posted October 27, 2021 You can also do it in the Designer Document. Layer > Convert to Curves I would think long and hard about doing this though, If it is a lot of text you'll have to retype everything if there is a simple one letter typo. @Bryan Rieger has the better idea, just do it on export. All Media Lab 1 Quote Mac Pro (Late 2013) Mac OS 12.7.6 Affinity Designer 2.6.0 | Affinity Photo 2.6.0 | Affinity Publisher 2.6.0 | Beta versions as they appear. I have never mastered color management, period, so I cannot help with that.
tboettiger Posted September 14, 2022 Posted September 14, 2022 Although it's a pity AD does not support font subsetting for SVG, there is still a solution: Sometimes (e.g. when translating screens) screen text should not be outlined but exported as text in the SVG. AD transfers all settings (size, position, colour) into the SVG, but misses the font-family and font weight. Since SVGs are simply XML, i.e. text files, you can open them with a text editor and edit them. With an editor such as BBEdit, you can even do some grep on a batch of SVGs and fix typos en passant. Quote
David in Яuislip Posted September 14, 2022 Posted September 14, 2022 4 hours ago, tboettiger said: Although it's a pity AD does not support font subsetting for SVG, Usually, fonts aren't embedded into an svg so I don't understand the concept of subsetting A web page can contain a <style> statement like body{font-family: Arial, Helvetica, sans-serif;} or you can add your own font like @font-face{font-family:'mine'; src:url('mine.woff2') format('woff2');} In this case you can generate the font so that it only contains the subset, obviously mindful of copyright Svg's can contain <style> definitions If you really must embed fonts into an svg thenhttps://observablehq.com/@mootari/embedding-fonts-into-an-svg is worth a look The snag with this approach is that the font is only available to the svg and the file size goes ballistic, better to use the @font-face approach None of this is doable with Affinity programs Quote Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10
tboettiger Posted September 14, 2022 Posted September 14, 2022 Thanks for the post. I use SVG for graphical user interfaces that need translation and will be printed. So replacing the text in the interface with the target language works fine in a PDF. I found out that AD in fact keeps the font information in the SVG. SO Even that works. Nice! Quote
PaoloT Posted October 4, 2022 Posted October 4, 2022 I second any request for adding font embedding in SVG files. Without this, exporting images to PDF remains the safest choice. This would also mean that they will be likely converted to PNG when preparing a project for the web, instead of remaining vector images in the SVG format. Paolo Quote
v_kyr Posted October 4, 2022 Posted October 4, 2022 On 9/14/2022 at 11:25 PM, David in Яuislip said: The snag with this approach is that the font is only available to the svg and the file size goes ballistic, better to use the @font-face approach Embedding a font entirely into a SVG file (via base64 encoding inclusion) is also a @font-face definition & usage approach! - See related ... Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2
David in Яuislip Posted October 4, 2022 Posted October 4, 2022 1 hour ago, v_kyr said: Embedding a font entirely into a SVG file (via base64 encoding inclusion) is also a @font-face definition & usage approach! Quite right, probably lack of alcohol v_kyr 1 Quote Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.