See https://commons.wikimedia.org/w/index.php?title=Commons:Graphic_Lab/Illustration_workshop&action=historysubmit&type=revision&diff=384451752&oldid=384399641&diffmode=source. The SVG renders correctly when viewed from a local source, but not when viewed on Commons. According to User:Pbrks this is a longstanding problem. I found some tasks on Phabricator that have similar descriptions but none that clearly describe the same phenomenon.
Description
Description
Event Timeline
Comment Actions
For reference, see the file history of https://commons.wikimedia.org/wiki/File:Wikimedia_Caf%C3%A9_logo_in_plain_SVG_format.svg, and compare the rendering of the first version of the file to https://commons.wikimedia.org/wiki/File:Wikimedia_Caf%C3%A9_logo_in_plain_PNG_format.png.
Comment Actions
Hi @Pine, thanks for taking the time to report this!
Please always summarize 1) a list of clear steps to reproduce, 2) actual outcome, 3) expected outcome when creating a Phabricator task. Please see https://www.mediawiki.org/wiki/How_to_report_a_bug - thanks.
The SVG renders correctly when viewed from a local source, but not when viewed on Commons.
I do not know what "viewed from a local source" means and viewed with which viewer / SVG rendering library exactly.
If a bug / unexpected behavior can be seen somewhere, then please provide clear steps how to reproduce the bug (and why you consider it a bug). Thanks!
Comment Actions
I can add the steps that cause the issue.
- create an svg image
- add a <text...> element to it.
- upload.
- In the background Wikicommons creates a png version of the svg which is used to display as a thumbnail/preview/non-svg on pages. The <text> element will be shifted ~5 pixels??? on the autocreated png images. If you click on the png thumbnail, the svg opens and the image appears as programmed in the svg code. I'm not sure if the issue is with the <text> element itself or the <...transform> attribute within the <text element>. see https://commons.wikimedia.org/wiki/File:Hoogsteen_Watson_Crick_pairing.svg as an example.
- If you change the text to a <path> element this does not occur
- It's as if, whatever is converting the svg to a png for thumbnail purposes, uses a slightly different size viewbox.
- this is a major issue because we use the svg <text> elements to facilitate multilingual diagrams. E.g. on the file listed above someone could just add local language/characters in lines 9-30. If they're converted to paths translation cannot (easily) be done.
- In articles, it is the png preview that is displayed in the image template, so unless someone clicks on the preview png, they won't know that a properly aligned image exists
- If you look at https://en.wikipedia.org/wiki/Hoogsteen_base_pair it shows the offset png, if you click on it >> still shows a png, and will only show the svg if you click on the details then click on the image directly in commons.
Comment Actions
@Ian_Furst: Thanks a lot for the explanation!
I guess that means that the SVG rendering is not incorrect (that is what the task summary currently states), but that the PNG thumbnail is incorrect.
For the records:
- Looking at the SVG file in Firefox 71 I do not see any differences to the PNG thumbnail: The letters are not centered.
- Looking at the SVG file in Chromium 79 I do see the letters correctly centered.
- Opening the SVG file in Inkscape 0.92.4 I see no letters at all and I get WARNING: unknown type: svg:def.
I think there are several issues here to fix:
- Looking into the source code of https://upload.wikimedia.org/wikipedia/commons/f/f4/Hoogsteen_Watson_Crick_pairing.svg , I see a <def> section. I am not aware of any <def> element in the SVG definition. https://www.w3.org/TR/SVG2/struct.html#DefsElement mentions a <defs> element, however.
- The strings have surrounding whitespace but the position of items might be defined by their first character (not sure here - maybe it's entirely undefined so browsers interpret it differently, see above). Stuff like <text id="theta_label" font-size="40px" font-family="times new roman" font-weight="normal"> θ </text> should be replaced by <text id="theta_label" font-size="40px" font-family="times new roman" font-weight="normal">θ</text>.
- This might not be a problem, however for completeness: After manually replacing <def> with <defs>, I get: ** WARNING **: Font 'times new roman' substituted with 'Liberation Serif' when opening locally in Inkscape. Times New Roman is a proprietary font so I do not have it installed. For the SVG fallback chains on Wikimedia servers, see https://meta.wikimedia.org/wiki/SVG_fonts . For general info, see https://en.wikipedia.org/wiki/Font_family_(HTML)#Generic_fonts for some more information. I'd recommend using a generic font-family, for example serif.
None of these issues are stuff to fix server-side but in the SVG file itself, hence I am closing this task as invalid.
Comment Actions
made the changes suggested and all fixed. I'm guessing that the way svg is rendered in different programs is slightly different - e.g. looked good in chrome but the png converter was slightly different. Thank you for the solution.