User:IsadoraofIbiza/SVG text tutorial
One of the worst things about mediawiki SVG is that its typography is dreadful. Take this example image rendered as a PNG from Inkscape—
Upload it to Commons, and it becomes...
We've got a problem.
The most serious issue is that unknown and copyright-protected fonts, such as the commercial Frutiger-font, which are not allowed to use on Commons, and will be rendered by the Déjà Vu fonts (blech...), and the letterwidth changed, causing different text-lenght. To avoid it, it is recommended to add fallback fonts, with fonts available on commons, you can find them ordered by length for sans-fonts: File:MediaWiki SVG font list sans.svg. (Probably) like many Inkscape graphists, I split multistyled fonts into individual fonts like Font Light, Font Book, Font Medium, Font Bold, etc since otherwise they don't show up in Inkscape's font selection dialog.* This means that all the text styling has been removed. There are no more light or bold fonts. (Librsvg, the renderer of mediawiki, recognizes the font-weights defined by the current SVG-Standard, such as "normal"; "bold"; "bolder"; "lighter"; "100"; "200"; "300"; "400"; "500"; "600"; "700"; "800"; "900").
* Though I believe this has now been fixed on Inkscape's end. Still, Mediawiki probably does not have a corresponding Déjà Vu font to substitute for the light or medium weights.
The primary workaround people often use is either settling and designing with the Déjà Vu font, or converting all the text to paths, which preserves typographical appearance, though makes it extremely difficult to change the text afterwards—spelling errors essentially become set in stone once the text in converted.
Luckily, there's another way to fix this, and it doesn't involve typographical compromises, rendering to PNG, or removing editability. Basically, you convert the text to paths, but preserve an invisible layer with the editable text data.
Start by selecting all the text objects with Ctrl F, and checking the "Texts" box on the find dialog.
Then group them all so they're easier to work with.
Duplicate the group—this will be the layer that stores the text data.
Now, what we're going to do is hide it by making it invisible (opacity = 0). However, if we do that first, we'll lose it—as of writing this, once you deselect an invisible object in Inkscape, it can never be recovered.* That's why we're going to attach it to something that is visible, but located outside the image area. Do this by adding an object (like a rectangle) somewhere outside the page boundary.
* Well, it can be, but it's hard.
Now, we can make one of the text layers invisible,
And group it with the visible rectangle.
Next, select the other text group under it (you may need to move the invisible layer down a few levels to access it). This will be the display text. Convert it to paths using the Object to Path command.
You should end up with an SVG that will display on Wikipedia like this: