Wikipedia:SVG help/Archive 8

Gradient issue on logo
The gradient on File:Amerisleep logo.svg isn't displaying correctly. The source file can be found at https://cdn11.bigcommerce.com/s-36im9ihtig/stencil/ab3a5220-34da-0138-caa0-0242ac11000c/e/90ad9a30-26aa-0138-37b5-0242ac11000d/img/dh-custom/logo.svg. Thank you. Daylen (talk) 04:42, 19 February 2020 (UTC)
 * T217990 can be solved using svgworkaroundbot (using svgcleaner-backend).  — Johannes  Kalliauer  - contrib. 21:22, 20 February 2020 (UTC)
 * Thank you for the reply; however, I tried the tool and the resulting file still had the same gradient issue. Daylen (talk) 09:30, 22 February 2020 (UTC)
 * Sorry, did not read properly, The issue T217990 relating to the first verison in File:Amerisleep_logo.svg can be solved with with the tool when enabling "run svgcleaner", but the Gradient issue is possible a imprecise rendering, similar to File:Question Mark Icon - Blue Box.svg and maybe can only be resolved by partly redrawing or PNG-replacement


 * — Johannes  Kalliauer  - contrib. 09:59, 22 February 2020 (UTC)

Font rendering, "flow element not supported", "...font does not exist on Wikimedia wikis" (Inkscape 0.92 for Mac)
I'm in the home stretch of solving numerous font-related problems, but text still doesn't render consistently, as you can see at right and after clicking. When testing the SVGs: I saved from Inkscape as "Plain SVG" (not Inkscape SVG). I still can't see why (for example) the right legends ("0.75" ... "0.00") render further left than they should, and the left side legends (125...0) are shifted up a bit, and the tiny text at bottom renders left of center. Am I missing something basic? Thanks in advance for immediately pointing out my undoubtedly fundamental oversight or misunderstanding! —RCraig09 (talk) 05:52, 4 March 2020 (UTC)
 * In the Commons:Commons SVG Checker I get 12 instances of "Flow element not supported" even though I did "Text...Remove from path" and "Text... Unflow" for each text object... even though I never tried ot make any text follow a shape.
 * In the WMFLabs SVG check I get "You appear to have specified a font that does not exist on Wikimedia wikis" even though I made each text object "Liberation Sans, sans-serif" per the preceding discussion started by Efbrazil (Feb. 25-27). I had installed the Liberation Mono and Sans and Serif from fontsquirrel.com. I also get 36 instances of "Flow element found".
 * Update: I just uploaded Version 8 (made changes in the Comments box). I note some improvements, but the right-axis legend and tiny text still render a bit to the left. Can this be solved, or is SVG simply problematic? —RCraig09 (talk) 06:00, 5 March 2020 (UTC)
 * It's still got two , two , and two, none of which are recognised by librsvg. There are also two  (those with  and  ) which do nothing and may safely be removed. So can all the stuff about  ,  ,  ,   and  . -- Red rose64 &#x1f339; (talk) 14:18, 5 March 2020 (UTC)
 * Many thanks, Redrose64. Wow... With a text editor I removed the flowroot areas (which included flowRegions and flowPara) and the two clipPaths you mentioned. *(I was afraid to remove the cc, dc inkscape, ref, sodipodi "stuff" since I wasn't sure much code surrounding the "stuff" should be removed.) The Commons SVG checker shows no errors, and the WMFlab SVG checker still lists 71 instances (!) of "...specified a font that does not exist on Wikimedia wikis". FYI In the XML I see 71 instances of  . After uploading Version 9, the problem I was worried about—text rendering—hasn't changed. Ideas/explanations, anyone? —RCraig09 (talk) 05:04, 6 March 2020 (UTC)
 * 71 instances is far too many - Inkscape creates very inefficient markup. I'll look at reducing that, it shouldn't be necessary to apply identical styling to every single  and  element. Consider just the first such group:  This may be reduced to   without loss of meaning. But even then, economies may be made since those styles are also used by other  elements at the same level, so a  element enclosing most (if not all) the <text ></text> elements may be given the styles instead. -- Red rose64 &#x1f339; (talk) 14:44, 6 March 2020 (UTC)
 * I didn't intend to make anyone spend hours of work on this particular graphic, since it's ~"OK" as it presently stands. It's just that this—my first foray into SVG generation in a relatively simple graphic—has made me want to find simple user-friendly solutions if there are any. I have a moderate amount of coding experience, but making the average Wikipedia editor learn XML editing is a high barrier to entry. Is there a better open-source SVG editor than Inkscape? —RCraig09 (talk) 16:27, 6 March 2020 (UTC)
 * No idea. I use a plain text editor myself (WordPad) so that I can make the SVG as efficient as possible, with none of the redundant overheads that InkScape insists on shoving in. -- Red rose64 &#x1f339; (talk) 20:19, 6 March 2020 (UTC)
 * So... I'm concluding that the average WP editor will have to get used to these idiosyncrasies. Bummer. Thanks for the insights, though! —RCraig09 (talk) 21:19, 6 March 2020 (UTC)
 * I just corrected a bug in in https://tools.wmflabs.org/svgworkaroundbot/ . You can use the tool while enabling  this removes empty flowRoot and converts flowRoots to SVG-1.1-valid text. {I just use scour (also used in Inkscape, when saving as "Optimized SVG") because my code has limited linebreak-support.}
 * removing,  ,   is unproblematic for this file, but generally can be interpreted as copyrightviolation, see User:Glrx edit in |fileupload 14:20, 22. Okt. 2017
 * removing, and   is unproblematic for this file, but could be important for further editing in inkscape see c:User:JoKalliauer/Optimization (e.g. File:Sodipodi-type%3D"arc".svg)
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 12:42, 7 March 2020 (UTC)

What is the guidance on creating a font that matches wikipedia text as closely as possible when the image is shown as a thumbnail?
I've been struggling to create svg files that include text and have them look half way decent when rendered as thumbnails on wikipedia (chrome / windows, 1680 x 1050 monitor, for what it's worth). The thumbnail shown on the right is an example- it looks great zoomed in if you click on it, but the text looks like garbage in the thumbnail. The images wikipedia generates look OK to me, and if I take the large version of the image and scale it down it looks good as well, but whatever wikipedia is doing when rendering fonts in thumbnails looks really wrong to me.

If I convert the text in the image to vector images before creating the svg then the file looks good zoomed in, but then localization will be broken and so forth. I figure that's not what we want.

Ideally, the text in the image would closely match the text in wikipedia pages, if not exactly then approximately. Guidance on how to achieve this would be much appreciated.Efbrazil (talk) 00:23, 25 February 2020 (UTC)
 * Your image uses the attribute  five times. Of the three font families, the first two are not installed, so it falls back to the third which is a generic sans-serif. I believe that in our case this is Liberation Sans. If you dislike that font, you should use only available fonts. Don't convert text to paths, it increases the file size significantly. -- Red rose64 &#x1f339; (talk) 08:15, 25 February 2020 (UTC)
 * My mistake, c:Help:SVG shows that  falls back to DejaVu Sans. So you could use   for an Arial approximation. -- Red rose64 &#x1f339; (talk) 08:29, 25 February 2020 (UTC)
 * Thank you! That helped substantially. Corrected graphic on the right. Efbrazil (talk) 20:23, 25 February 2020 (UTC)
 * According to File:SVG_multiple_fonts_rendering_bug.svg librsvg does not support alternative-fallback-fonts. But if you define Arial as first it chooses Liberation Sans, if it does not know the first it would use DejaVu Sans. If you check older-version-rendering e.g. https://upload.wikimedia.org/wikipedia/commons/thumb/archive/3/3a/20200223231024!Common_Era_Temperature.svg/1200px-Common_Era_Temperature.svg.png it looks to me like Liberation Sans. So actually  and , should render the same, see also the hints regarding fonts,  when checking Arial-SVGs on  Commons SVG Checker. I recommended on c:Help:SVG to use  , since librsvg only takes first, and on Windows-Computers it should use Arial (if no Liberation Sans) not the default sans-serif.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes   Kalliauer  - contrib. 19:46, 27 February 2020 (UTC)
 * Whether you use a Windows computer or not has nothing to do with it: lbrsvg is run on the Wikimedia servers, and produces a .PNG which is what is sent to you, you are not served the SVG original unless you happen to go to the file description page and click the "Original file" link. -- Red rose64 &#x1f339; (talk) 20:01, 27 February 2020 (UTC)
 * If you use e.g. Inkscape and create file you make it look nicely on your computer. Since most do not run Inkscape on Wikimedia, the local rendering (where you create the file) does neither depend on Wikimedia nor on librsvg.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 09:07, 7 March 2020 (UTC)
 * I'm not talking about the local rendering. I'm talking about the PNG that is served, and that does depend on librsvg. -- Red rose64 &#x1f339; (talk) 20:55, 7 March 2020 (UTC)
 * I know, but that was imho not the question of User:Efbrazil.
 * The title is: "What is the guidance on creating a font that matches wikipedia text as closely as possible when the image is shown as a thumbnail?"
 * Therefore you should make local rendering as close as possible to the Wikimedia-Rendering, (or the other way round), but you should make the differences between Wikimedia-Linux-Rendering and Chrome-Windows-Rendering (as the user uses Chrome on Windows) as small as reasonable small. This also depends on the local rendering of Chrome (which uses afaik Chromium?) with Windows-fonts.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 07:28, 8 March 2020 (UTC)
 * What I've settled on is the fonts redrose64 recommended, and for an SVG width of 960 I use a font-size of 41 and a thumbnail scaling factor of 1.5, with smaller fonts for things that don't need to be visible in the thumbnail. It doesn't look terrible, as you can see from the image, but I'm just eyeballing and judging it tolerable. Real best practice guidance on this would be helpful, since svg with embedded text is the recommended format, and lots of images like charts and graphs inevitably contain lots of text. The less standardized fonts are on wikipedia, the less professional it looks. Efbrazil (talk) 18:21, 9 March 2020 (UTC)

Implementing counters and timers in SVG without JavaScript
I've just discovered (I think) a new application for interactive SVG without JavaScript: a quiz to let students learn the locations of geographic features, components of a system etc (basically any 1-to-1 mapping). My first example concerns the states of the USA.

I wonder if anyone here knows of an elegant way to implement counters without JavaScript. In my example, a student could start with, say, three lives. Every wrong answer (triggered by the "reset" element) deducts one life. When all lives are lost, the game is over. A workaround is to have as many reset elements as lives and delete the elements as lives are used up. That would however lead to much redundant code :-(

A less strict version just counts the number of wrong answers and shows it at the end when all states have been identified.

Alternatively, I could implement a timer that counts the number of seconds (as in [ my morphing demo]) but pause it when all states have been identified, to show how long the student took. A workaround is to add on the win screen, but:
 * 1) Wikimedia now rejects files with   attributes
 * 2) The mouse must be moved to stop the timer

(I can make a version where a timer counts down to zero, the game ending if the student fails to identify all states in time, as in [ my missile game], though a time limit may frustrate students.)

Would anyone be able to help? Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 00:07, 10 February 2020 (UTC)
 * Nice quiz. I got them all right after about 65-70 tries. -- Red rose64 &#x1f339; (talk) 12:46, 10 February 2020 (UTC)
 * Thanks, Redrose64. Do you have any ideas on how to do counters? cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 19:33, 10 February 2020 (UTC)
 * As I haven't heard any solutions, I decided to use multiple reset elements, each one destroying itself and the last one revealing a game over screen. Click the thumbnail to try it out! cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 23:16, 9 March 2020 (UTC)

How to elegantly change global font size in a multilingual SVG?
Hi SVG experts! I made File:Ancient_seven_wonders_timeline.svg into a multilingual SVG. However, as the Russian text is longer than the default English text, as on the right, I had to reduce the font size.

I tried adding an extra style sheet in a switch tag: but that didn't work. Neither did I eventually had to add a ru class and specify it in each switched text tag e.g. Is there a better (more elegant) way of setting a language-specific global font size?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 23:38, 9 March 2020 (UTC)
 * Please respect MOS:SMALLTEXT and don't use font sizes smaller than 85%. -- Red rose64 &#x1f339; (talk) 19:14, 10 March 2020 (UTC)
 * I suppose you're referring to my code snippets above. If so, thanks for letting me know, Red rose64 &#x1f339;. I thought a smaller font would reduce the amount of space I'm consuming. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 02:07, 11 March 2020 (UTC)

How to fix SVG font rendering bug in thumbnail view?
So I think I understand the root of svg font evil on wikipedia. The problem is that wikimedia renders 270 width thumbnails natively from SVG, instead of just scaling down a higher resolution version of the image. When wikimedia renders svg files at that resolution it uses the itty-bitty font settings, which are garbage.

The "bad letter-alignment on small font-size" in the help text at the top of this page is misleading I think, because it implies you can fix the issue as the svg creator. The problem has nothing to do with the declared font size in the svg file, rather it's the font size wikimedia uses when rendering to a low resolution.

The two images on the right illustrate the problem. The first is just normal png and always looks good. The second has embedded text, and it only looks good if I view it on a high resolution smartphone or zoom my browser and then load the page fresh. If I view the second image on a standard desktop resolution of something like 1680 by 1050, the thumbnail looks like pixelated garbage. As a side note, the image also looks good if use an svg where I've converted the fonts to vectors before uploading.

I'm happy with a work around, like maybe a way to force wikipedia to use the larger version of an image for thumbnails.

Suggestions? This issue is really killing our ability to use native text in svg files on wikipedia. If it can't be fixed, the other editors want me to switch all of our svg files over to use vectors for fonts, instead of native text, even though it will crush things like localization. Efbrazil (talk) 20:14, 11 March 2020 (UTC)


 * I think the SVG concept is brilliant but am flummoxed as to why, given SVG's >21-year history, (old enough to vote and drink alcohol!) there would still be such issues on any major platform. I perceive that there is an attitude here that SVGs are "better"; however the text rendering issue is a powerful frustrating disincentive. One "solution" (a clumsy one, suggested near the top of this page) is to convert a copy of text objects into (visible) 'paths', and make the original genuine text invisible for foreign-language creators to use for localization. I echo Efbrazil's opinion, but don't know which forum or committee, etc., on Wikipedia or Wikimedia, could implement any changes. —RCraig09 (talk) 22:09, 11 March 2020 (UTC)

cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 02:14, 12 March 2020 (UTC)
 * I have found some remedies to improve font rendering:
 * Most importantly, use font sizes above 20 px. If necessary, render the font in huge font sizes, then rescale it using <tt>transform="scale(0.1)"</tt> etc (see example image)
 * Use <tt>font-family:Helvetica,Arial,sans-serif;</tt>
 * Set stroke to the same colour, then <tt>stroke-opacity:0.5;</tt> or similar
 * Blur the font a bit to simulate anti-aliasing e.g. below, tweaking <tt>stdDeviation</tt> as appropriate:
 * Good luck,
 * Good luck,
 * Thanks cmglee! I added an svg version of my graphic that has fonts converted to vectors to show what text should look like. I'm OK with a different font being used, but the pixelated appearance at low resolution is the real problem.
 * 1. I'm already using fonts above 20px so that makes no difference.
 * 2. The issue is not the font, it's how pixelated it is at low resolution. I think the "Trafic Vodej" text is similarly not in the acceptable range for rendering, so I'm not sure how much changes will help.
 * 3. The stroke-width doesn't seem to impact svg text rendering, I tried bumping it up to a giant number and it made no visible difference to font rendering.
 * 4. The blur filter isn't in the Trafic Vodej sample at all. I tried it and it seems to make the text disappear.
 * I think we really need a fix by wikimedia devs. I'll come up with one file that demonstrates the problem, post it here, then log a bug against them. Efbrazil (talk) 17:50, 12 March 2020 (UTC)
 * The issue may be font hinting which makes text crisper at the expense of shape fidelity. Indeed the best fix is in the renderer, but I think Wikimedia uses librsvg and it's a long process to get that fixed. Meanwhile, finding good workarounds may be the best temporary measure. cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 18:13, 12 March 2020 (UTC)
 * Yeah, that sounds right to me. I updated the images on the right. The first is just the svg, which looks bad as a thumbnail. The second is a png based on the 1080 width version of that svg file. It looks good to me as a thumbnail. The third is the svg with fonts converted to vectors before saving, which is probably what we'll use until this bug is fixed. The current experience is bad enough that we really need to stop using text in svg files. Efbrazil (talk) 19:25, 12 March 2020 (UTC)
 * Efbrazil, I notice the sizes of the titles in your three versions are different. Is this intended (not part of the problem you are solving), or is it an unintended consequence of what you're doing? My problem has been both placement and size of resulting text strings (though not pixellation since in my brief SVG career I've always used huge (>35pt) font sizes on a 1920- or 3000-pixel wide page). Any "solution" would have to resolve both pixellation and placement/size issues. —RCraig09 (talk) 19:53, 12 March 2020 (UTC)
 * Changing the  attribute won't do much (if anything), because text typically isn't stroked - it's filled. Consider the letter O placed in a SVG file as   - when this is rendered, you think that you're seeing a black outline with a white centre; but in fact, it's drawn as two rings, with their outlines not stroked but the space between filled, something like  . Consider [//www.w3.org/TR/SVG11/images/text/textdecoration01.svg this SVG example] (from [//www.w3.org/TR/SVG11/text.html#TextDecorationProperties SVG 1.1 (Second Edition) – 16 August 2011]), the fourth row of text shows what happens when you apply different stroke colours but a consistent  . -- Red rose64 &#x1f339; (talk) 21:05, 12 March 2020 (UTC)
 * Bug T247567 filed. Craig- the font size in the title is the same between the 3 images, it's just rendering that differs. I've learned to work around the issue. You can resolve some placement issues by using the "text-anchor" attribute on tspans, for instance to center align a title you use <tspan x="50%" text-anchor="middle"> and zero out any horizontal translation, or use text-anchor="end" if you want right aligned. It's a post-processing PIA, but it's useful for localization as well. Efbrazil (talk) 21:28, 12 March 2020 (UTC)

File:Syrianska.svg
For some reason when you click on this logo (i.e. visit https://upload.wikimedia.org/wikipedia/en/4/40/Syrianska.svg), the red background turns white. Can someone please fix it?Jonteemil (talk) 15:23, 25 March 2020 (UTC)
 * It's either the contents of the <g ></g> element that has the  attribute, or the <clipPath ></clipPath> element itself. Make sure that you stick to the SVG 1.1 spec. -- Red rose64 &#x1f339; (talk) 23:39, 25 March 2020 (UTC)
 * , I fixed it... when I opened it in every browser the background now appeared, but the second I uploaded it to Wikipedia it broke again. I'll keep trying — Yours, Bᴇʀʀᴇʟʏ  • Talk∕Contribs
 * Both your versions work for me, thanks!Jonteemil (talk) 18:03, 1 April 2020 (UTC)
 * , really? Okay then... — Yours, Bᴇʀʀᴇʟʏ  • Talk∕Contribs 18:06, 1 April 2020 (UTC)
 * Yepp, no white background on either of your versions, at least on my phone. I can check on my computer later.Jonteemil (talk) 18:12, 1 April 2020 (UTC)

Archive this page
This page is now so long that it takes ages to scroll on a mobile. Would anyone mind my archiving posts begun before 2020 (i.e. before W3C invalid inquiry and layers)? cm&#610;&#671;ee⎆&#964;a&#671;&#954; 18:17, 12 March 2020 (UTC)
 * I guess no one has any objections. Since I'm not a regular participant here, I can't really say whether that's a good division point (i.e., whether any sections before that have a reasonable potential for more discussion)… but when you do archive, please use the latest existing archive subpage, not a new one. - dcljr (talk) 00:29, 20 March 2020 (UTC)
 * ? - dcljr (talk) 13:51, 6 April 2020 (UTC)

File:Prime Minister text and logo.png
File:Prime Minister text and logo.png should be moved to an SVG. TrailBlzr (talk) 20:56, 15 March 2020 (UTC)

Urgent help needed at 2019–20 coronavirus pandemic
You are invited to join the discussion at Talk:2019–20_coronavirus_pandemic/Archive_24. Sdkb (talk) 03:44, 17 March 2020 (UTC)

Render issue
Why won't File:COVID-19 outbreak France per capita cases map.svg render properly? Ythlev (talk) 16:21, 20 March 2020 (UTC)
 * For a start, the  attributes of the  elements seem to have had most of the spaces and some of the zeroes stripped out, causing the same ambiguity problem as at #File:Alternattiva Demokratika.svg above. -- Red rose64 &#x1f339; (talk) 08:40, 21 March 2020 (UTC)
 * Got it. Thanks. Ythlev (talk)

Fixed width and hight
Hi! Could someone explain for me what the technical advantage with fixed W and H in SVG are. I'm discussing it here. – GeMet [ gemet | ʇǝɯǝƃ ] 00:44, 6 April 2020 (UTC)
 * Answered there. -- Red rose64 &#x1f339; (talk) 14:07, 6 April 2020 (UTC)

Background of SVG black instead of white
Hi all,

I've attempted to update the to reflect the 2020 time change, but the background is black instead of white/gradient.

Ironically I was the last person to update the graph, and I managed to fix this issue the last time. I have obviously forgotten what I did to resolve the problem, but it looks like the code formatting is quite different; I feel like I updated it using Illustrator and changed something using Inkspace.

Thanks for any help! — Preceding unsigned comment added by Ryanicus Girraficus (talk • contribs) 20:57, 23 January 2020 (UTC)


 * I think you fixed it on your own, do you still need some help?  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 09:54, 12 April 2020 (UTC)


 * I had totally forgotten about posting in here - thanks for the reminder! I ended up redesigning the vector in Illustrator which fixed the issue and should also make it easier for others to edit. Hope you're well - Ryanicus Girraficus (talk) 18:37, 13 April 2020 (UTC)

Variable thumbnail rendering of SVG filter depending on thumbnail size


Hi experts,

My file:Covariance_trends.svg renders correctly on File:Covariance_trends.svg but not on the article and Wikipedia's file page.

Any ideas why?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 15:12, 20 May 2020 (UTC)
 * What's wrong with it? -- Red rose64 &#x1f339; (talk) 16:02, 20 May 2020 (UTC)
 * The "static" (noise) appears, when it should be white. Examples added... Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 00:01, 22 May 2020 (UTC)

Switching to .svg for chemistry file previously loaded as .png
I have been adding chemistry diagrams, for example I know that it would be better to use such diagrams in .svg format and I've worked out how to create them with software I have access to. I converted this one today and uploaded it on Commons as "Protoporphyrin_magnesium_insertion.svg". This looks fine when viewed natively but when inserted into a page the bottom part gets truncated, as here on the right.

Can you advise how to fix this? Thanks. Michael D. Turnbull (talk) 14:17, 9 June 2020 (UTC)
 * All of the coordinates lack units, which [//www.w3.org/TR/SVG11/coords.html#Units implies] that their dimensions are measured in terms of pixels. [//www.w3.org/TR/SVG11/struct.html#SVGElement The tag] has the attributes   but it has no [//www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute   attribute] which would specify exactly how many pixels should stretch across 247.38542mm (or along 105.03958mm). You either need to alter all of the coordinates to use millimetre dimensions, or add a   attribute. -- Red rose64 &#x1f339; (talk) 15:01, 9 June 2020 (UTC)

OK. I think I understand that. I used a text editor to add the attribute viewBox="0 0 2470 1050" preserveAspectRatio="none" which I assumed would give me the ~247 by 105mm translated into something useful. After uploading this as a new version of the file, I can see that the image rendered here to the right is no longer truncated BUT it seems very small, as it's squeezed into the top left of the viewing box. Is there a value for the viewBox attribute that would work well in general on Wikipedia? Note that I'm clueless about the detials of .svg files: I converted a .wmf file that my chemical drawing software can produce into the .svg one by using a free utility at convertio.co. Michael D. Turnbull (talk) 15:41, 9 June 2020 (UTC)


 * I've experimented with a couple of other uploads, after looking at the Help pages whose URL you kindly provided. I'm still puzzled and getting the too-small picture. The first parts of my .svg file now looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg411" height="1050px" width="2470px" viewBox="0 0 2470 1050" preserveAspectRatio="xMaxYMax meet" version="1.0"> <metadata id="metadata415">
 * This clearly isn't fully correct. What next? Michael D. Turnbull (talk) 17:17, 9 June 2020 (UTC)
 * ✅ Ah! Totally counterintuitive to me, by making the viewbox attribute = "0 0 1235 525" things get much better. So, the smaller the viewbox numbers the bigger the actual picture when rendered! I'll be able to sort this out now.... thanks for the tips. Michael D. Turnbull (talk) 17:36, 9 June 2020 (UTC)
 * Note to future readers. The version rendered in the image to the right here is now satisfactory. This .svg file was exported from Libre Office Draw (v.6.3.6.2). To see earlier buggy versions of the same drawing, see Wikipedia Commons for this image. Michael D. Turnbull (talk) 13:46, 11 June 2020 (UTC)

Problem with second version of azoxystrobin.svg
I created an .svg file to ACS standards (including atom colouring) for azoxystrobin and loaded it in Commons as a new version of the existing (first and only) one. As expected, my new version now replaces the old one on most Wikis where it is used (for example ). However, it doesn't replace the diagram in the chembox at azoxystrobin, nor does it appear correctly in the file history section of, although it DOES look correct in the PNG preview on Commons. Similarly, the image included on the right here is still the old one! What is going wrong? I've replaced other image files on Commons without any such issues.

Incidentally, I note with this file and many other svgs in Commons that clicking on the PNG preview gives a poor image at full scale with a black background obscuring the picture. Is there a way to upload .svg to avoid this or is it a "feature" of the system? Michael D. Turnbull (talk) 14:19, 13 June 2020 (UTC)
 * The one at Azoxystrobin looks fine to me. It's probably your browser caching an old version. -- Red rose64 &#x1f339; (talk) 06:38, 14 June 2020 (UTC)
 * Wow, I never realised that browsers could cache things for so long! I've just re-booted my PC today and in Edge (the new Chromium-based version) which I was using yesterday, the file still looks wrong. Viewing the relevant web pages, including this one, in Internet Explorer looks perfect: must be the first case ever of IE being superior to Edge... Thanks for making this suggestion, which I would never have thought of. Michael D. Turnbull (talk) 11:41, 14 June 2020 (UTC)
 * In case anyone else has this problem, it can be fixed in the new Edge by setting it to clear cached image files on exit (go in to settings and search for "cache"). The browser defaults to retaining everything, including cookies and image data, but each type of data can be individually marked for deletion on exit. I did that and all the pages now look fine. Michael D. Turnbull (talk) 11:51, 14 June 2020 (UTC)

Using a &lt;pattern&gt; with &lt;line&gt;
Okay, I am trying to develop an SVG file template for creating images of tartan patterns. I figured out that I can use a &lt;pattern&gt; element for the tartan weave - I use a stroke-dasharray="2 2" to run the threads for either warp or weft. And then I want to use that pattern on a line with width=page size across the image, and its own stroke-dasharray with the tartan pattern for that color. The problem I am running into is that the &lt;line&gt; element requires the stroke property to specify the color of the line, but I also need to specify &lt;line stroke="url(#pattern)"/&gt; to apply the weave pattern onto the tartan color pattern. Is there a trick for specifying two parameters for the stroke property? I tried using a semicolon because my reference suggested it has some relation to CSS properties, but it didn't work. VanIsaacWS<sup style="margin-left:-3.0ex">cont 02:51, 22 June 2020 (UTC)
 * Try using this:  It's not perfect, but it should give you some ideas. As you can see, it uses   throughout - all the colouring is via  . -- Red rose64 &#x1f339; (talk) 09:48, 22 June 2020 (UTC)
 * Thanks for the idea of that approach, but it's unfortunately not the use case I'm looking for. The issue is that I'm not just trying to make a diagonally striped pattern, I'm looking to show the actual weave of the tartan. So if you scale it up, you would see the distinct step from warp to weft, not a smooth diagonal approximating the interaction.
 * I think I've figured out that I only need a weft pattern as a mask on the full weft threads, and then put the masked weft over the solid warp threads, but I'm still running into an issue with making that mask pattern. Can you see where I'm going wrong here?
 * This just shows up as a full 100x100 black box, so when I try to mask with it, I lose the whole weft. But when I display the pattern rectangles by themselves, it is the exact thread pattern I'm expecting in a nice 4x4 box. So it's not filling the large rectangle with the pattern for some reason. It did the exact same thing when I used the dasharray on a winding 4x4 path for my thread interaction:
 * so there's obviously something I'm doing wrong in applying the pattern to the large rectangle, but I can't figure out what it is. VanIsaacWS<sup style="margin-left:-3.0ex">cont 18:06, 22 June 2020 (UTC)
 * Eureka! I've just figured it out. I needed to do the mask in white in order get it working, and I didn't have the patternUnits or maskUnits parameters, which messed things up as well. Thanks for the code for me to look at, Redrose. I don't understand those parameters, but their presence clued me in on a possible issue. Here's my working code for posterity if someone is running into issues with patterns or masks in the future:
 * VanIsaacWS<sup style="margin-left:-3.0ex">cont 19:54, 22 June 2020 (UTC)
 * OK, the image is apparently c:File:SVG Black Watch Tartan test file.svg but you seem to still be having difficulties, going by your recent post at c:Commons:Graphics village pump. I myself had some difficulty with masks a few years ago - c:Talk:BSicon/Icon geometry and SVG code neatness/Archive 3 relates to this.
 * I'll have another try, this time using little squares instead of plain diagonals. I can tell by your code that we have what is known as a 2/2 Z-twill so your idea of a repeating 4x4 pattern is in itself correct. -- Red rose64 &#x1f339; (talk) 09:53, 23 June 2020 (UTC)
 * So it turns out the issue might not have been with the mask, although I did use the manual values from to bypass that bug as well. It cost me a few bytes, but it definitely works. The main issue was a problem interpreting the stroke-dasharray parameter on all my &lt;line&gt;s. Apparently librsvg sometimes balks at spaces in dasharrays, but you can just replace them with commas. You can see all my attempts at tracking down the issues in the file history at File:SVG Black Watch Tartan test file.svg. Now to my next task, figuring out how to make a userscript for creating tartan images from sett patterns. VanIsaacWS<sup style="margin-left:-3.0ex">cont 05:39, 24 June 2020 (UTC)
 * I should have spotted that! -- Red rose64 &#x1f339; (talk) 19:06, 24 June 2020 (UTC)
 * So it turns out the issue might not have been with the mask, although I did use the manual values from to bypass that bug as well. It cost me a few bytes, but it definitely works. The main issue was a problem interpreting the stroke-dasharray parameter on all my &lt;line&gt;s. Apparently librsvg sometimes balks at spaces in dasharrays, but you can just replace them with commas. You can see all my attempts at tracking down the issues in the file history at File:SVG Black Watch Tartan test file.svg. Now to my next task, figuring out how to make a userscript for creating tartan images from sett patterns. VanIsaacWS<sup style="margin-left:-3.0ex">cont 05:39, 24 June 2020 (UTC)
 * I should have spotted that! -- Red rose64 &#x1f339; (talk) 19:06, 24 June 2020 (UTC)

Problems with the image
Hello. I've tried to upload this file to Wikimedia Commons. But it says Found unsafe CSS in the style element of uploaded SVG file. Also the SVG checker says the font is unsupported, but it's listed here. What should I do? Mike like0708 (talk) 17:19, 13 July 2020 (UTC)
 * The link you give is not an SVG image. It seems to be a Javascript-heavy web page, with buttons and things. Once the first popup appeared, I backed out - no way am I going to go further with that. What is the actual URL of the SVG image concerned? -- Red rose64 &#x1f339; (talk) 19:30, 13 July 2020 (UTC)
 * I'm sorry. Here it is:
 * The problem is not the Droid Sans font, it's the entire content of the style element - this is it, in part:  I've omitted most of it - in between the   and the next quote there is 56,640 bytes of binary data.
 * Anyway, this uses [//www.w3.org/TR/css-fonts-3/#font-face-rule the  at-rule], which was introduced in CSS Fonts Module Level 3 (proposed 2013, not formalised until September 2018), but librsvg can't handle anything that doesn't conform to [//www.w3.org/TR/2018/SPSD-CSS1-20180913/ CSS level 1] (with the exception of certain [//www.w3.org/TR/CSS2 CSS level 2] features). The   property here seems to be describing the Droid Sans font, but you shouldn't need to do that - the two <text ></text> elements both have the   attribute, which should be quite sufficient. I suggest that you remove everything between <style ></style> inclusive of those tags. -- Red rose64 &#x1f339; (talk) 20:57, 13 July 2020 (UTC)
 * It helped. Thank you so much! Mike like0708 (talk) 09:27, 14 July 2020 (UTC)
 * .. but it's still rendered using another font. Also the letters move up. Looks like this. The black line is Г's part. Mike like0708 (talk) 10:02, 14 July 2020 (UTC)
 * Is Commons still refusing to upload it? If so, what error messages are you getting? If it uploads, what is the filename? -- Red rose64 &#x1f339; (talk) 16:52, 14 July 2020 (UTC)
 * The Commons tell everything's OK, the filename is not changed. Mike like0708 (talk) 14:21, 16 July 2020 (UTC)
 * But what's the filename on Commons? At no point above is that stated. -- Red rose64 &#x1f339; (talk) 22:13, 16 July 2020 (UTC)
 * Sorry for a long offline. That's called fixed2.svg. Here's a link to Commons if that helps you. Mike like0708 (talk) 20:36, 24 July 2020 (UTC)
 * I don't know if it helps the de-bug but I downloaded the .svg file and then opened it in my Edge browser. It looked fine, that is with a large gamma to the left of a small M, all within a grey-filed circle. For some reason the gamma gets turned into a little streak of black above the circle when viewed on Commons. Neither the .svg validators at Commons nor at see any errors, although the Commons validator does show the "wrong" image. Michael D. Turnbull (talk) 14:38, 25 July 2020 (UTC)
 * Also it looks fine if you open it in a separate tab. That's really weird. Mike like0708 (talk) 11:59, 30 July 2020 (UTC)
 * That file is the raw SVG being served directly to your browser, it hasn't been passed through librsvg on the way. Hence, if you use a modern browser which recognises all of the different constructs that you have used (the file contains XML, SVG and CSS) your browser will display it as intended.
 * When SVG images are included in Wikipedia pages, what is served is a PNG conversion from the SVG (for example, [//upload.wikimedia.org/wikipedia/commons/thumb/7/77/Fixed2.svg/240px-Fixed2.svg.png this 240px version]) - this conversion is performed by librsvg, not your browser. librsvg recognises XML only if it is well-formed and valid; it reconises SVG 1.1 but nothing later; and it recognises CSS 1 (and parts of CSS 2). So if there is something in the raw SVG file that librsvg doesn't recognise, it will provide only a partial conversion to PNG. -- Red rose64 &#x1f339; (talk) 08:23, 31 July 2020 (UTC)
 * To continue. I'll break parts of the file down element by element, with observations. It begins with  - these two lines are pure XML. The first is mandatory, the second is valid but [//www.w3.org/TR/SVG11/intro.html#NamespaceAndDTDIdentifiers not recommended] - try removing that one. From that point on, it's all SVG apart from the content of the   attributes, which are CSS. I won't comment on every element. The two <text ></text> elements both have the attribute   - try altering that to   - note the nested quotes of differing types. These elements also have the attribute   which contain the only CSS in the file, and it's valid CSS 1 so no problem there. The two <tspan ></tspan> elements both have the attribute   but the   unit isn't used elsewhere, so alter those to  . The tspan also enclose literal text - the Greek letters Γ and Μ, it's possible that these are being misinterpreted, so alter them to numeric character references   and   respectively. There are eight  tags with no attributes, those may safely be removed together with with their balancing  tags. -- Red rose64 &#x1f339; (talk) 08:57, 31 July 2020 (UTC)
 * Just for fun, I used Inkscape to create a version of your file and loaded it to my Google cloud . The export from inkscape was their "optimised" .svg file, which minimises the size to 3 Kb. I used just four elements: The outer black circle, the fill, a large text gamma and a small "M". If you look at the file in notepad, it's pretty easy to see how to alter each individual component but this still doesn't give me a clue about what went wrong with your original. Michael D. Turnbull (talk) 14:15, 30 July 2020 (UTC)
 * I've done all of your advice [1][2] but it still looks the same as it was. All the SVG checkers say it's completely fine. Mike like0708 (talk) 11:56, 31 July 2020 (UTC)
 * Well, I'm stuck then. -- Red rose64 &#x1f339; (talk) 14:09, 31 July 2020 (UTC)
 * Anyway, I appreciate your help. Looks like I'll have to use PNG instead. Bye! Mike like0708 (talk) 15:14, 31 July 2020 (UTC)

feConvolveMatrix support
Could an SVG/librsvg expert confirm whether rsvg supports feConvolveMatrix, please? I noted on commons:Librsvg_bugs before realising that I should get a second opinion. Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 06:26, 30 August 2020 (UTC)

Poor rendering of image.
I've created several maps that share the similar features, all of their thumbnails have poorly rendered parts of image and I wondering how to deal with this issue. Files: Map of the London Assembly election, , , and  specifically, the images see a blurred image for the map of London within the at-large seat area and the rectangles with the graph for seats. JDuggan101 talk. &#124; Cont. 12:48, 2 August 2020 (UTC)
 * Hi these elements had an SVG filter containing feGaussianBlur applied for some reason. I've removed the Gaussian Blur filters from said files.
 * Did you create the files from scratch? If so, and you didn't add the filter yourself, perhaps Inkscape developers should be notified, as we've come across this issue before.
 * Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 06:47, 30 August 2020 (UTC)
 * Thank you very much for fixing the issue, I did create the files from scratch and I don't remember adding a filter but it is entirely possible I did so by mistake.JDuggan (talk) 14:25, 30 August 2020 (UTC)

Converting US government public domain .png files to .svg
I uploaded this file to Commons earlier this year. It was obtained from a US government website and is tagged as.

I note that there is now a "|other versions=" tag on the file. I'd love to convert it to .svg but have no idea of how to do so easily, and doubt I can obtain such a format from the. Any ideas, please? Michael D. Turnbull (talk) 16:39, 1 September 2020 (UTC)
 * Thanks for adding it, I would remove the  tag as the map has very fine-grained data that would be lost on conversion to SVG, unless a bitmap of it is embedded in the SVG. A better solution is to redraw it as two separate images: the map and the graph. I'd leave it for now, until there's greater demand for the image (it's used only on 2,4-Dichlorophenoxyacetic acid). Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 21:04, 4 September 2020 (UTC)
 * OK, I'll remove/ignore the tag — although I guess a bot might reinstate it. The US govt website has the three components of the image (map, barchart and key) as separate .png files, which I merged in an image editing program before upload, for my own convenience. I have uploaded several similar maps, for example for azoxystrobin and mesotrione, but no individual map is likely to be used anywhere except in the article for the relevant pesticide. Also, they update annually so from my perspective it's easier to keep the three items as a single (undated) image referring to the latest data. Michael D. Turnbull (talk) 11:34, 5 September 2020 (UTC)

File:FIA Digiflag Blue Flag.svg
Could somebody explain to me, why the blue dots in this file do not show up after uploading on Commons? (while in this they do). Thanks! TheGlobetrotter (talk) 12:58, 7 September 2020 (UTC)
 * It's got five instances of the <animate ></animate> element, and animation is not possible for SVG images on Wikipedia - only the initial state is shown. -- Red rose64 &#x1f339; (talk) 15:43, 7 September 2020 (UTC)

Blank thumbnail of SVG with embedded image
The thumbnail of File:Cambridge_Kings_Ditch_map.svg is completely blank. The only issue flagged by the Commons SVG checker is missing fonts, which I've encountered before but isn't normally a problem. I think the image-embedding syntax is correct. The SVG renders fine on Firefox and Chrome. Can someone please check why doesn't render at all? Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 01:37, 14 September 2020 (UTC)
 * Bug arose as width and height parameters of the embedded image were omitted. Issue reported on commons:Librsvg_bugs. cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 17:41, 17 October 2020 (UTC)

Text looks horrible in ANSI-Z535.1-2017-Safety-Colors.svg
Text is rendering very badly -- even after I installing and choosing 'FreeSans', it isn't being used in the PNG previews. Not sure if this needs to be fixed, but I wasn't able to fix this.


 * Librsvg (the thumbnail renderer) struggles with small font sizes and I noticed the image uses font size of around 9. Can you either draw it with larger text, or use larger text then apply a transform to scale it down? Hope that helps, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 23:44, 14 October 2020 (UTC)

File:Herd immunity He.svg
Hi, hope this is the right place to ask. If this isn't, feel free to move my question. I am trying to translate the following illustration to Hebrew but the file seems to be wrong. I have manually pasted the corresponding translate into the textbox but it doesn`t work. Could someone help me fixing the file? רונאלדיניו המלך (talk) 21:53, 8 October 2020 (UTC)
 * There are a lot of problems here. In no particular order:
 * instead of uploading your version with a different name, you should have uploaded a new version of c:File:Herd immunity.svg incorporating the Hebrew as additions to the existing code
 * you have used Inkscape (or similar) which is almost guaranteed to wreck what is already there
 * you have claimed "own work" when plainly it is not, being a derivative of c:File:Herd immunity.svg
 * previous uploaders of c:File:Herd immunity.svg, such as and, have caused damage to the default (English) text during their attempts to add Bengali and Russian.
 * It may be best to start off with c:File:Herd immunity.svg using the version of 16:38, 30 March 2020 and, using that as a base, add the translations for Bengali, Russian and Hebrew properly. Then get c:File:Herd immunity He.svg deleted. -- Red rose64 &#x1f339; (talk) 13:38, 9 October 2020 (UTC)
 * Just to be clear, I have translated to Bengali and AFAIK I have not intentionally caused any damage to the English text. I have non reollecion about touching the English text. If something happened, it might have been an accident. I would be glad to know how it happened. --Zaheen (talk) 16:27, 10 October 2020 (UTC)
 * The idea was that when adding a new language, you would copy one of the existing blocks and modify the copy, leaving the original alone. But this was not done for either Bengali or Russian; instead the default (English) was modified in place without being copied. -- Red rose64 &#x1f339; (talk) 08:39, 11 October 2020 (UTC)
 * Thanks for comment. That`s a lot of work doing the translation all over again. Is there a way fixing the current file? רונאלדיניו המלך (talk) 15:13, 15 October 2020 (UTC)

SVG not displaying correctly on file page (non-inkscape/openoffice)
Just uploaded an SVG of the Biden-Harris Transition logo (PNG is currently used for wiki pages). SVG was downloaded directly from the transition site (www.buildbackbetter.com) and renders properly when viewed on computer, but does not on the file page. Have looked at the SVG help page but not seeing anything which seems relevant.

--Crgmu (talk) 18:33, 8 November 2020 (UTC)
 * Please see previous section. -- Red rose64 &#x1f339; (talk) 16:49, 9 November 2020 (UTC)
 * Please use https://svgworkaroundbot.toolforge.org/ and enable "run svgcleaner" this should fix it. I repaired it as c:User:SVGWorkaroundBot.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 22:15, 16 November 2020 (UTC)

rendering bug for File:Flag_of_Trondheim.svg
hello! i would consider myself quite familiar with svg, and i've fixed quite a few rendering bugs with my own uploads, but this time i'm stuck. it's supposed to render like in fig. 1, and it does so in my browser, but in librsvg it renders like in fig. 2,  which is completely unacceptable. Any help is appreciated! here is the code: Gutten på Hemsen (talk) 22:19, 1 November 2020 (UTC)
 * Please don't make me go off to imgur, it slows my PC to a crawl and causes other problems, necessitating a reboot. Please observe WP:WPSHOT. -- Red rose64 &#x1f339; (talk) 22:43, 2 November 2020 (UTC)
 * Sorry about that! I've replaced the images. Gutten på Hemsen (talk) 23:07, 2 November 2020 (UTC)
 * Now that I see the screenshots, I can say that I have seen this kind of problem before - unfortunately I can't find where I answered it. As I recall it comes down to the kinds of shorthand that librsvg recognises. In the  attribute of the  element you have a number of relative movements which don't seem to be recognised as such, and I think that it's because values have been crushed together creating an ambiguity. For instance, the second command is   which is a relative arcto, and there should be seven values after the   but the last four have all been run together. Try spacing them out, and if that doesn't work, use commas between each pair of x/y values as shown in the examples [//www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands here]. -- Red rose64 &#x1f339; (talk) 23:54, 3 November 2020 (UTC)


 * Please use https://svgworkaroundbot.toolforge.org/ and enable "run svgcleaner" this should fix it. I checked it on Commons:Commons:Commons_SVG_Checker and it seems to fix the bug.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 21:00, 16 November 2020 (UTC)
 * I changed it now on my own.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 22:15, 16 November 2020 (UTC)
 * Thanks so much, everyone! It looks perfect and is now closer to the original drawing by Arne E. Holm. I’ve updated the file with some standard metadata, and I’ve updated the file page with some relevant information and a new source. Gutten på Hemsen (talk) 05:46, 17 November 2020 (UTC)

Thumbnail completely black
I created this CSS3 animation to show the rotation speeds and axial tilts of the planets and moon. It runs fine on Firefox and Chrome but the thumbnail is completely black.

The previous version at least showed the text. I understand that filters are not fully supported, so added a masked texture to show poor man's versions of the spherised textures but that totally broke the thumbnail.

Any idea what went wrong?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 08:27, 27 November 2020 (UTC)
 * See c:Help:SVG. PNGs cannot be animated. -- Red rose64 &#x1f339; (talk) 22:06, 27 November 2020 (UTC)
 * The black thumbnail is not related to the animation.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 23:39, 27 November 2020 (UTC)
 * I can replicate the error locally on Linux and it seems to be related to the images.
 * If you remove all, the SVGs renders correctly
 * As soon as you one image it fails everything after this image (even without any filter)
 * I tried to extract the images, and Base64 found 4 "Corrupt JPEG data"
 * I recommend to insert the jpegs to an empty svg file and check with Commons:Commons:Commons_SVG_Checker if it works.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 11:27, 28 November 2020 (UTC)
 * Animated SVGs are thumbnailed to the initial frame. -- Red rose64 &#x1f339; (talk) 20:55, 28 November 2020 (UTC)
 * Animated SVGs are thumbnailed to the initial frame. -- Red rose64 &#x1f339; (talk) 20:55, 28 November 2020 (UTC)

cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 22:25, 30 November 2020 (UTC)
 * is imho the best expert on Wikipedia for animated SVGs, so he/she knows what (s)he is doing.
 * This is not true, see e.g. File:Morphing_SMIL.svg (by cmglee)
 * The text is not animated, but it is not shown (As I said the bug is not related to the animation it is related to the images)
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 15:50, 29 November 2020 (UTC)
 * Thank you very much, (very kind of you to comment so!) and
 * I fixed the blank thumbnail by adding width and height to images (bug reported on commons:Librsvg_bugs) and set a transform to move the filter away before animation starts. Now both thumbnail and animation are fine. It's a mystery why the text doesn't show even if only the image tags are defective.
 * Cheers,
 * Cheers,
 * There are imho three kind of librsvg-failure-crashes.
 * the element just fails, everything else get rendered
 * at failure the renderer crashes and everything later won't get rendered (here the case)
 * the renderer fails completely and does not create any image
 * In this svg the second occurs  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 22:30, 30 November 2020 (UTC)
 * Thanks very much, : I've now learnt to run it through commons:Commons:Commons_SVG_Checker (that's a lot of "commons"!) before uploading questionable files. One problem is that it renders it to the dimensions specified in viewBox (if width and height are 100%) whereas an uploaded thumbnail is 512 px wide on the File: page. Thus, if I use a huge size e.g. so that the axes have simple units e.g. year numbers in File:Ancient_seven_wonders_timeline.svg, the image is gigantic. Would you know if there's a way to control the size of the rendered thumbnail in Commons SVG Checker? Thanks, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 23:24, 30 November 2020 (UTC)
 * The three times commons, is more a joke; more commonly it is just c:Commons:Commons_SVG_Checker, or I often use the Url https://commons.wikimedia.org/w/index.php?title=Commons:Commons_SVG_Checker&withJS=MediaWiki:CommonsSvgChecker.js that loads the js automatically. The second commons is imho related to c:Category:Commons_tools similar to Help: or Template: and is imho the most strange one, i would prefer Tool: and the third commons is the name.
 * You partly answered your question yourself: The size by Commons SVG Checker can be controlled by width and height.
 * For File:Ancient_seven_wonders_timeline.svg I would recommend to use  for Commons SVG Checker (I did not try)
 * Generally I would remove, it is uncommon and there is imho no change.
 * More details about sizeing/scaling can be found in my last post in User_talk:Danmichaelo
 * Also some initially denied it (as impossible), I noticed that there are minor differences rsvg-versions between SVG-Checker (Toolforge) and the Wikimedia Renderer, see T218828 for details.
 * I you want to check a file in multiple resolution (without overwriting, or without creating a new page) you could also upload it to File:Test.svg. My personal Opinion: But also Test.svg uses Diskspace. After deletion, imho all files can be undeleted, so they are imho stored "forever". Also it is uncommon, if uploading to Test.svg don't forget to make the attribution in the upload-comment.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 06:28, 1 December 2020 (UTC)
 * You can shorten it even further - c:COM:Commons SVG Checker or even c:COM:SVG tester. -- Red rose64 &#x1f339; (talk) 19:43, 1 December 2020 (UTC)
 * You can shorten it even further - c:COM:Commons SVG Checker or even c:COM:SVG tester. -- Red rose64 &#x1f339; (talk) 19:43, 1 December 2020 (UTC)

Why does this file keep rendering fully transparent?
File File:Infinite Discs logo BW.svg looks fine in the browser, but it always renders as a transparent rectangle on Mediawiki. What am I missing? - Iketsi (talk) 19:54, 6 January 2021 (UTC)
 * ? It shows up fine for me when using the en.Wikipedia sandbox.
 * I don't know if this is the problem you're talking about, but: it has often been a problem looking at the PNG link of images having black text on transparent background, that Chrome renders the background black so you can't distinguish the text from the background. That is: clicking on one of "This image rendered as PNG in other widths: 200px, 500px, 1000px, 2000px" shows (on Chrome) a nearly totally black screen at https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Infinite_Discs_logo_BW.svg/500px-Infinite_Discs_logo_BW.svg.png I don't think there is a solution to this issue (if this is the issue you're having, sorry). — RCraig09 (talk) 22:09, 6 January 2021 (UTC)
 * No, my issue was that the logo generated as a purely transparent image. What's odd is that in the file preview before uploading, it was rendering fine. In the file history, you can still see the issue with 8 previous versions. I ultimately fixed it by correcting the viewBox (the fourth number was NaN for some reason). - Iketsi (talk) 23:23, 6 January 2021 (UTC)
 * Resolved. — RCraig09 (talk) 23:36, 6 January 2021 (UTC)
 * The image shown in the file preview before uploading is a true SVG that is rendered by your browser. The image shown on the file description page is a PNG that has been produced by putting the SVG through librsvg, as are the various images reached via the "This image rendered as PNG in other widths" links. On Wikipedia, after uploading, you can only see the file as a true SVG either by following the "Original file" link, or by clicking the image shown on the file description page. -- Red rose64 &#x1f339; (talk) 23:57, 6 January 2021 (UTC)
 * Thanks. The browser is more tolerant of irregularities than librsvg, so that explains the discrepancy in appearance between the preview before uploading and the uploaded result. But how come the early SVG files passed as valid in spite of a non-numeric viewBox value? - Iketsi (talk) 01:17, 7 January 2021 (UTC)
 * Glad you managed to fix the problem. Librsvg has many known bugs. If you find any others, please feel free to add them to the page. Thanks, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 02:31, 9 January 2021 (UTC)

librsvg cutting off bottom of image
Hi. Does anyone know why librsvg is cutting off the very bottom of Wikipedia's PNG version of File:CCEA (Council for the Curriculum, Examinations & Assessment) logo.svg (as seen in the infobox of the Council for the Curriculum, Examinations & Assessment page)? The PNGs at other sizes do not have the problem. Is there a workaround for this? – Green Tentacle (talk) 20:14, 9 January 2021 (UTC)
 * They look the same to me. What part is cut off? Have you tried a WP:BYPASS? -- Red rose64 &#x1f339; (talk) 21:10, 9 January 2021 (UTC)
 * On both instances of the letter g, the tail is cut off at the very bottom. I've tried WP:BYPASS and viewing on different browsers and devices. The PNG always looks the same. – Green Tentacle (talk) 21:43, 9 January 2021 (UTC)
 * Other than the "w" and "L", the letters along the bottom are drawn by means of elements, where the   attributes specify the centre-line for the component lines and arcs that make up each letter. These centre-lines are then stroked (thickened up) to become visible. Part of the problem is that the thickness of the lines is unspecified - that is, there are no explicit   attributes, so a default value is used.
 * The two letter "g" are drawn by the first and eighth elements - that is, the ones where the   attribute begins with the commands   and  . A little after half-way through each   attribute are the commands   and   - these specify the descenders using four elliptical arcs each. The second and third arc in each one dip right down almost to the bottom edge of the viewport, so that when the line is stroked part of the line's thickness may be outside the viewport. You either need to extend the viewport downwards, or redraw the descenders. -- Red rose64 &#x1f339; (talk) 00:36, 10 January 2021 (UTC)
 * Hi. Thanks for your very clear explanation of what is happening. As you can probably tell by the fact the image is a logo, I didn't make the image and in fact extracted it from a PDF. I decided the easiest way to tackle this (seeing as it's slightly beyond the edge of my SVG knowledge) was to go back to the PDF and extract the image again, this time fiddling with some settings (like outlines) and exporting in a different method. I wasn't optimistic, as the preview in Wikipedia's upload page still showed the bottom of the image being cut off, but I tried anyway and happily the image now displays correctly in all sizes of the PNG preview. Thank you so much for your help. – Green Tentacle (talk) 19:47, 10 January 2021 (UTC)

Text misaligned not because of the usual reasons
Hi experts!

I wonder if anyone here knows why the labels in the bottom figure are misaligned. The font size is a reasonable 28px and it inherits text-anchor:end from the main class. It is because the transform="... scale(20)" is too large a scale?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 14:44, 24 January 2021 (UTC)


 * I don't understand the bug, but changing  to   seems to help. I think it is related to T35245  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes   Kalliauer  - contrib. 15:53, 24 January 2021 (UTC)


 * Many thanks, looks great now! T35245 seems quite vague. I'll add it to the list of problematic images. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 20:27, 24 January 2021 (UTC)

marker orient="auto-start-reverse" not recognised
Hi experts,

Before I file this as a bug on commons:Librsvg_bugs, I'd like to check if anyone is aware of Librsvg not recognising the attribute orient set to auto-start-reverse for the marker tag, or did I just make a careless mistake? The arrowheads for the dimensions and axes all point to the right, instead of in the direction of the line ending. They work fine on Firefox and Chrome. It's my first time using auto-start-reverse but I've used auto before and they work.

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 02:10, 8 February 2021 (UTC)
 * Librsvg expects the file to comply with SVG 1.1, which allows only  or an angle for [//www.w3.org/TR/SVG11/painting.html#OrientAttribute the   attribute]. The value   is [//www.w3.org/TR/2018/CR-SVG2-20181004/painting.html#OrientAttribute defined in SVG 2], which is still at the candidate recommendation stage, so not yet a formal W3C Recommendation. -- Red rose64 &#x1f339; (talk) 17:56, 8 February 2021 (UTC)
 * Thanks very much, Redrose64. Well spotted. I should've checked. I'll have to use separate arrowheads with auto then. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 19:36, 8 February 2021 (UTC)

Image resizing request
Hi experts, I uploaded the file Super Bowl XLV Logo.svg to Wikipedia, but the logo seems to be misplaced and very small, and the rendering is incorrect, as I extracted it from a PDF file. Is it possible for someone to move to logo where it should be, in the upper left hand corner, similarly to File:Super Bowl XLVI Logo.svg, so that it will render correctly? -- Politicsfan4 21:19, 14 February 2021 (UTC)
 * ✅ Pbrks (talk) 03:01, 15 February 2021 (UTC)

Signature crop
I uploaded File:Tim Mahoney Signature.svg to Wikipedia, but there seems to be some sort of transparent border on its right side, and it therefore renders very small. Since I want to use this in the article Tim Mahoney, could someone possibly crop this "border"? Thanks. -- Politicsfan4 (talk) 17:51, 24 February 2021 (UTC)
 * ✅ Pbrks (talk) 04:29, 25 February 2021 (UTC)

File:Mitosis Stages.svg
The file File:Mitosis Stages.svg has a typo in its second image - it should be "mitotic" rather than "miotic", as en:File talk:Mitosis Stages.svg noted. Jo-Jo Eumerus (talk) 14:03, 28 February 2021 (UTC)
 * ✅ Though I've fixed the misspelling, the file is less than ideal. The text has been converted to paths, so cannot be easily internationalised, and is too small to read without zooming in. There are also several embedded bitmaps with uncertain purpose. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 01:32, 1 March 2021 (UTC)

Stroke width exceeding radius rendering differently from web browsers
Hi again,

Dots appear in the spots in the figure, presumably because I tried to apply a stroke-width of 3, greater than the circle's radius r of 1: <circle id="spot" cx="0" cy="0" r="1" stroke-width="3"/> As this behaviour isn't listed on commons:librsvg_bugs, but Firefox, Chrome and Edge all fully fill the circle, I don't know if this can be considered a librsvg bug.

Cheers, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 01:00, 12 March 2021 (UTC)

Maint:Attr-user not existing
I recently uploaded a file with a messed-up gradient. When you see it, it looks dark when it is not supposed to be. IF you open the origin file, you can see how I intended it to look.

I noticed that this was placed in the Commons category Category:Maint:Attr-user not existing. I assume this is the problem, but I have no idea what it means. W3C validator says this image is valid. This is really confusing.

Can anyone here help? -- Diriector_Doc ├─────┤<sup style="margin-left:-5em">Talk <sub style="margin:0 1em 0 -1.8em">Contribs  19:36, 2 April 2021 (UTC)
 * The file description page is in c:Category:Maint:Attr-user not existing because it has - but  is not a registered user. -- Red rose64 &#x1f339; (talk) 13:04, 4 April 2021 (UTC)
 * As for the gradient problem, it's possible that you've used certain shorthand ways of adding path data, that are not recognised by librsvg (see previous threads on this page, such as SVG help/Archive 7, SVG help/Archive 8). Have you asked at c:COM:VPT or perhaps c:Commons:Graphic Lab/Illustration workshop? -- Red rose64 &#x1f339; (talk) 13:54, 4 April 2021 (UTC)
 * Fixed the gradient problem. Turns out, there was a `style=""` attribute that defined the `stop-opacity`, which my browser and my editor used to overwrite the `stop-opacity=""` attribute. I guess when the image is uploaded, MediaWiki prefers the defined attributes rather than the `style` attribute. -- Diriector_Doc ├─────┤<sup style="margin-left:-5em">Talk <sub style="margin:0 1em 0 -1.8em">Contribs  15:00, 6 April 2021 (UTC)
 * The SVG spec allows either  or , they are interchangeable. But as you noticed, if you have both forms in the same element and they have different values, as here:   the user agent (your browser is a user agent, and so is librsvg) has no clear indication of which one to use, and different agents may have differing rules of precedence. So, as you surmised, the correct solution is to remove one of them and so resolve the ambiguity. -- Red rose64 &#x1f339; (talk) 16:32, 6 April 2021 (UTC)

UE logo.svg
I uploaded File:UE_logo.svg after extracting it from this PDF with Inkscape, however the images rendered by librsvg (such as in the revision thumbnails and the article page) have letter misalignment.

I'm sure this is bad letter-alignment on small font-size, but is there an easy way to fix the font size for each of these text elements with (or without) Inkscape? I have tried editing the SVG text using simple find and replace, but I run into problems adding  where there are already rotation transforms, and assume I can't increase the viewbox size for a non-free image. Soapwort (talk) 05:33, 31 March 2021 (UTC)
 * For whatever reason ungrouping certain elements has helped (before, after), but the alignment still does not match the original. Soapwort (talk) 06:23, 31 March 2021 (UTC)


 * Part of the problem is that the 7.6394px font-size is lower than the recommended 20px. To ensure that the baselines are aligned, I centred everything on the middle of the logo, and use rotate and translate transforms to move the letters in place (y="0.7ex" moves the origin of each letter to approximately its centre):


 * You can change the rotate(...) values to change the spacing along the arcs. Hope that helps, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 10:46, 1 April 2021 (UTC)
 * This is an elegant solution, thanks. Using this I was able to move the decimal point in the group font-size (i.e. 76.394px) and add  to each text tag, fixing the alignment issues. Soapwort (talk) 06:34, 2 April 2021 (UTC)
 * ✅ Good idea, I've simplified it by taking the   out. cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 11:20, 7 April 2021 (UTC)

Missing rows of pixels
While helping with a request, I noted that the thumbnail renderer misses out pixels, the most severe being the minus sign before 1/3 on the fifth row. Some equal signs also appear as minus signs.

It seems most widths are susceptible. This issue is especially bad on mobile phone browsers: 216px works on a PC but not on Android.

I suppose I can repeat every row by thickening the text but it will unnecessarily bold the text.

Does anyone have a good solution?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 09:30, 13 April 2021 (UTC)
 * I think I read it somewhere, possibly in a post by, that multiples of 4px are preferred. 216 exactly divides by 4; 218 does not. -- Red rose64 &#x1f339; (talk) 16:53, 13 April 2021 (UTC)
 * Thanks, . I'll check with RexxS. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 00:21, 16 April 2021 (UTC)
 * ✅ It seems the filter to add a white outline to make text stand out from overlapping lines failed at lower thumbnail sizes. After removing it from the maths, pixels are no longer missing. cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 12:29, 21 April 2021 (UTC)

"<Use ...>" paths not appearing in WMedia projects
The first version of the SVG image at right had 35 separately recited path elements for the blue structures (Inkscape version, not very efficient).

For Version 2, I used and 35 more efficient <use ...> instances, but the blue paths do not appear on Wikimedia projects or in the following two SVG testers—even though they appear perfectly fine on Chrome, Firefox and Safari directly!


 * Checker #1: wmf tools SVG check
 * Checker #2:  Commons SVG Checker

I just reverted to Version 1, but... what's wrong with Version 2? Thanks in advance for your wisdom. — RCraig09 (talk) 18:18, 21 April 2021 (UTC)
 * ✅ The thumbnail renderer requires xlink:href instead of href, but that causes browsers to fail, so xmlns:xlink="http://www.w3.org/1999/xlink" must also be added to the svg tag. I've uploaded version 4. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 01:11, 22 April 2021 (UTC)
 * P.S. Frankly, 4 extra KB isn't a big deal, but since we're going this route, I saved 2 more KB by replacing your use with a pattern because the background is regular. Take a look at the code...
 * Thanks! (I had read that xlink was deprecated so I avoided it.) I'm self-taught in svg for barely a year, and there are a lot of details and tricks and shortcuts to learn. It's noteworthy that we cut the length of the Inkscape original by better than half. — RCraig09 (talk) 03:43, 22 April 2021 (UTC)
 * My pleasure. I'm self-taught, too, and am still learning new things about SVG after over ten years of making them. Feel free to message me if you've any questions or images to collaborate on. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 19:52, 23 April 2021 (UTC)

How to do CSS 3D transformations?
Would anyone know if CSS 3D transformations, specifically rotateX, are supported by librsvg?

I made this SVG using style="transform:translate(60px,70px) scale(0.1) perspective(800px) rotateX(45deg);" It looks fine on Firefox but squashed in Chrome. The transformation is not rendered in Commons thumbnails. The standard way e.g. transform="rotateX(45deg)" which I use for affine transforms doesn't work for 3D transforms.

Is there a recommended standard way to do such transformations?

Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 19:35, 20 May 2021 (UTC)


 * 3D-transforms are imho just a “working draft” and not publiced in the SVG 1.1-recommendation.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 16:08, 21 May 2021 (UTC)
 * The implementation of librsvg that we have installed on the Wikimedia servers recognises only [//www.w3.org/TR/SVG11/ SVG 1.1] and [//www.w3.org/standards/history/css1 CSS 1.0] - if you use any feature that is not explicitly described in those specs, it will not work - even if it is found in subsequent versions whether recommended or just proposed. CSS 1.0 does not have any transform features (other than [//www.w3.org/TR/2018/SPSD-CSS1-20180913/#text-transform the  property]), so you need to stick to those techniques described [//www.w3.org/TR/SVG11/coords.html here]. -- Red rose64 &#x1f339; (talk) 14:20, 22 May 2021 (UTC)
 * Many thanks, and . Pity SVG 1.1 doesn't support perspective transforms, which would help much in making pseudo-3D scenes. I've updated the diagram with an affine transformation (transform="matrix(...)"), which I found is supported. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 22:28, 22 May 2021 (UTC)

CSS-support
The librsvg-developer asked to request for comments what CSS-support Wikimedia needs. Be aware Wikimedia uses librsvg 2.40, and in librsvg 2.50 more than 50% of the librsvg-bugs reported a are resolved upstream, including all reported CSS-bugs, see my comment for details.

Maybe you want to comment on librsvg#736 RFC: meta-issue for CSS needs for Wikimedia, since you know more about important css-features than me.

— <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 08:15, 18 May 2021 (UTC)


 * Thanks for driving this. I'm not on gnome.org, so hope you don't mind my replying here. To me, fixing the existing bugs, especially the nested use bug, is more important. But if I had to suggest new features, in descending priority:


 * 1) ref and param for parameterised text
 * textPath for curved text
 * 1) orient="auto-start-reverse" for markers
 * 2) Possibly 3D transforms below

cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 21:54, 20 May 2021 (UTC)
 * Cheers,


 * 58% of the existing bugs reported on phabricator are fixed in rust-librsvg-2.50, see https://www.mediawiki.org/wiki/User:JoKalliauer/phab/wikimedia-svg-rendering for details, also the phab:T276684 nested use bug. That is also more related to librsvg#729 RFC Wikimedia re-evaluates svg-renderer (on librsvg).
 * parameterised text (can you provide an example I’m bad with specs)
 * librsvg#87 textPath support
 * that’s imho an SVG2.0-features, I personally would call that invalid because Wikimedia imho want’s files that can be rendered also in 20 years (e.g. deapreciated flowRoot never released and will imho never be commonly supported)
 * I would call that a funny feature but out of scope, we have imho more serious bugs to worry.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 08:24, 21 May 2021 (UTC)
 * reported upstream  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 08:27, 21 May 2021 (UTC)
 * Many thanks for looking into and reporting them. I saw the Phabricator meeting invitation too late today so pity I missed it. I'll put any relevant thoughts on the page. Re points above:
 * I'm mistaken about what ref and param do: they seem to be a glorified tref. What would be useful for raw-code editors like me is something akin to currentColor but for text, e.g. I don't know if any SVG spec currently supports something like this. Would anyone here know?
 * Looking forward to textPath support.
 * No problem, it's just a hassle either creating another marker which is horizontally flipped, or adding an almost-zero-length path with the marker as marker-end.
 * Fair enough while it's still unofficial.
 * No problem, it's just a hassle either creating another marker which is horizontally flipped, or adding an almost-zero-length path with the marker as marker-end.
 * Fair enough while it's still unofficial.


 * An even bigger ask: I don't suppose there's a way to render SVG with SMIL or CSS animation into an animated GIF? Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 00:27, 23 May 2021 (UTC)


 * The session was a bit disappointing to me, because I noticed it is kind of stuck. According to Debian_version_history it is planed this summer to upgrade tag/thumbor/ to Debian version history, see T216815, when it will be actually be done might be another question (but sure not earlier). p/Gilles/ is imho responsible for it, however he is also in the Wikimedia_Performance_Team. I do not understand, why the software need to be packed for debian, however if WMF won’t package a newer version it will mean, we will get an old version of resvg0.8 or old version of librsvg2.44.
 * is a feature-request T106240 that is resolved upstream
 * text can be refereed with  see File:MediaWiki_SVG_font_list_sans.svg
 * textPath is supported by resvg, see c:User:JoKalliauer/SVG_test_suites/textPath (Scroll down)
 * User:Glrx seems to know the whole svg-spec, he might know.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 22:44, 24 May 2021 (UTC)


 * Other than some obvious bugs, rsvg is not too bad – at least we've developed workarounds for common bugs. My concern is another renderer will likely have other bugs for which we have no workaround. Re your points (I've numbered above):
 * currentColor already works within an SVG file.
 * I wish to do the reverse: instead of applying different formatting to the same text, I wish to apply different text to a template. CSS works for simple cases e.g. colour or font, but more elaborate cases e.g. drawing a shape around the text requires something like  for each instance. What would be great is something like   and the   template sets a designated   tag to the   value.
 * Looking forward to using it.
 * OK
 * Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 00:56, 26 May 2021 (UTC)


 * "My concern is another renderer will likely have other bugs"


 * Maybe we should worry more about regression-bugs than on resvg-bugs I checked the 142 svg-images that are features: 8 are rendered wrong by librsvg 2.50 in english (one of them is a regression bug, so it worked in 2.40) and all are rendered correct by resvg, see c:User:JoKalliauer/SVG_test_suites for details. Be aware that there is a serious regression-bug in librsvg 2.44.0 till 2.50.5, it does not support hypenated language-tags, so actually those are not even counted. So don’t worry about resvg-bugs, and the workarounds is mostly to stick to the specifics see e.g. c:User:JoKalliauer/SVG_test_suites.
 * According to User:GDubuc_(WMF) (he is responsible for updating thumbor), it is not necessarily one or the other, see T40010, however WMF would need to maintain two svg-renderer.
 * yes currentColor works, but (differently to what I wrote, I meant that) the T106240 is a feature-request to inherit external css
 * so you mean something like ?
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 09:12, 26 May 2021 (UTC)

Why didn't my upscale work?
Hello!

I tried upscaling File:Fluix logo 2014.svg following the guide at User:Ronhjones/SVGreduce.
 * Before:
 * After:

But it didn't work as expected. Only the viewbox was upscaled, not the logo itself. Please help me :) Jonteemil (talk) 22:36, 31 May 2021 (UTC)
 * I don't think that it's intended for upscaling - it's probably called SVGreduce for a good reason. -- Red rose64 &#x1f339; (talk) 22:51, 31 May 2021 (UTC)
 * So it matters if you scale it down or up? How can you scale it up with a texteditor, do you know?Jonteemil (talk) 23:02, 31 May 2021 (UTC)
 * No it does not depend it you up- or down-scale, the answer could be found in the source/reference. Why would you like to upscale it? However you should not upscale fair-use images. A logo has a smaller maximal allowed fair-use-size than a complex diagram. It only exist a rule of thumb for raster-images, but there is not rule for vektor-images on Wikipedia, however User:Ronhjones applied the raster-image-settings to the preview (but only on downscale), which is imho senseless. Now the bot also upscales, which is definitely wrong. The correct way to provide fair-use-svgs is to reduce the precision (e.g. significant number of digits in the svg), however that is difficult to implement. Another option would be to only save a rasterized version.
 * Reduce in term of fair-use is more related to content/data (i.e. file-size). However because it is difficult to reduce the actual content, without breaking the file, it is only about reduction of the data in the preview (i.e. smaller png-file-size).
 * "This non-free media file should be replaced with a smaller version to comply with Wikipedia's non-free content policy and United States copyright law."
 * "This non-free media file should be replaced with a smaller version to comply with Wikipedia's non-free content policy and United States copyright law."

- Template:Non-free_reduce


 * "There is no firm guideline on allowable resolutions for non-free content; images should be rescaled as small as possible to still be useful as identified by their rationale, and no larger. This metric is very qualitative, and thus difficult to enforce. Some legal proceedings have discussed the issue, but are inconclusive here."

- Non-free_content


 * A screenshot will need a much higher resolution than a logo, otherwise the text is not readable, so don’t scale all to the same value, and definitely don’t do any upscales (except is not recogniceable [e.g. below 10px]). The recommended value is just a rule of thumb, but noone ever said that someone should upscale anything, especially not logos to such huge size.
 * Conclusion: Don’t upscale fair-use svg-logos, it (most likely) violates the criteria.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 07:46, 1 June 2021 (UTC) (edited 10:04, 1 June 2021 (UTC))
 * All SVG images are scalable (provided that they don't included embedded binaries), that's what the S stands for and is kinda the point about them. An SVG image should have in its tag either or both of (i) [//www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute   and   attributes] or (ii) a [//www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute   attribute]. So far as the Wikimedia projects are concerned, the   attribute is the most useful, since the only purposes of   and   are (i) to set the values shown in text like "Original file ‎(SVG file, nominally 64 × 64 pixels, file size: 951 bytes)", and (ii) to set the dimensions of the primary thumbnail shown on the file description page. But the non-free enforcement people also take those dimensions into account (even though they are so easily overridden), and to keep those people happy the product of width and height should not exceed 100,000 (see WP:IMAGERES) which means for a square image like this, set   as you noted above. However, you should leave   alone, unless you are willing to go through all of the coordinates in the   attributes of the three  tags and adjust those too. -- Red rose64 &#x1f339; (talk) 14:07, 1 June 2021 (UTC)
 * One way to downscale (I suppose that's the intention for fair use) SVG images is to wrap everything inside the  in e.g.   (0.1 shrinks everything to 10% of its original size) and update   accordingly.
 * Though SVG without embedded bitmaps are indefinitely scalable in theory, the thumbnail renderer shows poor kerning for text below around 20 pixels. It may also affect the effect of SVG filters. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 23:34, 1 June 2021 (UTC)
 * Okay, thank you, that makes sense!
 * When the nominal size of SVG logos are super small, to the extent that you can barely see it on the  page then I think it is justified to upscale it to the WP:IMAGERES 0.1 megapixels. I have only tagged files with SVG upscale that have been below 100 pixels AND that have been to small to be seen.Jonteemil (talk) 18:00, 7 June 2021 (UTC)

Radial gradient lost at small thumbnail sizes


I found another strange behaviour with the rsvg: in Firefox and Chrome on Ubuntu, the radial gradient forming the "bubbles" disappears when the thumbnail width is under 281 pixels.

Can you (or anyone else) please help? Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 00:19, 6 June 2021 (UTC)

P.S. Both sizes look fine in Chrome on Android.




 * Because Smartphones have smaller pixelsizes (more pixels per inch), they often use twice the size of the size of the Desktop.
 * You need to compare the direct png-links, otherwise you get a different px-size. (not the specified one)
 * 280: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Comparison_gender_life_expectancy_CIA_factbook.svg/280px-Comparison_gender_life_expectancy_CIA_factbook.svg.png
 * 281: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Comparison_gender_life_expectancy_CIA_factbook.svg/281px-Comparison_gender_life_expectancy_CIA_factbook.svg.png
 * The file is correctly rendered by
 * rust-librsvg2.50
 * resvg
 * Inkscape
 * Batik
 * I wrote a bug-report on T284407.
 * If you could try to make a minimal working example as File:T284407.svg that would be very helpful. The conclusion is that a large transform such as  should not be used, and in combination with   it seems to break down.
 * — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 19:33, 6 June 2021 (UTC)
 * Thank you very much. I wonder if you were looking at a different file. File:Comparison_gender_life_expectancy_CIA_factbook.svg doesn't have abnormal transforms. The circles have radii from around 1 to 97, the viewBox="400 -955 560 490" and the circles don't even have transforms applied. Is there another known bug? Thanks, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 21:41, 6 June 2021 (UTC)
 * You have viewBox of "400 -955 560 490", so that's similar to a transform of 955, that’s pretty close to the 1e4 I have. I simplified the file more and more, and setting the center to the origin removed the issue. — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 06:54, 7 June 2021 (UTC)
 * It would be helpful if you provide a minimal working example.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 07:00, 7 June 2021 (UTC)
 * Thanks, I'll provide a minimal working example. I've used viewBoxes of much larger offsets (tens of thousands) without problem so think something else is causing it. I'll debug it when I can. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 21:50, 7 June 2021 (UTC)
 * FYI it is fixed in rust-librsvg2.50, so basically a bug-report is just for Wikipedia-documentation (black-hole). c-librsvg2.40 is not developed any more.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 17:02, 8 June 2021 (UTC)
 * FYI it is fixed in rust-librsvg2.50, so basically a bug-report is just for Wikipedia-documentation (black-hole). c-librsvg2.40 is not developed any more.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 17:02, 8 June 2021 (UTC)

Signature of Libuše Šafránková
Hi, would someone please render this signature: File:LŠ podpis.jpg? The actress passed away this week. Thanks, --Pakeha (talk) 16:02, 11 June 2021 (UTC)


 * This page is more for problems with svg.
 * If you like that the jpg gets vectoriced you should probably ask at Graphics_Lab/Illustration_workshop  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 18:02, 11 June 2021 (UTC)
 * ✅ Thanks for your advice! --Pakeha (talk) 19:39, 13 June 2021 (UTC)

vector showing up fully transparent
Trying to upload a vector on the commons and it keeps showing up as transparent. When I put onto Inkscape and the file preview before uploading, the logo shows. Any reason for this?

Link:  Troutfarm27  (Talk) 07:09, 16 July 2021 (UTC)
 * It's possibly the  attributes that occur six times on  tags - I can't find where   is defined. Have you tried putting the image through c:COM:Commons SVG Checker? -- Red rose64 &#x1f339; (talk) 07:58, 16 July 2021 (UTC)
 * I put it through the SVG checker and while it doesnt show there, it does show when I click on the "original file" button on commons. I also don't know how to resolve it since I just took it directly from the arena's website. Troutfarm27  (Talk) 03:14, 17 July 2021 (UTC)

Update: I was able to resolve the issue. I reuploaded the logo at. Thank you for pointing that out, Redrose64! Troutfarm27 (Talk) 09:46, 21 July 2021 (UTC)

"Too Many Requests" rsvg server error
I'm experiencing the error message "Error: 429, Too Many Requests at Thu, 12 Aug 2021 21:04:17 GMT" again with this SVG. The image on File:fewest_weights_balance_puzzle.svg is fine. Is it due to the SVG filters? Thanks, cm&#610;&#671;ee⎆&#964;a&#671;&#954; 21:06, 12 August 2021 (UTC)
 * Where is this error message shown? -- Red rose64 &#x1f339; (talk) 22:56, 12 August 2021 (UTC)
 * It was on https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Fewest_weights_balance_puzzle.svg/200px-Fewest_weights_balance_puzzle.svg.png but it looks like it's working now, and the thumbnail on the right is no longer blank. Thanks anyway, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 23:59, 12 August 2021 (UTC)

svg map for India–Yugoslavia relations
please create an svg file for it to be uploaded in the article: India–Yugoslavia relations. Utkarsh555 (talk) 18:53, 8 September 2021 (UTC)


 * This page is more for technical problems with existing svg-files.
 * Please ask at e.g. https://commons.wikimedia.org/wiki/Commons:Graphics_village_pump  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes   Kalliauer  - contrib. 21:31, 8 September 2021 (UTC)

Possible Rsvg bug for marker-mid rendering
Hi experts,

While making File:Euler_characteristic_hypercube_simplex.svg, I wondered if this was a known bug of Rsvg. It's different from commons:Librsvg_bugs.

In the test image here, the upper-left dot is missing in the Rsvg rendering but not on Chrome and Firefox. The bottom image has an extra v 0 to work around the issue, but it's clumsy.

Thanks, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 10:30, 9 September 2021 (UTC)


 * Thanks for this file.
 * I don’t know what the specifics say about it. (if it is well defined)
 * batik, inkscape, rendersvg render the svg with dot
 * c-librsvg2.40 and rust-librsvg2.50.7 and rust-librsvg2.51.2 render it without dot.


 * Since it is not on https://www.mediawiki.org/wiki/User:JoKalliauer/phab/wikimedia-svg-rendering#table I expect that it is not on phab:, but it might already exist on https://gitlab.gnome.org/GNOME/librsvg/-/issues/.


 * I will take a look at it later (some days/weeks).  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 12:36, 9 September 2021 (UTC)


 * Many thanks for your prompt attention and checking the behaviour on many renderers. I'm unfamiliar with the SVG spec and so can't say what the correct behaviour should be, though having the dot seems more logical from an editor's perspective. No rush to investigate it, especially since there's a simple workaround. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 20:23, 9 September 2021 (UTC)
 * P.S. http://w3.org/TR/svg-markers#MarkerMidProperty states,
 * ‘marker-mid’ is used to specify the marker that will be drawn at all other vertices (i.e., every vertex except the first and last).
 * (emphasis mine). As the vertex before the m is neither the first nor last, it should have a marker, thus c-librsvg2.40 and rust-librsvg2.50.7 and rust-librsvg2.51.2 are incorrectly implemented. cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 00:07, 11 September 2021 (UTC)


 * Thanks so much for raising http://phabricator.wikimedia.org/T291581 much appreciated! cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 17:20, 22 September 2021 (UTC)

File:Selenium logo.svg
Hi. See (just trying to get visibility, as that page is not very active) -- something is totally wrong with the rendering of this SVG and I would like to know if anyone can fix it. DemonDays64 (talk) 01:10, 27 September 2021 (UTC)
 * Answered there. -- Red rose64 &#x1f339; (talk) 07:53, 27 September 2021 (UTC)

Generating SVGs of symbols from fonts
Could someone point me in the right direction? I'd like to create SVGs of symbols on a transparent background, converting the font I have to graphics so they display properly. Thanks. — kwami (talk) 11:35, 27 September 2021 (UTC)
 * Kwamikagami, the simplest way to do this would be by installing the font to your system, typing using it in Inkscape, converting to paths and exporting as an SVG. If you want to do a batch of these it's a bit harder. You could try installing the open-source font editor FontForge, and following this guide on how to export SVGs en masse by the command line from Stack Overflow. I'm sure there are other ways that maybe people can give input on. — Berrely  • Talk∕Contribs 18:19, 27 September 2021 (UTC)
 * That should give me enough to work with, thanks. I'd tried 'converting to lines', but it had no effect. I'll try again to see what I did wrong. — kwami (talk) 18:36, 27 September 2021 (UTC)
 * Ah, in Inkscape it's  —  Berrely  • Talk∕Contribs 18:47, 27 September 2021 (UTC)
 * Yeah, that's what I did. But if it's anything like Gimp, maybe I need to change the focus or something for it to take effect. — kwami (talk) 22:01, 27 September 2021 (UTC)

Possible Rsvg bug causing gaps in mask where two shapes abut


Hi Rsvg experts,

I used two bow-tie shapes filled with a linear gradient (the second rotated 90 degrees) in a mask to fade out the edges of the right-hand figure. Some pixels are not painted where the shapes meet each other at the diagonals, giving a large faint white "X". It's much less apparent when opening the SVG in a browser. Can this be considered a bug in the thumbnail renderer?

Can someone suggest a workaround to get this fade-out effect, perhaps using SVG filters?

Thanks, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 11:48, 29 September 2021 (UTC)


 * Reading https://github.com/RazrFalcon/resvg/issues/234 I would consider hairline-cracks as a malformed SVG, since most libaries render/antialise it wrong. It is listed at c:Librsvg_bugs.
 * The only way to workaround this render-issue is to draw overlapping.  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 12:01, 29 September 2021 (UTC)
 * For filters check the discussion at https://gitlab.com/inkscape/inkscape/-/issues/928  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 12:05, 29 September 2021 (UTC)


 * Thanks for bringing hairline cracks to my attention, . Shame there's no elegant solution. I've replaced the mask with the SVG filter below. Cheers, cm&#610;&#671;ee&#9094;&#964;a&#671;&#954; 22:45, 29 September 2021 (UTC)

Not rendering SVG
Hello!

Can someone perhaps take a look at de:File:BaumNeu3.svg. I you remove the title tag and replace the first SVG tag with the width, height and viewbox with just it works for some reason but doesn't display the entire file I think.Jonteemil (talk) 14:39, 8 October 2021 (UTC)


 * was missing  — <span style="font-family:Trendy, Tempus Sans Itc;">Johannes  Kalliauer  - contrib. 16:25, 8 October 2021 (UTC)