Wikipedia:SVG help/Archive 10

This is an archive of past discussions. Do not edit the contents of this page. If you wish to start a new discussion or revive an old one, please do so on the current talk page.

Archive 5

←

Archive 8

Archive 9

Archive 10

SVG text rendering, again – image displays differently in two en.WP articles!

Tracked in Phabricator
Task T340379

Red arrows show simultaneous inconsistent renderings between two articles of File:20220823 Public underestimation of public support for climate action - poll - false social reality.svg
Separately: Blue notation arrows show consistently incorrect renderings between two articles of File:20220629 Public estimates of scientific consensus on climate change - horizontal bar chart.svg, even after removing font-weight="bold" specification once thought to have caused the rendering problem
Anomaly may be related to anomaly found in earlier versions of File:200012 Suicide methods in order of lethality - variable-width bar chart.svg, which was discussed at Wikipedia:SVG help/Archive 9 at en.WP

At the present moment, sometimes the files display correctly for me on Commons but still not on en.WP. —RCraig09 (talk) 19:12, 29 May 2023 (UTC)

20220629 Public estimates of scientific consensus on climate change - horizontal bar chart.svg – BLUE notation arrows
20220823 Public underestimation of public support for climate action - poll - false social reality.svg – RED arrows
200012 Suicide methods in order of lethality - variable-width bar chart.svg (previously discussed)

I've resolved to avoid use of italics and bold text, but... even that doesn't seem to avoid the problem(s).

Is there a central place to report such bugs? —RCraig09 (talk) 19:12, 29 May 2023 (UTC)

@RCraig09:

Did you try c:Help:Purge ?
Wikimedia Bugs can be repoted at phab:maniphest/task/edit/form/43/

— Johannes Kalliauer - contrib. 04:12, 30 May 2023 (UTC)

@JoKalliauer: Many times I've tried Shift-Reload (Chrome for Mac), and I just tried ?action=purge as you suggested. The problem remains—same on my iPhone's Safari browser.

Are you (or any other readers) seeing the anomalies also? (below and on the en.Wikipedia pages:)

It's not just my one device. Thanks for any feedback. —RCraig09 (talk) 04:58, 30 May 2023 (UTC)

In File:20220629 Public estimates of scientific consensus on climate change - horizontal bar chart.svg I think I've found a work-around: avoid <tspan> specifications. Part of the code change is shown below:

Version 6 incorrectly renders the two title text elements off center to the right:

<switch>
<text x="525" y="50" fill="#0099aa" font-size="45px" id="trsvg22-ja" systemLanguage="ja">
<tspan id="trsvg1-ja">一般市民による評価</tspan>
</text>

<text x="525" y="50" fill="#0099aa" font-size="45px" id="trsvg22">
<tspan id="trsvg1">Public estimates</tspan>
</text>
</switch>

Version 7 replaces the <text> and <tspan> with <g> and <text> specifications:

<switch>
<g fill="#0099aa" font-size="45px" id="trsvg22-ja" systemLanguage="ja">
<text x="525" y="50" id="trsvg1-ja">一般市民による評価</text>
</g>

<g fill="#0099aa" font-size="45px" id="trsvg22">
<text x="525" y="50" id="trsvg1">Public estimates</text>
</g>
</switch>

The changes to Version 7 appear to avoid the problem—in the first file. —RCraig09 (talk) 17:13, 30 May 2023 (UTC)

However, there is no <tspan> specification in the second file, File:20220823 Public underestimation of public support for climate action - poll - false social reality.svg.

      <g font-size="40px" font-family="Liberation Sans,sans-serif" text-anchor="middle" fill="black">
<text x="700" y="50">Public's underestimation of support</text>
<text x="700" y="95">for action against climate change</text>

(other text specs)

      </g>

So I still don't know a solution. —RCraig09 (talk) 17:26, 30 May 2023 (UTC)

Update: For Version 3, I made text-anchor="middle" explicit in each <text> specification (not just inherited from group <g>), and that seems to have avoided the problem in the only article that was having a problem before (Climate change in the United States).

 <g font-size="40px" font-family="Liberation Sans,sans-serif" text-anchor="middle" fill="black">
<text x="700" y="50" text-anchor="middle">Public's underestimation of support</text>
<text x="700" y="95" text-anchor="middle">for action against climate change</text>

</g>

Problem avoided; bug not solved. —RCraig09 (talk) 17:58, 30 May 2023 (UTC)

Bug report filed at phab:T340379 —RCraig09 (talk) 05:55, 25 June 2023 (UTC)

Supplemental (8 July 2023):

Example of avoiding the problem: eliminate use of <tspan> as follows:

Old (BAD RENDERING):

 <switch>
<text x="550" y="60" id="trsvg26-ja" systemLanguage="ja">
<tspan id="trsvg1-ja">人間が要因である地球温暖化に関する</tspan>
</text>

<text x="550" y="60" id="trsvg26">
<tspan id="trsvg1">Academic studies of scientific consensus</tspan>
</text>
 </switch>

New (CORRECT RENDERING):

 <switch>
<text x="550" y="60" id="trsvg26-ja" systemLanguage="ja">人間が要因である地球温暖化に関する</text>
<text x="550" y="60" id="trsvg26">Academic studies of scientific consensus</text>
 </switch>

According to User:JoKalliauer at Commons, a new version of librsvg renders incorrectly, though an old librsvg-version did not contain this bug. —RCraig09 (talk) 19:23, 11 July 2023 (UTC)

Update: Additional discussion is at Talk:Librsvg_bugs#SVG_text_rendering:_probable_bug, in which Glrx says "One failure mechanism is librsvg 2.44.10 does not calculate the width of an SVG "text chunk" correctly. Instead of the whole width, it is using the width of the last constituent." This would explain how some text is not positioned properly. —RCraig09 (talk) 17:37, 16 July 2023 (UTC)

PS, FYI: I just changed Version 2 of File:2021 C02 emissions by income decile - International Energy Agency IEA.svg by removing a <tspan> specification within the last of three <text> specifications. Version 3 renders closer to being correct. —RCraig09 (talk) 19:13, 20 July 2023 (UTC)

If the issue is "Income: highest 10%", how about just setting text-anchor="start" and aligning it manually? cmɢʟee⎆τaʟκ 09:48, 21 July 2023 (UTC)

@Cmglee: The three grouped lines of text should be centered about the same vertical centerline. Using text-anchor="start" would not bring exact results in English (differences between different rendering software), and would likely be way off if translated into some foreign languages. We can only hope to adapt our code to existing bug(s), until the SVG text rendering problems are resolved. —RCraig09 (talk) 12:34, 21 July 2023 (UTC)

PPS: In Version 11 of File:20211109 Frequency of extreme weather for different degrees of global warming - bar chart IPCC AR6 WG1 SPM.svg, the following code caused the title to be rendered to the right of center. I solved the problem by removing the <tspan> for Version 12.

   <switch> 
<text x="600" y="50" id="trsvg25-zh" systemLanguage="zh">
<tspan id="trsvg1-zh">全球变暖下更频繁的极端天气</tspan>
</text>

<text x="600" y="50" id="trsvg25">
<tspan id="trsvg1">More frequent extreme weather with global warming</tspan>
</text>

   </switch>

Interestingly, my adding hard returns to form Version 11 may have caused the problem, since Version 10 rendered correctly. Or maybe I shouldn't have removed the
</switch> <switch> that was between the two text declarations. The SVG Translate Tool introduces <tspan> elements that can (apparently) cause problems if you subsequently change things (add hard returns) in their vicinity. —RCraig09 (talk) 02:34, 30 July 2023 (UTC)

Update: see

https://phabricator.wikimedia.org/T97233 (April 2015)
https://phabricator.wikimedia.org/T340379 (June 2023)

—RCraig09 (talk) 22:02, 16 July 2023 (UTC)

Is it possible to put something in the SVG code to block font substitutions?

Tracked in Phabricator
Task T344564

cmglee and others. Is it possible to put something in the SVG code to block font substitutions? I think it would solve a lot of problems. Some SVG image designers want to use the latest fonts for various reasons. They may not want the boring generic free fonts used except on Wikipedia and other wikis. So they are leery of putting the free fonts first in the font family list.

So the Wikipedia user agent would go down the font family list until it hits the free fonts at the end (such as Liberation Sans). Since there would be no font substitutions allowed. Is this possible?

There would always be an available font wherever the SVG image is posted as long as the last thing listed in the font-family list is sans-serif. --Timeshifter (talk) 20:19, 18 July 2023 (UTC)

@Timeshifter: I think it's not possible, except by converting the text to paths (which no longer allows it to be edited). What would you expect to happen if the font is unavailable on the reader's computer if the font substitution is disallowed? No text at all or little rectangles?

If only one font is listed in font-family and is unavailable, it defaults to Liberation Serif in the thumbnail,^[1] and the browser's default font when viewed directly. Cheers, cmɢʟee⎆τaʟκ 04:33, 19 July 2023 (UTC)

cmglee. sans-serif would always be available if all the other fonts were unavailable. I guess if this idea is not possible now, maybe Wikimedia developers could create something that could be added to SVG code to block font substitution (except for sans-serif). --Timeshifter (talk) 06:26, 19 July 2023 (UTC)

Then why not just list the font you want then sans-serif, so it uses sans-serif if your font is unavailable? cmɢʟee⎆τaʟκ 08:57, 19 July 2023 (UTC)

That is basically what OWID is doing. A font for each operating system: Mac (e.g. Helvetica), Windows (e.g. Arial), Linux and Wikimedia (e.g. Liberation Sans), and sans-serif. I don't know what Lato is for.

Problem is that it all depends on the font substitutions. It must have changed. --Timeshifter (talk) 09:34, 19 July 2023 (UTC)

@Timeshifter: I added Liberation Sans to my font-family list in c:file:most_perfect_magic_square_construction.svg and still get

“

Warning* You appear to have specified a font that does not exist on Wikimedia wikis.

”

on http://svgcheck.toolforge.org/index.php due to the presence of Helvetica and Arial; removing them makes the warning disappear. As Helvetica and Arial are needed for Mac and Windows, I think we need to live with the warning. Cheers, cmɢʟee⎆τaʟκ 00:33, 24 July 2023 (UTC)

cmglee. I don't think I am getting any warnings here for that SVG image: c:Commons:Commons SVG Checker. But it is not rendering the image. Though, I don't think it ever renders the image of files I have tested there. Could you check the file there? I don't think it is able to read your font-family list for that file. It is in a different format from the font-family list in your US map template:

 <g font-family="Liberation Sans,Nimbus Sans L,Arial,Helvetica,sans-serif" font-size="18" letter-spacing="-1px" text-anchor="middle" stroke-width="0.2" stroke-linejoin="round">

When I run your template SVG map through it I see a detailed breakdown of the fonts. Template:

Commons: File:Template map of U.S. states and District of Columbia.svg

Wikipedia:SVG_help#font-family property says it is good practice to list fonts for Windows, Mac, Linux, etc.. --Timeshifter (talk) 03:05, 24 July 2023 (UTC)

Commons SVG Checker has been broken for months and shows a cartoon insect, so I currently use https://svgcheck.toolforge.org/index.php though it ignores font settings. Is there a reason to specify Nimbus Sans L? cmɢʟee⎆τaʟκ 18:45, 24 July 2023 (UTC)

cmglee. c:Commons:Commons SVG Checker seems to be working fine for me. Except for showing the image. See the previous section. It has info about Nimbus Sans L problem. Here is what I get when I run your SVG map template through Commons SVG Checker:

Results
File size is: 47878 bytes Successfully parsed XML structure. HINT in <g>: Font type Arial is not available in Wikimedia software. It has been substituted with a metric equivalent. It will be rendered with minor differences by Wikimedia's SVG renderer. See https://commons.wikimedia.org/wiki/Help:SVG#fallback for details. WARNING in <g>: Font type Helvetica is not available in Wikimedia software. It will be rendered with minor differences by Wikimedia's SVG renderer. See https://meta.wikimedia.org/wiki/SVG_fonts for details.

--Timeshifter (talk) 21:57, 24 July 2023 (UTC)

This is expected. Note that they are hints or warnings and not errors. Cheers, cmɢʟee⎆τaʟκ 19:17, 27 July 2023 (UTC)

cmglee. How come I don't get those hints about the same fonts when I run this image through the same file checker?:

c:File:Most perfect magic square construction.svg

That image has those same fonts listed in the font-family list. --Timeshifter (talk) 21:29, 27 July 2023 (UTC)

As far as I know, fonts can be specified in several ways:

font-family="Liberation Sans,Arial,Helvetica,sans-serif" attribute in an SVG tag
style="font-family:'Liberation Sans',Helvetica,Arial,sans-serif;" attribute in an SVG tag
.main { font-family:'Liberation Sans',Helvetica,Arial,sans-serif; } in a style tag
.main { font-family:'Liberation Sans',Helvetica,Arial,sans-serif; } in an external style sheet

(I tend to use the first and third methods). It seems the tool evaluates the first method's list but ignores the others'.

Cheers, cmɢʟee⎆τaʟκ 21:46, 27 July 2023 (UTC)

Those four, plus another four which are the same except that font-family is replaced by font - this shorthand is part of both SVG 1.1 and CSS 1.0. --Redrose64 🌹 (talk) 21:19, 28 July 2023 (UTC)

Thanks, @Redrose64: didn't realise one could do that. Is font-family or font recommended? cmɢʟee⎆τaʟκ 01:47, 29 July 2023 (UTC)

Neither, and both. There are pros and cons to using shorthand properties. For instance, they allow one or more property values to be specified in the same declaration, thus saving space. So you can write e.g. font: 'Liberation Sans',Helvetica,Arial,sans-serif 15px bold and that would be equivalent to font-family: 'Liberation Sans',Helvetica,Arial,sans-serif; font-size: 15px; font-weight: bold. However, there is a catch: if you use both together, e.g. font: 'Liberation Sans',Helvetica,Arial,sans-serif 15px bold; font-family: serif, the font family specified by font: will be overridden by the one specified by font-family - it's as if you had written font: 15px bold; font-family: serif. More at SVG 1.1 spec and CSS 2.1 spec. CSS provides several shorthand properties (such as background:, border:, margin:, padding: and so on), whereas SVG provides just two - the other is marker:. --Redrose64 🌹 (talk) 23:19, 29 July 2023 (UTC)

Superb explanation. I've learnt something new today! Thanks, cmɢʟee⎆τaʟκ 12:58, 31 July 2023 (UTC)

References

^ commons:Help:SVG#Font_substitution_and_fallback_fonts

File size is too big and thumbnail in File:Test.svg shows my map with a black color

Hi everyone, I wanted to reach out to ask for help on an svg map I am trying to upload to Commons. It is a map I made using Inkscape about different proposed subdivisions of my country, Bolivia. The problem I am having is when I use the Commons:Commons SVG Checker, it says "Successfully parsed XML structure" but also "Omited rendering of SVG because the file size limit has been reached", so I can't preview how well the SVG file I want to upload will look. The file size is approximately 8,000,000 bytes, so I think I have to first make the file size smaller in order to upload it to Commons, but I really don't know how. I based my map on the c:File:Bolivia admin 2019.svg map that is already uploaded to Commons and has a similar size to the one I am trying to upload, which confuses me a little. In summary, is the size of the file the problem? If so, how can I fix it?

It is my first time uploading an SVG file, so I'm sort of lost here. Thank you in advance for your time and help. Ruditaly (Talk) 15:01, 18 July 2023 (UTC)

8 MB shouldn't be a problem; we have much larger SVG files. Try uploading it to https://svgcheck.toolforge.org/index.php to see if it works or reports any errors. Cheers, cmɢʟee⎆τaʟκ 15:50, 18 July 2023 (UTC)

Yes, c:COM:MAXSIZE suggests that much larger files may be uploaded. However, earlier today there was a problem with some servers (see Wikipedia:Village pump (technical)#Slow), and this certainly affected the display of some images, so it may also have affected uploads. --Redrose64 🌹 (talk) 15:52, 18 July 2023 (UTC)

@CmgleeThank you for your answer. For some reason when I click on "Check this SVG" after having selected my svg map, it starts loading as I think it normally would and then it finishes loading but goes back to the original site, meaning it doesn't show any information or report, but rather it removes the svg file that was selected when clicking on Browse. I'm thinking if maybe the text font in the map is the problem, since it does contain a couple of word written in the font "sans-serif". Do you think this may be the problem? Thanks again in advance for your kind help. Ruditaly

(Talk) 10:02, 10 August 2023 (UTC)

@Ruditaly: I also return to the https://svgcheck.toolforge.org page after a few seconds without any error message when I upload your File:Test.svg. It could be too complex and the tool crashed.

In Inkscape 1.2.2, I saved it as Plain SVG and the file size did not decrease, so presume it's already plain. I then tried Optimized SVG. The file decreased to 8050 KB and now looks different in a browser. On SVG Check, I got an error "That file doesn't appear to be an SVG file." I'm afraid I don't know how to fix the problem and can only suggest reducing the complexity of the paths (I note that there are no embedded images). cmɢʟee⎆τaʟκ 13:21, 10 August 2023 (UTC)

P.S. In your original File:Test.svg, I replaced all

 d=".*?"

with

 d="M0,0V99H99"

and the file rendered. rsvg could simply have run out of memory. It seems 1079 paths' d attributes accounted for 9319754 bytes: over 8 KB per path. Could they be simplified? cmɢʟee⎆τaʟκ 13:28, 10 August 2023 (UTC)

P.P.S. Inkscape's Path > Simplify shrunk the file to 823 KB and SVG Check passes, but the shapes no longer abut. I'll leave it to someone to propose a better decimation tool. cmɢʟee⎆τaʟκ 13:33, 10 August 2023 (UTC)

@CmgleeThanks again for your help. What is rsvg? You probably saw it on File:Test.svg that I removed the letters and words from the svg file. However, it did not help with rendering the colors and the map still appears all black on Wikicommons. It is really weird and can't understand why that might be. The size is already within the limits and there are no words or fonts that may cause problems. Ruditaly

(Talk) 14:01, 10 August 2023 (UTC)

rsvg is the software that converts the SVG filter into the PNG thumbnails shown on articles etc.

I didn't investigate why it appears black and can suggest removing most of the paths to see if the colours return. If so, add them back to see when it stops working. rsvg might have run out of memory as it did with File:Apollonian gasket symmetrical 3.svg. Good luck! cmɢʟee⎆τaʟκ 15:07, 10 August 2023 (UTC)

Need to add state names or abbreviations to this US map

See: Commons:File talk:ACA Medicaid expansion.svg

Commons:File:ACA Medicaid expansion.svg

Can someone make that SVG map with state names or abbreviations? --Timeshifter (talk) 00:52, 19 August 2023 (UTC)

Done @Timeshifter: In the future, you may get more help by asking on Wikipedia:Graphics_Lab/Map_workshop – this page is more for SVG rendering bugs. Cheers, cmɢʟee⎆τaʟκ 17:20, 19 August 2023 (UTC)

Thanks cmglee! I replied at Commons:File talk:ACA Medicaid expansion.svg. --Timeshifter (talk) 19:49, 19 August 2023 (UTC)

Why are long OWID SVG map captions being overlapped by logo again?

Tracked in Phabricator
Task T344564

Note: I posted here and never got a response in over a week: Commons:Graphics village pump. I deleted my post there. --Timeshifter (talk) 12:54, 17 July 2023 (UTC)

I thought this was solved. See Feb-Mar 2023 thread:

Wikipedia:Graphics Lab/Illustration workshop/Archive/Feb 2023#File:World map of total confirmed COVID-19 deaths per million people by country.svg

Our World in Data (OWID) maps are using the same font-family CSS from when the problem was first solved:

style="font-family:Lato, &#x27;Helvetica Neue&#x27;, Helvetica, Arial, &#x27;Liberation Sans&#x27;, sans-serif;"

What has changed? How can the problem be fixed? See also:

Wikipedia:SVG_help#font-family property

I see this list of substitutions:

Commons:File:SVG Text Font Test.svg

It is here: Commons:Help:SVG#Font substitution and fallback fonts. Are fallback fonts with wide character spacing being substituted for fonts with narrower character spacing? DejaVu Sans has wider characters and/or spacing than the other Sans substitutions. Is it being substituted?

Also, is there any reason OWID can't use regular quotes like this around the multi-word font names?:

style="font-family:Lato, 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;"

Are the single quotes necessary at all? Are the commas enough to separate the font names?

See older confusing thread from Dec 2021:

Wikipedia:Village pump (technical)/Archive 194#"Our World in Data" logo overlapping dates in SVG maps, but not PNG maps

See some of the maps in question:

They are all using the same font family list. --Timeshifter (talk) 12:54, 17 July 2023 (UTC)

http://stackoverflow.com/a/13752149 states

“

You can always put a specific font family name in quotes … Only the CSS-defined generic font family names like sans-serif must be written without quotes. … a font name consisting of space-separated names such as Times New Roman need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”

”

Cheers, cmɢʟee⎆τaʟκ 15:15, 17 July 2023 (UTC)

Thanks cmglee. So since OWID fonts only have A-Z text in their names, then this would work fine on Wikipedia and elsewhere?:

style="font-family:Lato, Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif;"

The spec link is this:

https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family

Can OWID's logo overlap problem on Wikimedia be solved by putting Liberation Sans first in that font-family list? --Timeshifter (talk) 08:18, 18 July 2023 (UTC)

Re "this would work fine", I think so. Re "OWID's logo", no idea. Give it a try! cmɢʟee⎆τaʟκ 15:48, 18 July 2023 (UTC)

cmglee. *c:Commons:Commons SVG Checker. When I run one of the problematic OWID files through it I get this message:

"WARNING: XML declaration not found and is strongly recommended"

How is that fixed? Can someone look at the SVG code for this file?:

File:World map of total confirmed COVID-19 deaths per million people by country.svg

When I run the SVG template map through it I get this:

"Nimbus Sans L is not available in Wikimedia software."

So I will remove it from the font-family list.

Removing "Nimbus Sans L" from a map upload to the Shoutwiki wiki solved a major problem there. It got rid of the little squares that were substituted for characters. So now the map SVG is:

 <g font-family="Liberation Sans,Arial,Helvetica,sans-serif" font-size="18" letter-spacing="-1px" text-anchor="middle" stroke-width="0.2" stroke-linejoin="round">

--Timeshifter (talk) 04:09, 24 July 2023 (UTC)

The XML declaration is the line

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

and it goes before the <!DOCTYPE ...> (if one is present) or the <svg ...>} (if not). Some SVG processors tolerate its absence, but not all, so it's best included. Mentioned often in the SVG 1.1 spec (see e.g. chapter 5 Document Structure), it's not described there but at section 2.8 Prolog and Document Type Declaration of the XML spec. --Redrose64 🌹 (talk) 20:39, 24 July 2023 (UTC)

Redrose64 and others. I ran this map

File:World map of total confirmed COVID-19 deaths per million people by country.svg

through this validator:

https://validator.w3.org/#validate_by_uri

There was a long list of results. Here is a direct link.

Does any of it make sense to you? What is important? I intend to contact the webmaster at OWID with what we have figured out so far. --Timeshifter (talk) 10:35, 27 July 2023 (UTC)

Aklapper at T344564 noted something major that we all missed. The title of the task is his after he changed it from my original title, "Change in SVG font substitution is messing up images", to the more specific "Font substitution for SVG file to PNG thumbnail replaces serif with sans-serif font".

The title (the very top line in the image) is supposed to be a serif font. It is that when rendered outside MediaWiki. But MediaWiki makes it into a sans-serif font.

I think MediaWiki is ignoring the SVG file's font-family lists for both serif and sans-serif fonts. And then substituting a wider sans-serif font such as DejaVu Sans. --Timeshifter (talk) 03:57, 20 August 2023 (UTC)

Regarding the "long list of results", the problem here is that you are attempting to validate the file description page, not the image that it relates to. Try this link instead, which returns one info entry and two errors.

As for the comment at phab:T344564#9104543 about "ERROR in <style>: It will not be rendered properly by Wikimedia's SVG renderer. As workaround add attribute type="text/css" to <style>. See https://phabricator.wikimedia.org/T68672 for details.", this means that you should use <style type="text/css"> everywhere that you have used a plain <style> tag. It's documented at c:Help:SVG#Stylesheet as a known quirk of librsvg. --Redrose64 🌹 (talk) 11:01, 20 August 2023 (UTC)

Thanks again, Redrose64. I put that info in phab:T344564#9104543. I also added the results from https://validator.w3.org/#validate_by_upload for the latest map file (the one that can't be uploaded to the Commons).

cmglee, Redrose64, and others. It would be nice if someone who knew what they were doing could fix all the errors in that file and try uploading it again. I don't understand a lot of this stuff since I am not an SVG image creator. I have edited the user-editable parts of some SVG files created by cmglee. That's about it.

I am wondering if fixing all these errors fixes the main problem at phab:T344564 of incorrect font substitution. If it does, we can contact the OWID webmaster and point out the problems and solutions. So that his SVG files work correctly on Wikipedia. --Timeshifter (talk) 20:00, 20 August 2023 (UTC)

Before anyone tries to "fix all the errors in that file", we should consider how the file was generated. If automatically by OWID software, someone should fix that instead. Otherwise, the next time another file or update is generated, one will have to go through the whole process again. Cheers, cmɢʟee⎆τaʟκ 22:15, 20 August 2023 (UTC)

The original Wikipedia fix described in the OWID Github thread happened after I contacted them. So if we figure out the problem we can point them to the solution, and let them fix the software. Contact:

https://ourworldindata.org/about#contact

OWID also makes available their free open-source software for others to use:

https://ourworldindata.org/owid-grapher

So we want that to be Wikimedia compatible too.

cmglee, Redrose64, and others. I sent an email to info@ourworldindata.org and pointed them to phab:T344564. --Timeshifter (talk) 05:49, 23 August 2023 (UTC)

Missing circular arcs

The circular arcs in this SVG's thumbnail are not rendered. They were visible when I uploaded the file in 2020. Shift-refresh and action=purge didn't fix the issue. Can someone please check? Thanks, cmɢʟee⎆τaʟκ 18:50, 21 August 2023 (UTC)

Done Seems to be working now. cmɢʟee⎆τaʟκ 12:27, 23 August 2023 (UTC)

A mistake in a SVG File

Hello,
there is a mistake in File:Al Nassr FC.svg, the originale Logo in the website team doesn't look like the same.
look the file on the right. Can anyone check it? Thanks. File:Logo Al-Nassr.png-- أيوب (talk) 16:14, 29 August 2023 (UTC)

The original logo on the team website is https://siteapi.alnassr.sa/files/settings/2022-09/16/sVXvhuCPwi32RnUpf9k9ztz3dEMyW6LL.png and I don't see what the problem is with File:Al Nassr FC.svg. --Redrose64 🌹 (talk) 17:58, 29 August 2023 (UTC)

@Redrose64 first

Thank you for reply,
i hope you keep the file bcs SVG is better in logos,but the problem in SVG file is there up in the crown a yellow collor that doesn't exist in the original logo.-- أيوب (talk) 18:34, 29 August 2023 (UTC)

This extra yellow is the part from the <g fill="#ffd02d"> tag to the next </g> tag and all of the <path ... /> tags that they enclose, inclusive. If removed, the crown shows as a solid blue. --Redrose64 🌹 (talk) 22:33, 29 August 2023 (UTC)

File:Coat of arms of Urquhart of Urquhartt.svg

I uploaded File:Coat_of_arms_of_Urquhart_of_Urquhartt.svg to commons but the shading of the dogs does not display on page, it does however display if you click on image and then click again to zoom in, how can I correct this? I tried putting object to path, but this did not help. Yours ever, Czar Brodie~commonswiki (talk) 22:45, 4 September 2023 (UTC)

I haven't looked at the file, but when you're clicking "to zoom in", that means the SVG is being displayed directly in your browser without the involvement of Wikimedia software, while the other view is the SVG being rendered to raster by Wikimedia. AnonMoos (talk) 00:54, 5 September 2023 (UTC)

If I understand correctly the problem is with wikimedia. Is there a way round this? To correct the file so Wikimedia understands it? Czar Brodie~commonswiki (talk) 19:54, 6 September 2023 (UTC)

Wikimedia has nothing to do with it. AnonMoos is probably thinking of MediaWiki, but that also is not the culprit. The MediaWiki software serves the pages and images, but the image that is served is a PNG conversion from the SVG original, and the conversion is performed by librsvg. --Redrose64 🌹 (talk) 21:35, 7 September 2023 (UTC)

A little passive aggressive are we? I meant "the software running on Wikimedia sites", an allowable synecdoche. The important thing is to distinguish when the SVG is being rendered in the user's own browser, and when it's being rendered by the site's software. By the way, I looked at the SVG in one browser (not the most up to date) and it looked much the same as in the Wikimedia-served PNG... AnonMoos (talk) 10:17, 8 September 2023 (UTC)

problem solved, I redrew the dogs and manually filled in the colour variations without any fancy group shading. Yours ever, Czar Brodie~commonswiki (talk) 20:33, 16 September 2023 (UTC)

SVG logo rendering issue

This file File:Ele.me logo.svg is not rendered correctly on the page. Can someone help me fix it? Thanks. Larryasou (talk) 08:35, 21 September 2023 (UTC)

@Larryasou: The fourth and fifth parameters (large arc and sweep flags) for the arc (a or A) command in the path tag must be delimited, e.g. by spaces or commas, to render correctly in rsvg. For instance,

a7.147 7.147 0 011.77-1.306

must be replaced by

a7.147 7.147 0 0 1 1.77-1.306

– see https://phabricator.wikimedia.org/T217990 for its Phabricator ticket.

Cheers,
cmɢʟee⎆τaʟκ 23:57, 21 September 2023 (UTC)

SVG cropped out on Media Viewer

At File:Cricket, 2022 Asian Games.svg, which I extracted from pdf using Inkscape, why when viewing through Media Viewer the ball on the right look cropped out. It looks fine when clicking "Original file" at that file page. Hddty (talk) 13:54, 18 September 2023 (UTC)

When you click on "Original file", that means the SVG is displayed directly in your browser, not through Wikimedia (see section above). AnonMoos (talk) 19:28, 18 September 2023 (UTC)

How to fix this? Hddty (talk) 00:49, 19 September 2023 (UTC)

Done, @Hddty: I updated the SVG's width to equal its height, and its viewBox accordingly to centre the image, as in the thumbnail. cmɢʟee⎆τaʟκ 23:02, 20 September 2023 (UTC)

@Cmglee Thanks. Why is the PNG rendering of SVG not exact? And so to fix this problem, width and height should be equal? Hddty (talk) 09:34, 22 September 2023 (UTC)

@Hddty: Partly due to the Wikimedia thumbnail generator not exactly conforming to SVG specifications, partly that bits of the specification are not precise enough and are so open for interpretation.

I had no strong reason for making them equal. I just needed to make the image wider to account for the differences above. cmɢʟee⎆τaʟκ 12:26, 22 September 2023 (UTC)

Text issues

I've created c:File:2022 Australian Senate Results.svg and there's been so many issues with the text in the file, and I don't understand what's going wrong as it's only some of the text, and in the text that the issues are affecting, it's not consistent. Please compare the SVG to the png file and I would love some help with what's causing all the text issues.

Geordannik (talk) 08:21, 15 October 2023 (UTC)

What issues, specifically? --Redrose64 🌹 (talk) 09:45, 15 October 2023 (UTC)

It seems much of the text is misaligned. I'd hesitate to blame it on https://phabricator.wikimedia.org/T217990 as it looks off on Firefox too, though it seems ok on Chrome.

@Geordannik: I suggest fixing it on whatever editor you used to work on Firefox first. We can then discuss rsvg issues. Cheers, cmɢʟee⎆τaʟκ 20:34, 15 October 2023 (UTC)

I'll be honest @Cmglee, I manually coded the SVG using Visual Studio Code, I didn't use an editor at all. But I can also see the issues in firefox.

@Redrose64 A lot of text is completely misaligned and misplaced.

Geordannik (talk) 21:11, 15 October 2023 (UTC)

Well done! Few people code SVG manually (like both of us). Can you try moving text-anchor from tspan into their text tags? cmɢʟee⎆τaʟκ 21:37, 15 October 2023 (UTC)

I'm confused because the main title "2022 Australian Senate Election" and the subtitle "40 of 76 seats up|39 for majority" are both almost identical except for position, bold and italic, and the subtitle is completely misaligned.

Geordannik (talk) 21:20, 15 October 2023 (UTC)

@Geordannik: I've never come across this difference between browsers: In your code

        <text
            x="80"
            y="120"
            style="fill: #000000; font-size: 70px; font-weight: bold"
            >2022 Australian Senate Election</text>
        <text 
            style="fill: #000000; font-size: 80px; font-style: italic"
            x="160"
            y="360"
            transform="scale(0.5)"
            >
            40 of 76 seats up|39 for majority
        </text>

Firefox first downscales the text and then places it at x="160" whereas Chrome places it at 160 halved i.e. 80. One may instead do

        <text 
            style="fill: #000000; font-size: 80px; font-style: italic"
            x="0"
            y="0"
            transform="scale(0.5) translate(160,360)"
            >
            40 of 76 seats up|39 for majority
        </text>

or similar. Does that help? cmɢʟee⎆τaʟκ 21:44, 15 October 2023 (UTC)

Another suggestion - which I have found makes a difference in the past - is to eliminate unnecessary whitespace between the > of an opening text or tspan tag and the < of the matching closing tag. So for the last example above, you would use

        <text 
            style="fill: #000000; font-size: 80px; font-style: italic"
            x="0"
            y="0"
            transform="scale(0.5) translate(160,360)"
            >40 of 76 seats up|39 for majority</text>

I think that this is because the user agent needs to be clearly informed which character the x="0" y="0" applies to - the figure 4, or the spaces and newlines preceding it. --Redrose64 🌹 (talk) 10:48, 17 October 2023 (UTC)

File description page defaults to en-simple though en language is present

CC @Glrx: @Knotimpressed:

Following this exchange, I've uploaded a version of with en systemLanguage. However, File:Generation_timeline.svg still defaults to en-simple, even after purging the cache and shift-refreshing my browser.

Can an expert please look into this?

Thanks,
cmɢʟee⎆τaʟκ 21:11, 24 October 2023 (UTC)

Bad text rendering

Hello, I have a problem with the rendering of an image I created about the Argentine presidential elections (c:File:Argentine 2023 General Election Map.svg), it looks pretty bad. Actually the problem is with all the ones I have created that include text, the solution I give is to convert it into a shape but I would like to understand why it looks so bad since I want to leave the text like this. Also the SVG file seems to have a problem with the position of the text appearing out of place, I don't know if it is the way I export my work. I appreciate anyone who can help me. Goldsztern (talk) 03:40, 26 October 2023 (UTC)

@Goldsztern: Please see #Misaligned_text. Good luck! cmɢʟee⎆τaʟκ 00:01, 31 October 2023 (UTC)

fill-opacity on pattern fill has no effect

In this SVG, I have a group with id="card" containing a shape with a pattern fill. I wish to turn the pattern fill on and off with a CSS selector. When this group is used, if its class="up", the fill-opacity is set to 0.

As it works on Firefox and Chrome but not on rsvg, can someone please propose a simple solution or workaround?

Thanks
cmɢʟee⎆τaʟκ 22:58, 16 November 2023 (UTC)

Instead of

<feColorMatrix type="matrix" values="1,0,0,0,0 0,1,0,0,0 0,0,1,0,0 0,0,0,0.3,0"/>

try

<feColorMatrix type="matrix" values="1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.3,0"/>

that is, replace spaces with commas. --Redrose64 🌹 (talk) 23:17, 16 November 2023 (UTC)

Thanks, @Redrose64: the problem persists even without the filter. Cheers, cmɢʟee⎆τaʟκ 09:54, 17 November 2023 (UTC)

Done: I've worked around the bug using color and fill="currentColor". cmɢʟee⎆τaʟκ 22:45, 17 November 2023 (UTC)

Move right side of text box

See: File:World Population Prospects.svg

The right-most word "interval" in the text box is missing the last letter due to it being cut off by the right side of the box. That right side needs to be moved over a bit.

It is the same at the source page:

https://population.un.org/wpp/Graphs/Probabilistic/POP/TOT/900

--Timeshifter (talk) 22:11, 24 November 2023 (UTC)

Misaligned text

Fixed Fs

My file File:Butafenacil_synthesis.svg on Commons has the misaligned text problem mentioned above. I'm not competent to fix it. As you can see from the thumbnail, two of the F symbols in the first compound are moved right compared to the original. Please can someone apply one of the work-arounds. Mike Turnbull (talk) 16:01, 4 December 2023 (UTC)

@Michael D. Turnbull: As before, please see #Misaligned_text. As it's just two Fs in this case, I'll fix it for you. cmɢʟee⎆τaʟκ 20:16, 4 December 2023 (UTC)

Done cmɢʟee⎆τaʟκ 20:29, 4 December 2023 (UTC)

Non-breaking spaces at the start of `text` are ignored

Note: this is *NOT* the infamous recent text-alignment bug.

In this thumbnail, it can be seen that the text labels are left aligned. Some should be indented as in a tree as I prefixed their labels with  . This non-breaking space has effect when used elsewhere but it seems not here.

Is this a known rsvg bug?

Thanks,
cmɢʟee⎆τaʟκ 16:14, 11 December 2023 (UTC)

P.S. Curiously, the output of http://svgcheck.toolforge.org/index.php does indent them. cmɢʟee⎆τaʟκ 16:23, 11 December 2023 (UTC)

@Cmglee: I never heard of this bug before, maybe report it on https://gitlab.gnome.org/GNOME/librsvg/-/issues/ . — Johannes Kalliauer - contrib. 13:45, 25 December 2023 (UTC)

Thanks and welcome back online, @JoKalliauer: to report the bug, what version, platform etc should I specify on the ticket? Cheers, cmɢʟee⎆τaʟκ 15:06, 25 December 2023 (UTC)

FYI, I've worked around the bug by changing the x parameter instead of prefixing   in the second upload. cmɢʟee⎆τaʟκ

@Cmglee: Several thinks in my live changed: I worked a year at MIT, a university in Massachusetts, and now I recently switched to Bridge-Constrution (private Industry), back in Europe. I only checked Wikipedia/Commons, since I had some time. However I’m available upon request.

Since May this year Wikimedia is using librsvg 2.44, as described at c:librsvg_bugs.

Two years ago I knew all ~96 tasks in phab:tag/wikimedia-svg-rendering. Reporting there is imho information for Users like us, but not for development, and the librsvg-version is always the one Wikimedia uses.

On https://gitlab.gnome.org/GNOME/librsvg/-/issues/ are thousends of bugs, I hardly know any of them. librsvg 2.44 is outdated (and unmaintained) since 2019, and afaik much development since then happend, so many bugs will be repaired in the current librsvg 2.56 version. — Johannes Kalliauer - contrib. 08:57, 27 December 2023 (UTC)

Thanks and congratulations on your placements, @JoKalliauer: without installing librsvg, is there a way to test whether the bug exists on v2.56? If it doesn't, there doesn't seem much point reporting it. Cheers, cmɢʟee⎆τaʟκ 16:05, 28 December 2023 (UTC)

P.S. It also happens with non-breaking spaces at the end of a string using text-anchor="end" as in this SVG. In this case, it's not possible to indent using x or dx as the width of a character in monospace font is unknown. The workaround using dots is unsatisfactory as the artifacts are distracting. At least if the tspan alignment bug was absent, one could use a tspan with display="none" or opacity="0" but alas!

RFC on Commons re technical needs survey

I've just learned about a Technical needs survey at Wikimedia Commons. I'm not expert enough to articulate the ongoing SVG text rendering problem on WMedia projects, but I thought someone here might be able to use that forum to press for progress in that direction. —RCraig09 (talk) 05:55, 20 December 2023 (UTC)

@RCraig09: Thanks for bringing it to attention. I've added commons:Commons:Requests_for_comment/Technical_needs_survey#Fix_rsvg_text_alignment_regression. Everyone please feel free to amend or add to it. Cheers, cmɢʟee⎆τaʟκ 05:55, 21 December 2023 (UTC)

Thanks, cmglee. I'm hoping for more graphists to comment there, to gather more attention to fix the bug or migrate to a text renderer that works properly. —RCraig09 (talk) 20:06, 29 December 2023 (UTC)

`mix-blend-mode` not working?

Tracked in Phabricator
Task T341761
Invalid

Do you see the problem now?

How it's supposed to look

Hello! I recently tried vectorizing the logo of Sunflower, a really cool tool by a really cool person called Fastily, and I used mix-blend-mode="multiply", and it seemed to work in my SVG viewer, but to my shock it doesn't render properly on Commons/Wikipedia.

Any suggestions? QuickQuokka ^{[⁠talk • contribs]} 19:20, 5 December 2023 (UTC)

Comment: I also tried doing it in a <style> tag and in a style property,. but to no avail. QuickQuokka ^{[⁠talk • contribs]} 19:22, 5 December 2023 (UTC)

@QuickQuokka: mix-blend-mode is not a valid attribute for the ellipse element in SVG 1.1, and I don't think that it's valid in SVG 2.0 either - where did you hear about it? --Redrose64 🌹 (talk) 20:23, 6 December 2023 (UTC)

@Redrose64: Looking back on it I just assumed it would work from my knowledge of CSS, and in my SVG viewer/editor (Inkscape), it looked like it worked, but only when I uploaded it to here did I notice that it in fact, doesn't..

Is there a solution? Should I just make the intersections into a separate path? QuickQuokka ^{[⁠talk • contribs]} 20:36, 6 December 2023 (UTC)

It appears that the mix-blend-mode: property is only described in Compositing and Blending Level 1, which is a W3C Candidate Recommendation; as such, it is not yet a formal part of CSS. Even so, librsvg is very picky about CSS: you may only use those properties and values which are explicitly described either in SVG 1.1 or CSS Level 1. Although the latter is officially superseded in its entirety by CSS 2.0, not all CSS 2.0 features are recognised by librsvg.

As a syntactical note, in <ellipse mix-blend-mode="multiply" />, mix-blend-mode is an attribute to the ellipse tag; in <ellipse style="mix-blend-mode:multiply" />, mix-blend-mode is a property within the style attribute. You need to use the latter form if something is defined in CSS Level 1 but not in SVG 1.1. --Redrose64 🌹 (talk) 21:06, 6 December 2023 (UTC)

@Redrose64: As I said, I tried to add it in a style property and style tag, but it still didn't work.

Look at the file history. QuickQuokka ^{[⁠talk • contribs]} 22:04, 6 December 2023 (UTC)

Please get the terminology correct. There is no such property as 'style'. If you have a contruct like <ellipse style="..." />, style is an attribute. If you have a contruct like <style>...</style>, <style> is an opening tag; </style> is a closing tag; and the pair together with the content that they enclose comprise a style element.

Anyway, the image seems to have been deleted. --Redrose64 🌹 (talk) 23:17, 7 December 2023 (UTC)

Comment: This thread made me vet an update to File:CMYK_screen_angles.svg claiming to use "multiply" blend mode by @Quark67:

Neither its thumbnail nor the SVG file viewed directly in Firefox (Chrome and Edge are fine) blend the dots correctly.

I'd thus advise not using this feature until it is more widely supported.

Cheers,
cmɢʟee⎆τaʟκ 07:24, 8 December 2023 (UTC)

Worked around the issue by overlaying the shapes at fill-opacity="1" with another copy at fill-opacity="0.5". cmɢʟee⎆τaʟκ 14:12, 2 January 2024 (UTC)

@QuickQuokka: FYI: phab:T341761 is related to this issue. — Johannes Kalliauer - contrib. 13:40, 25 December 2023 (UTC)

Coastline map

Hi! I tried to emulate the coastline that most SVG maps in Wikipedia use, like in c:File:Alsace in France.svg with my own map c:Zones de Tarragona Part Alta.svg. How I should do it?
Thank you, KajenCAT (talk) 14:23, 8 January 2024 (UTC)

@KajenCAT: Do you mean replacing the thick grey lines adjacent to the sea (cyan) with thin blue ones? Locator SVG maps on Wikipedia usually have the land as one shape with its stroke appropriately set, and the borders as other shapes. If you instead have the regions as separate shapes, you could instead use SVG filter effects. See File:Risk_game_board.svg and File:Taipan_map.svg for examples. Good luck, cmɢʟee⎆τaʟκ 16:34, 9 January 2024 (UTC)

Marker rendering

Hi all, long-time contributor back from a several-year hiatus. I tried uploading a diagram today here: File:Conjugate poles in s-plane.svg. You can see over on MediaWiki that it took quite a few attempts to get it right! One issue I had is that for some reason none of the markers rendered, so I had to convert them to paths. I'm a bit surprised by this since prior diagrams of mine (e.g. File:Current continuity in capacitor.svg) have rendered markers no problem. It also seems like the warning above about markers is out of date as the bug appears to have been fixed: https://phabricator.wikimedia.org/T97758.

Anyway, my question here is: what should I do to make sure my markers render properly and I don't have to keep converting them to paths?

Thanks – ♫CheChe♫ talk 21:02, 11 January 2024 (UTC)

Here is a further example where some arrowheads rendered (but incorrectly) and other arrowheads did not render at all: File:ForceDiagram.svg. I'm pretty sure these issues aren't shown in the preview thumbnails when uploading to MediaWiki because I never see them until after upload. – ♫CheChe♫ talk 12:47, 12 January 2024 (UTC)

@CheChe: As described on http://stackoverflow.com/a/16665510 , context-fill and context-stroke are in the SVG 2 draft specification and are not supported in SVG 1.1. The simplest solution is to open the file in a text editor and replace context-stroke with the intended colour (#4b81bf etc). Good luck! cmɢʟee⎆τaʟκ 14:40, 12 January 2024 (UTC)

P.S. Also note that the marker tags' orient="auto-start-reverse" is SVG 2-draft. http://stackoverflow.com/a/69306932 explains how to make an SVG 1.1-compliant file. cmɢʟee⎆τaʟκ 15:24, 12 January 2024 (UTC)

Thanks very much, I've give that a go! – ♫CheChe♫ talk 16:31, 12 January 2024 (UTC)

@CheChe: Also please note that the preview thumbnail is using your browser to render the SVG, the file hasn't hit our servers yet, so won't have been through librsvg. Therefore, it displays whatever your browser recognises regardless of whether librsvg can handle it or not. I have pointed out previously (see archives) that you need to restrict your SVG file to those elements, attributes and properties that are explicitly shown as valid in the SVG 1.1 spec or the CSS 1.0 spec. --Redrose64 🌹 (talk) 21:23, 12 January 2024 (UTC)

2023 AFC Asian Cup logo

Hi, The logo needs to be reduced and the text color adjusted As here. Thanks. -- أحمد 04 (talk) 00:21, 22 January 2024 (UTC)

@أحمد 04: This page is for help with bugs in Wikimedia's thumbnail generator. For help with general illustration requests, the illustration workshop. Cheers, cmɢʟee⎆τaʟκ 12:57, 22 January 2024 (UTC)

Sorry, Thanks. -- أحمد 04 (talk) 12:59, 22 January 2024 (UTC)

SVG image text selectability messed up by Wikipedia's image "preview"?

This is possibly a stupid question, but I'm not any kind of SVG guru as it relates to Wikipedia's SVG rendering.

I have an SVG I created with Draw.io and Inkscape that depicts the register architecture of the HP Saturn microprocessor here.

The problem is that Wikipedia's "preview" of the SVG results, in, I think, a scaled image being rendered which has *no selectable text.* Is there any way to get around this? If I click on the image "preview" and access my original SVG image ( here ) and then zoom in then the text *is* selectable, but I want it to be selectable without the reader having to go through this multi-step process which the average reader probably wouldn't engage in.

On another note, I ran the SVG file through three SVG validators and each spewed out a bunch of arcane errors and I have no clue as to what they mean -- I'm a casual SVG creator, mainly using Inkscape, and I don't directly edit SVG XML.

I have to note that even the Wikipedia SVG "previews" of the SVG images in the Wikipedia article on SVG images don't have selectable text. So, it may not be due to the errors reported in my SVG.

There is the option of using a wikitable but IMO it's ugly.

Jdbtwo (talk) 15:56, 22 January 2024 (UTC)

@Jdbtwo: Text is only selectable when viewing a true SVG file. When a SVG hosted either on Wikipedia or at Commons is displayed on a Wikipedia page, what you are seeing is a PNG rendition of thae original SVG. PNG files do not contain text.

Which SVG validators did you use? --Redrose64 🌹 (talk) 18:03, 22 January 2024 (UTC)

@Redrose64: I thought that Wikipedia might be generating a bitmap preview. This seems, to me at least, to be a design flaw in the Wikipedia code. SVGs are by their very nature scalable, so, if Wikipedia is generating the scaled PNG image just for UX reasons, why not just scale the original SVG?

Which SVG validators did you use?

The ones suggested at the top of this page. Jdbtwo (talk) 15:21, 23 January 2024 (UTC)

The second one throws several instances of

ERROR in <flowRoot> with id=flowRoot3015: Flow element not supported. It will not be rendered properly by Wikimedia's SVG renderer. See https://phabricator.wikimedia.org/T43424 for details.

This is covered at flowRoot does not appear above. Basically: the <flowRoot>...</flowRoot> element is not part of SVG 1.1, and so is not recognised by the librsvg utility, therefore, must not be used. --Redrose64 🌹 (talk) 20:40, 23 January 2024 (UTC)

I don't know if the culprit is Draw.io's "File->Export as->SVG..." or Inkscape. I think I suspect the former since Inkscape was designed to use SVGs from a very early stage.

I haven't seen the SVG in question having been rendered incorrectly on the mobile web or desktop web Wikipedia interface, but relatively recently the SVG which had previously been rendered correctly is not rendered correctly anymore on the iOS Wikipedia app -- it's rendered with a dark background and no shadow.

What should I do to avoid these errors? Just not use Draw.io ( which I'd prefer not to do)? I'd hate to have to manually edit the XML, but I will if it's the only option. Jdbtwo (talk) 15:38, 26 January 2024 (UTC)

May I suggest exporting an SVG file from draw.io? Open it in a text editor like Notepad, and search for flowRoot. If it is present, check if draw.io has a setting to export plain SVG or files without SVG 2 features. Good luck, cmɢʟee⎆τaʟκ 22:59, 27 January 2024 (UTC)

Re design flaw, these are several justifications for the design, if I remember correctly:

SVGs vary tremendously in size: detailed maps may be tens of MB, wasting a lot of bandwidth to show a small thumbnail. PNG thumbnails tend to be more consistent: a few to tens of KB for typical sizes.
Older browsers did not support SVG (likely no longer relevant).
While rsvg has many bugs, once generated, one can be assured on how it will appear in most browsers. Support for advanced SVG features vary between browsers.

Cheers, cmɢʟee⎆τaʟκ 09:56, 25 January 2024 (UTC)

Requesting more Mario emblems

I'm asking for someone to create new emblems relating to significant Mario characters, specifically those of Princess Daisy, Bowser and Yoshi. Since there's already emblems on the respective articles for Mario, Luigi, Wario and Waluigi I hope this is justified. This link to a fan wiki should be a quick reference as to what the emblems should look like in particular. Carlinal (talk) 19:43, 4 February 2024 (UTC)

@Carlinal: This page is for help with bugs in Wikimedia's thumbnail generator. For general illustration requests, please ask at Wikipedia's or Commons's illustration workshop. Cheers, cmɢʟee⎆τaʟκ 14:54, 5 February 2024 (UTC)

Thank you! :3 Carlinal (talk) 18:01, 5 February 2024 (UTC)

[1] s:Help:SVG#Font_substitution_and_fallback_fonts

[1]