Jump to content

Wikipedia:SVG help/Archive 9

From Wikipedia, the free encyclopedia
Archive 5Archive 7Archive 8Archive 9Archive 10

SVG multiply blending

Can someone take a look at File:Post Luxembourg logo.svg? I was able to get the multiply blending working on wikipedia, but for some reason it introduced some weird artifacts in the rendering. You can see the artifacts in the upper left corner (around the edge of the orange circle) here. Auguel (talk) 06:13, 31 October 2021 (UTC)

Have you tried addressing all of the errors that validator has thrown? --Redrose64 🌹 (talk) 21:56, 31 October 2021 (UTC)
I guess the SVG validation is run by a bot, and the validation was run on an old file. Anyway I checked my new file with an external validator and it showed some errors but they were all related to stop elements missing the offset parameter. I uploaded a new file which corrects this issue (and checked it with an external validator to confirm). But the rendering issue is still present. Auguel (talk) 22:16, 31 October 2021 (UTC)
Firstly, backgroundImage is deprecated. However, there is no good alternative as the link explains. I've thus added a workaround for Firefox. As for the immediate issue, it seems RSVG supports backgroundImage but has trouble antialiasing semitransparent pixels (alpha < 255). I thus initially made the background white so that the bug goes away. To retain the transparent background, I used a filter (filter_mask) to make the entire logo white, and set it as a mask. Applying it to the white-background-plus-logo group cuts out just the logo. Can someone please raise a bug report about the trouble antialiasing semitransparent pixels? Let me know if there are more issues, cmɢʟeeτaʟκ 03:07, 1 November 2021 (UTC)
P.S. I tweaked the colours on the text to more closely match http://posttrack.com/cdn/images/carriers/thumbnails/0162-post-luxembourg.png .
@Cmglee: Thanks. Definitely a lot to consider there. Unfortunately it doesn't seem your workaround is quite perfect. You have lost the gradient fill of the previous images. Also I don't think tweaking the colors was necessary as the initial svg was taken straight from the source (https://cdn.post.lu/postlu/babel-theme/assets/images/logo-post.svg), the only problem is that it doesn't render correctly on wikipedia. Auguel (talk) 04:01, 1 November 2021 (UTC)
@Auguel:@HapHaxion: I restarted from https://cdn.post.lu/postlu/babel-theme/assets/images/logo-post.svg and first worked around the arc-space bug. I had to put in two huge workarounds:
 <filter id="filter_rsvg">
  <feBlend mode="multiply" in2="BackgroundImage"/>
 </filter>
 <filter id="filter_mask">
  <feColorMatrix type="matrix" values="0,0,0,0,1 0,0,0,0,1 0,0,0,0,1 0,0,0,1,0"/>
 </filter>
 <mask id="mask_rsvg">
  <use xlink:href="#for_rsvg" filter="url(#filter_mask)"/>
 </mask>
 <g mask="url(#mask_rsvg)">
  <path d="M51 102c28.166 0 51-22.834 51-51S79.166 0 51 0 0 22.834 0 51s22.834 51 51 51z" fill="#fff"/>
  <path d="M84.92 58.509a27.304 27.304 0 0 0-3.829-13.981c1.113-7.957-.975-15.237-6.395-19.467a16.325 16.325 0 0 0-7.245-3.189c-4.343-4.546-9.757-7.178-15.59-7.095a19.592 19.592 0 0 0-11.18 3.889 23.128 23.128 0 0 0-13.467 4.122c-12.779 9.04-13.568 29.978-1.73 46.728 11.84 16.751 31.067 21.902 44.976 14.167a18.404 18.404 0 0 0 6.03-5.385 27.567 27.567 0 0 0 8.43-19.79z" fill="#fff"/>
  <g id="for_rsvg">
   <use xlink:href="#paint0" filter="url(#filter_rsvg)"/>
   <use xlink:href="#paint1" filter="url(#filter_rsvg)"/>
   <use xlink:href="#paint2" filter="url(#filter_rsvg)"/>
  </g>
  <set id="avoid_double_image_in_chrome" attributeName="visibility" to="hidden" fill="freeze"/>
 </g>
 <g id="for_browser" visibility="hidden">
  <path id="paint0" style="mix-blend-mode:multiply" d="M71.867 36.833c11.85 16.793 12.527 39.125-1.376 46.86-13.904 7.735-33.16 2.627-45.006-14.178-11.845-16.805-11.05-37.69 1.729-46.74 12.778-9.052 32.783-2.735 44.653 14.058z" fill="url(#paint0_linear)"/>
  <path id="paint1" style="mix-blend-mode:multiply" d="M77.569 48.344c.335 18.79-10.625 34.226-24.48 34.477-13.856.251-25.366-14.783-25.725-33.573-.359-18.791 10.643-34.226 24.498-34.471 13.855-.245 25.39 14.776 25.707 33.567z" fill="url(#paint1_linear)"/>
  <path id="paint2" style="mix-blend-mode:multiply" d="M73.02 62.792C62.551 76.18 46.35 80.996 36.82 73.56c-9.529-7.436-8.781-24.337 1.676-37.725 10.457-13.389 26.67-18.21 36.2-10.768 9.53 7.442 8.782 24.336-1.675 37.725z" fill="url(#paint2_linear)"/>
  <set id="avoid_double_image_in_rsvg" attributeName="visibility" to="visible" fill="freeze"/>
 </g>
  1. Since Firefox and Chrome support style="mix-blend-mode:multiply", the for_browser group retains this method. To avoid badly rendered SVG appearing in the thumbnail, it is initially invisible, but the set command reveals it in browsers, but not Rsvg, which doesn't support SMIL.
    Rsvg meanwhile supports BackgroundImage in filters, which the for_rsvg group uses. To avoid badly rendered SVG appearing in Chrome, set hides it.
  2. As in my last message, the logo is placed on a white background to work around the semitransparent-pixel-artifact bug. I then created a mask from a completely white version of the logo to mask the background off.
Hope that fixes all the problems. Let me know if anything else is awry. Cheers, cmɢʟeeτaʟκ 14:12, 1 November 2021 (UTC)
Many thanks to all of you for your efforts on fixing the file! HapHaxion (talk / contribs) 15:46, 1 November 2021 (UTC)
Yep thanks a lot cmglee. Auguel (talk) 16:30, 1 November 2021 (UTC)
Demonstration of antialiasing pixel artifacts on elements with a filter using BackgroundImage. On the left half, artifacts appear at boundaries with the transparent background. On the right half, the background is white, and the artifacts are absent.
My pleasure. I've created a simple SVG demonstrating the bug. cmɢʟeeτaʟκ 12:53, 2 November 2021 (UTC)
Checkmark This section is resolved and can be archived. If you disagree, replace this template with your comment. Auguel (talk) 16:30, 1 November 2021 (UTC)

Electoral College Map

I would really appreciate it if one of you wonderful experts could make a map similar to this one...

https://upload.wikimedia.org/wikipedia/commons/2/22/2021_US_Electoral_College_objections_map.svg

....except for different colors for different states. I would like to see a map where most of the states are green (#A9FAAD), but all of the following states are yellow (#FFE4E4) - Alabama, Florida, Georgia, Michigan, Mississippi, North Carolina, South Carolina, West Virginia, Wisconsin, Wyoming.

Capisred (talk) 23:56, 16 November 2021 (UTC)

@Capisred: Can you ask again at Wikipedia:Graphics_Lab/Map_workshop? This page is for issues on existing SVG files with the thumbnail renderer. Thanks, cmɢʟeeτaʟκ 02:10, 17 November 2021 (UTC)

Grid making thumbnail very dark at small sizes

Dark at 200px
Better at 360px (left faces still black)

Hi SVG experts,

Though the grid in my diagram is white, it is rendered as black at thumbnail sizes under 324px. Would anyone know how to fix the problem for small thumbnails?

Thanks,
cmɢʟeeτaʟκ 02:33, 15 November 2021 (UTC)

@Cmglee: Might it be related to c:Librsvg_bugs#Pattern and c:User_talk:TilmannR/Archive#librsvgBug_pattern?  — Johannes Kalliauer - contrib. 10:41, 22 November 2021 (UTC)
Thanks, JoKalliauer I'll check out your links to see if there is a workaround. cmɢʟeeτaʟκ 22:10, 27 November 2021 (UTC)
Note: I worked around the bug by drawing redundant rectangles to make the smallest pattern every 5 cubelets (instead of every 1 cubelet) so that each pattern cell is bigger than 1 px.
cmɢʟeeτaʟκ 03:42, 23 January 2022 (UTC)

Hello!

I managed to workaround this problem, see File:Brøndby IF.svg. I still just want to know why it renders so weirdly. When I press "Edit SVG" using c:User:Rillke/SVGedit.js the browser rendering is exactly as it should but the RSVG rendering isn't. Opening the file in Inkscape also just makes it all black. Any clues why?Jonteemil (talk) 03:51, 19 November 2021 (UTC)

@Jonteemil: I've fixed the SVG by renaming CSS class names starting with underscores to "blue" and "yellow". http://w3.org/TR/css-syntax-3 states, "Property names and at-rule names are always identifiers, which have to start with a letter or a hyphen...". Is the thumbnail fine now? cmɢʟeeτaʟκ 00:19, 22 November 2021 (UTC)
P.S. You've uploaded another version at File:Brøndby_IF.svg. What's the difference? cmɢʟeeτaʟκ 00:35, 22 November 2021 (UTC)
@Cmglee: Thanks for your answer. The version at File:Brøndby_IF.svg is as I said my workaround by using a different method for extracting the SVG.Jonteemil (talk) 08:16, 23 November 2021 (UTC)
Ok, I've replaced uses of File:Brøndby IF.svg with File:Brondby IF logo.svg which doesn't have the Inkscape crud. cmɢʟeeτaʟκ 22:16, 27 November 2021 (UTC)
Resolved

Not rendering but only on wikipedia

Can someone take a look at this file File:Youth Law Australia logo.svg, I can not get it to render on wikipedia, but it renders everywhere else. Even on the Commons SVG Checker. And even in the file history of the same file, but only when the file is not the current version. I really don't understand the wikipedia rendering engine. Auguel (talk) 21:16, 29 November 2021 (UTC)

Ok it now seems to be rendering, so I guess this is resolved, but my understanding of the engine has gone down. Auguel (talk) 00:05, 30 November 2021 (UTC)
@Auguel: Next time try c:Template:Purge_client_cache  — Johannes Kalliauer - contrib. 10:32, 30 November 2021 (UTC)

Text rendering in infobox or commons page

Hello, I hope this is the right place. I made and uploaded a vectorial file and it doesn't render the text properly. I transformed the text into "path" as it should. Instead of showing the black text in bold letters, it looks simple and less scattered as it should be. The correct version is only visible when you click to see it at the real resolution. Does anyone know how it can be solved?--Kun Kipcsak (talk) 16:48, 1 December 2021 (UTC)

@Kun Kipcsak:
 — Johannes Kalliauer - contrib. 17:51, 1 December 2021 (UTC)
@JoKalliauer: Thank you. It worked.--Kun Kipcsak (talk) 20:06, 1 December 2021 (UTC)

Artifacts when using feSpecularLighting and feDistantLight

Note black pixels around shapes

Hi SVG experts,

I just created this image using an SVG filter to simulate 3D tiles. Strangely, the shapes are surrounded by black pixels. Anyone seen this or know a fix?

Thanks,
cmɢʟeeτaʟκ 23:31, 2 December 2021 (UTC)

Style specifications, format, overrides, etc

Priority & overrides: I'm trying to use style specifications to avoid repetitively specifying attributes in rectangles, paths, etc in files like this. However, when I want to override the style in a specific instance, the style overrides the specific instance rather than the other way around. Example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1600" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
rect { stroke:blue; stroke-width:4 fill:yellow; }
</style>
<rect x="100" y="100" width="200" height="100" fill="green"/>
</svg>

This code renders the fill as yellow. :-\

Format: I'm not sure if the format difference fill="green" versus fill:green; is involved (the x="100" format is needed for some attributes). That area is still mysterious to me.

Explanations or advice will be appreciated. Thanks in advance. —RCraig09 (talk) 17:50, 19 December 2021 (UTC)

@RCraig09: Attributes always have the syntactical form name="value". Some attributes, known as presentation attributes, may alternatively be specified by means of a declaration, which may be part of a declaration-list. Declarations always have the syntactical form name:value, and a declaration-list may be given either as the value of a style="..." attribute, or by means of style sheets, as in your example. When both methods are used, and there is a conflict, the behaviour is undefined and may vary between user agents. You should be consistent within the document and stick to one form or the other. You should note that your example lacks a mandatory semicolon after the stroke-width:4. One thing that you can try is a style sheet with two rules, one more specific than the other:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1600" height="900" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect { stroke:blue; stroke-width:4; fill:yellow; }
    rect#greenrect { fill:green; }
  </style>
  <rect id="greenrect" x="100" y="100" width="200" height="100" />
</svg>
--Redrose64 🌹 (talk) 22:38, 19 December 2021 (UTC)
Many thanks, User:Redrose64. I would never have arrived at this structure looking at internet forums etc. I'll try your suggested approach. —RCraig09 (talk) 23:01, 19 December 2021 (UTC)
Additionally RCraig09 I'm not sure if there's something wrong with you client, but it renders fine for me... — Berrely • TalkContribs 13:05, 20 December 2021 (UTC)
The SVG diagram on Commons
@Berrely: Thank you for your help. I think this may be what Redrose64 meant when saying "behaviour is undefined and may vary between user agents".
Everyone: I've updated the SVG file to have Style Sheets for rect and path elements (but not for text elements since there were so many variations of font-size, italics, bold, and color). In running through various SVG checkers, I've found:
* W3.org checker gave 46 warmings and 46 errors revolving around the fact that the new version has many duplicate ID Values of identifiers (R for red, G for green, etc etc)
* Toolforge.org said "No issues found."
* Commons SVG checker said "Successfully parsed XML structure. Check finished!" but ONLY after it advised a workaround to revise the style specification to be <style type="text/css">
Given the uncertainty, I didn't want to risk uploading the new "style"-ized version to Commons, but could any of you tell me if the new version at this Dropbox link has any rendering issues compared to the "correct" 18 December Version 1 at Commons, at right? (Be aware that for the new version I purposely reduced the outline around "Global warming, climate change" and fixed the arrowheads a bit; ignore those changes; they're intended.) If the new version doesn't have issues, I'll upload to Commons as Version 2. Thanks for any feedback you give. —RCraig09 (talk) 05:52, 21 December 2021 (UTC)
Thanks for your contribution, RCraig09. May I make an unrelated comment about text readability? The green and blue text has rather low contrast. Is it possible to make them darker? Wikipedia:Manual_of_Style/Accessibility#Color has guidelines. Thanks, cmɢʟeeτaʟκ 10:43, 21 December 2021 (UTC)
— Hello again, @Cmglee: The original chart was the result of long collaborations on Talk:Climate change. Any discussion re color was to move away from primary colors toward more subdued colors, which (upon reading your suggestion) may translate to less contrast. I'll do some experimenting, though.
— Separately, did you happen to notice any discrepancies or issues in the Version 2 from Dropbox? —RCraig09 (talk) 15:06, 21 December 2021 (UTC)
Please do not send us off to external sites that require registration, such as Dropbox or Imgur. If you wish to provide a screenshot, approved methods exist. --Redrose64 🌹 (talk) 19:52, 21 December 2021 (UTC)
Apologies; I think the Dropbox link lets people download without registration. In any event, I have uploaded Version 2 (made with internal Style Sheet for path and rect elements) to Commons. My request now would be whether anyone sees rendering issues on Version 2, or whether there is truly any problem with the duplicate ID values that w3.org found objectionable. —RCraig09 (talk) 20:38, 21 December 2021 (UTC)
I didn't intend my example above to be read that id= was the only method available. No element may have the same id as any other element, this is just as true in SVG as it is in XML or HTML. I had assumed that you would only want one green rectangle, all the others being yellow; if I knew that you wanted there to be more than one, I would have written my example thus:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1600" height="900" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    rect { stroke:blue; stroke-width:4; fill:yellow; }
    rect.greenrect { fill:green; }
  </style>
  <rect class="greenrect" x="100" y="100" width="200" height="100" />
</svg>
As for type="text/css", this is mentioned at c:librsvg bugs#List of open Phab SVG bugs and c:COM:Commons SVG Checker/KnownBugs, both pages being linked from #Further issues above. --Redrose64 🌹 (talk) 21:55, 21 December 2021 (UTC)
Thanks again, User:Redrose64, for your concise explanations. I sense that victory is in sight! —RCraig09 (talk) 23:15, 21 December 2021 (UTC)
Resolved

I am trying to add an svg logo to the infobox in the article I have written on Monmouth Coffee Company using Wikipedia:File Upload Wizard. It is text only so it should be public domain, but possibly not suitable for Commons. I have had the following error messages, which I don't understand, any ideas what I am doing wrong? When linking to a downloaded copy on my computer

Upload failed: elements can only link (href) to data: (embedded file), http:// or https://, or fragment (#, same-document) targets. For other elements, such as , only data: and fragment are allowed. Try embedding images when exporting your SVG. Found "<image http://www.w3.org/1999/xlink:href="254193f5893e51a7.jpg">". (uploaded-href-attribute-svg, image, http://www.w3.org/1999/xlink:href, 254193f5893e51a7.jpg)

When linking to copy on MCC website https://www.monmouthcoffee.co.uk/wp-content/themes/monmouth/library/images/logo.svg

<a> elements can only link (href) to data: (embedded file), http:// or https://, or fragment (#, same-document) targets. For other elements, such as <image>, only data: and fragment are allowed. Try embedding images when exporting your SVG. Found <image http://www.w3.org/1999/xlink:href="254193f5893e51a7.jpg">. TSventon (talk) 11:12, 27 December 2021 (UTC)

TSventon it seems that your SVG contains a raster graphic that's linked, not embedded. Wikimedia does not allow requesting images from external sites (for obvious reasons). It seems the SVG you're trying to upload is a "fake" SVG; simply a raster graphic in a SVG wrapper. — Berrely • TalkContribs 13:05, 27 December 2021 (UTC)
Berrely, thank you for the explanation, what can I do about it? This is my first attempt to upload an image and I have no technical knowledge about image formats. TSventon (talk) 13:14, 27 December 2021 (UTC)
I have now snipped a png copy of the logo and successfully uploaded it as file:Monmouth_Coffee_Company_logo.png. TSventon (talk) 14:02, 27 December 2021 (UTC)
@TSventon: Following my teahouse comment, the solution is as simple as deleting the part of the SVG from the line <g id="Layer_1" display="none"> to its closing </g>. That's where there's a call to an external .jpg which isn't needed and gives the error. You may be just as well off with the .png, however. Mike Turnbull (talk) 16:14, 27 December 2021 (UTC)
I went ahead and uploaded the version without the image reference File:Monmouth Coffee Company logo.svg. Auguel (talk) 16:16, 27 December 2021 (UTC)
Thank you Michael D. Turnbull, Auguel, I have previously given other editors a link to the instructions for uploading a logo, so it is good to have had a chance to upload one myself, even if it was quickly replaced with a better version. TSventon (talk) 16:32, 27 December 2021 (UTC)

Wikipedia:Village pump (technical) discussion on SVG maps

Looking for additional knowledgeable people in this SVG discussion:

I see one person, Redrose64, posting here and there. Need more people there at the Village Pump. --Timeshifter (talk) 03:12, 31 December 2021 (UTC)

SVG not rendering properly by Wikimedia.

Moved from c:Commons:Graphic_Lab/Illustration_workshop#SVG_not_rendering_properly_by_Wikimedia.

Hello world for C# for French pages


Request
My SVG not rendering properly when exported to PNG by Wikimedia, some idea ? --Sylv1 Durif (talk) 22:27, 24 December 2021 (UTC)
@Sylv1 Durif, is it possible for you to use a syntax highlighted block like this instead of an SVG?
using System;

// Exemple avec le programme Hello World
namespace HelloWorld
{
   class Program
   {
      static void Main(string[] args)
      {
         Console.WriteLine("Hello World!");
      }
   }
}
Floogan (talk) 06:44, 25 December 2021 (UTC)
I think that part of the problem is the declaration font: bold 3px / 1.25 Courier, monospace which may be too complicated - try splitting this down into component properties, such as font-weight: bold; font-size: 3px; line-height: 1.25; font-family: Courier, monospace;. But the main problem that I see is that Courier is not a supported font; per c:Help:SVG#fallback, try Liberation Mono instead, which must be quoted because it contains a space - font-family: 'Liberation Mono', monospace; --Redrose64 🌹 (talk) 17:42, 25 December 2021 (UTC)
@Floogan: I note there are some <tspan recitations that aren't cleanly matched with </tspan> recitations, and the transform="matrix(. . . "> recitation adds needless complexity. If you want me to do an SVG from scratch (not a big project), let me know. —RCraig09 (talk) 18:05, 25 December 2021 (UTC)
@RCraig09: Feel free to fix/remake the SVG if that makes sense -- I was just checking first whether an SVG is necessary since WikiText syntax highlighting is already designed for this (e.g., here). I'm very new to the Wikiverse, so I'll defer to your judgement! -- Floogan (talk) 20:09, 25 December 2021 (UTC)
Alrighty then! I'll do an SVG. —RCraig09 (talk) 20:34, 25 December 2021 (UTC)
I just finished my upgrade, but it looks like User:Glrx on Commons did an update shortly ago without informing here. My version uses proper fonts (see Redrose64's comments above), and is simpler and clearer in formatting for humans to read, so I'll upload it as Version 3. The most appropriate one can be used. Are you sure you wanted to say "Hello world" and not "Bonjour monde"? —RCraig09 (talk) 22:06, 25 December 2021 (UTC)
@Sylv1 Durif: Please reply so we know whether to close this topic. Do you intend this image to be used in an encyclopedia article? —RCraig09 (talk) 20:07, 27 December 2021 (UTC)
Hello World in French has no sense, the English version is more known, that why I keep the English version… I traduce only the comment… For the code block, I can't, it's for a title and need to be as an image. Also we can close the topic, thanks to Floogan, Redrose64 and big up to RCraig09 to finish this SVG ❤ ! I will change the image on the C-sharp page now! --Sylv1 Durif (talk) 13:37, 31 December 2021 (UTC)

 Done

Checkmark This section is resolved and can be archived. If you disagree, replace this template with your comment. —RCraig09 (talk) 05:52, 2 January 2022 (UTC)

Distortion effect with circle shapes

Hello. I recently became more familiar with using a text editor for more simple images, with inkscape being my previous main tool of choice. I still use inkscape to inspect my images after encoding them in text script, and have noticed a problem with my circles. When rotating a "perfect" circle it should always stay in the same measurements, for example a circle set to 500px should always be 500px no matter the degree of rotation. However when a circle is set as a stroke, it becomes distorted when rotated. This peculiarity can be observed with this file. The red circle is set as a stroke of the yellow one, instead of placing two path circles one over the other. When rotating the image in inkscape, the red circle that should remain at 500px instead distorts to other measurements such as 499.922px and 500.017px. This is only happening to circles set as strokes, the path circles behave as expected. I am observing this in other files as well. Is this just a peculiarity of text encoding? Placing two circles set as paths would solve the issue and I have no objection to using it, but some other users might find it objectionable because it would increase the code in a way they see as unnecessary. Is there any other solution? Fry1989 eh? 16:25, 13 January 2022 (UTC)

@Fry1989: I've experienced similar micro-distortions using Inkscape, though they never made a difference big enough to be noticeable in my projects. I hypothesize the micro-distortions may be Inkscape's rounding errors in complex calculations like trigonometry. If accuracy and precision are that important, I use a text editor to correct. —RCraig09 (talk) 17:19, 13 January 2022 (UTC)
The level of importance depends on the user. I am guilty as charged being a perfectionist, so it matters to me. Since it doesn't affect paths, as I stated I am perfectly fine using only paths. In fact, that was my standard way of going about it for the longest time. I just didn't know if it was my fault or a fault of text editing or something else. Thank you. Fry1989 eh? 18:51, 13 January 2022 (UTC)
@Fry1989: You appear to be mixing up two different concepts. path is an element of SVG (as is circle); stroke is an attribute that may be used on several SVG elements, including path and circle. Here are the relevant documentation pages:
Attributes and properties are different ways of specifying the same information. This element
<circle cx="251" cy="251" r="212.5" fill="#ffd700" stroke="#d40000" stroke-width="75"/>
uses attributes, and may alternatively be specified as
<circle cx="251" cy="251" r="212.5" style="fill:#ffd700; stroke:#d40000; stroke-width:75;"/>
which does exactly the same thing using properties instead of attributes. Which you choose is largely personal preference. --Redrose64 🌹 (talk) 19:09, 13 January 2022 (UTC)
Thank you for the further assistance. I'll have to play around and see how it goes. I am still learning. Fry1989 eh? 19:41, 13 January 2022 (UTC)
@Fry1989: As a comparison, here's the same circle drawn using a path element, first using attributes then using properties:
<path d="M 38.5,251 
  a 212.5,212.5 0 0,1 425,0
  a 212.5,212.5 0 0,1 -425,0
  z" fill="#ffd700" stroke="#d40000" stroke-width="75" />
<path d="M 38.5,251 
  a 212.5,212.5 0 0,1 425,0
  a 212.5,212.5 0 0,1 -425,0
  z" style="fill:#ffd700; stroke:#d40000; stroke-width:75;" />
Each one is drawn as two semicircles, because I don't think that it's possible to use a single path command draw a non-point shape where the start and end points are coincident. The newlines are optional - I put them in to help distinguish the four path commands.
@Fry1989: Not sure if this is the effect you're seeing, but some renderers appproximate circles with cubic Bézier curves. The error is under 0.1%, though. Another possible effect is the anti-aliasing. I've found that if the same shape is drawn multiple times (on top of one another), the boundary starts looking ugly (e.g. in File:SVG_highlight_on_hover_template.svg, shapes are drawn multiple times to achieve the hover effecct). Cheers, cmɢʟeeτaʟκ 00:45, 15 January 2022 (UTC)
Your example appears to be a slightly different issue. That file appears to have the exact same shapes drawn on top of themselves. My issue with File:Romanian traffic sign - II-02 Circulatia din ambele sensuri interzisa 1950+1957.svg (and similar images) is choosing between drawing a solid red circle and then a smaller solid yellow circle on top of the red one, or drawing a solid yellow circle and using a stroke to create the outer red circle. I am alright using the first method, although some other users won't like it because it does come with a larger file code than the second method. I also tried the code provided above, and in that case both the red circle and yellow one become distorted when rotated, so using <circle> instead of <path> appears to be the only way to avoid the problem. Fry1989 eh? 17:00, 15 January 2022 (UTC)

Could someone please make a SVG logo of this text logo? --Trade (talk) 14:08, 23 January 2022 (UTC)

Hi Trade,
Try asking on Wikipedia:Graphics_Lab/Illustration_workshop. This page is more for issues with the Wikimedia thumbnail renderer.
Cheers,
cmɢʟeeτaʟκ 02:11, 24 January 2022 (UTC)

Objects missing from image

DDoc formula
This is the image that isn't rendering properly.

For some reason, a bunch of objects are not showing up. I can't figure out why some show up and some don't. If you open the original file, it looks fine. I've reuploaded the file a couple of times with slight modifications thinking it would do something, but it didn't.

Does anyone know why this is happening? --Diriector_Doc├─────┤TalkContribs 18:05, 3 February 2022 (UTC)

Hi Diriector Doc,
Librsvg has a bug causing nested use tags to not render. I've worked around it as shown.
Cheers,
cmɢʟeeτaʟκ 13:44, 4 February 2022 (UTC)

A map locating Image of India-Norway

I am, here, sincerely requesting you for creation of an svg map of India and Norway's location. Perhaps it might be that a file used to exist, but got deleted, or i fail to get the right svg file name. Utkarsh555 (talk) 16:55, 12 February 2022 (UTC)

@Utkarsh555: Do you mean something like File:India Norway Locator.png? If that is not suitable, which of these would be closest? File:Denmark India Locator.png; File:Denmark India Locator.svg; File:Denmark-india map.png; File:Finland India Locator.png; File:India Finland Locator.png; File:India–Sweden Locator.svg. --Redrose64 🌹 (talk) 17:52, 12 February 2022 (UTC)
@Redrose64 accurately saying so, i guess, the file was the, yes, "File:India Norway Locator.png". thank you! Utkarsh555 (talk) 03:54, 13 February 2022 (UTC)

Why is text moving to weird places

In File:Sriwijaya Air Flight 182 flight path.svg, I used Deja Vu Serif and embedded text, however in the LibrSVG preview, it looks really weird. Any idea why? — Berrely • TalkContribs 20:24, 25 February 2022 (UTC)

I've gone ahead and reuploaded it with outlines but I'm still interested in the cause. I do remember being some rendering issues with tspans. — Berrely • TalkContribs 20:27, 25 February 2022 (UTC)
Uploading the original version to commons:commons:commons SVG Checker gives the hint:
The list of coordinates lets Inkscape position each character individually, but the thumbnail renderer Rsvg doesn't support it. Instead, provide just a single coordinate for each tspan and let the engine kern it to its liking. Hope that helps, cmɢʟeeτaʟκ 23:24, 25 February 2022 (UTC)
Ah alright, thanks. I was going to use SVGtranslate but sadly it seems I won't now. — Berrely • TalkContribs 09:17, 26 February 2022 (UTC)

creation of an svg file for syrian foreign relations

I am here, requesting for an svg file creation of "File:Diplomatic relations of Syria.svg". It would of nice if somebody contributed. Thanks! Utkarsh555 11:13, 2 March 2022 (UTC)

Hi Utkarsh555,
Try asking on Wikipedia:Graphics_Lab/Map_workshop. This page is more for issues with the Wikimedia thumbnail renderer.
Cheers, — Preceding unsigned comment added by Cmglee (talkcontribs) 10:38, 3 March 2022 (UTC)

creation of an svg file for bururndi foreign relations

I come with the requrest for the creation of File:Diplomatic relations of Burundi.svg. Utkarsh555 10:11, 5 March 2022 (UTC)

@Utkarsh555: Please see the reply in the section immediately above. --Redrose64 🌹 (talk) 10:13, 5 March 2022 (UTC)
@Redrose64 ok got it. i have put a request at this page.
Thanks! Utkarsh555 10:15, 5 March 2022 (UTC)

Weird rendering of pattern

Nets of the four Instant Insanity cubes

Hi Rsvg experts,

The hatching for the red and green squares in the figure 3 in this thumbnail look strange, even though I'm doing the same thing as with other figures. Commons SVG Checker doesn't find any issues.

Would someone be able to explain why it is so, please?

Thanks,
cmɢʟeeτaʟκ 12:56, 26 February 2022 (UTC)

@Cmglee: I added two times stroke-dasharray="none", which solved the problem. This bug is unknown to me. I could neither reproduce it locally with c-librsvg2.40.21 nor with rust-librsvg2.52.6  — Johannes Kalliauer - contrib. 02:57, 14 March 2022 (UTC)
Thank you very much, @JoKalliauer:. It seems the stroke-dasharray leaked from the element being filled into the pattern, unlike other attributes such as stroke, and unlike in other renderers.
Can you please help me raise a Phabricator ticket? Thanks, cmɢʟeeτaʟκ 09:32, 14 March 2022 (UTC)

— Preceding unsigned comment added by Kartik chauhandehra (talkcontribs)

@Kartik chauhandehra: first file fixed, please do not scale fonts, change the font-size instead and use common fonts  — Johannes Kalliauer - contrib. 11:07, 14 March 2022 (UTC)

Blackened out PNG preview, but SVG looks normal

Hi there. I'm having some trouble with an SVG file of New Jersey's flag in the Eurovision heart logo. The coat of arms is completely covered in black in the PNG preview, but when I click on it to see the SVG file, it appears fine.

The program I used to create this SVG image was Inkscape. Could someone be able to help me figure out what's wrong? Thanks.

- ChocoMingo (talk) 18:07, 18 March 2022 (UTC)

@ChocoMingo: Please check https://commons.wikimedia.org/wiki/Commons:Commons_SVG_Checker?withJS=MediaWiki:CommonsSvgChecker.js&checkSVG=File%3AEuroNueva_Jersey.svg and click on "Execute SVG check" (the first one). This will guide you to phab:T68672. However the issue is not phab:T68672, but similar. You need to put <style type="text/css" id="style8667">...</style> at the beginning of the document, see phab:T304209.  — Johannes Kalliauer - contrib. 20:55, 19 March 2022 (UTC)

How can I see that an SVG image update has been changed?

Good morning, I wanted to ask if it is possible to know what has been changed from an SVG update, either on Wikipedia or by programs like Notepad++. Thank you! --KajenCAT (talk) 12:08, 26 March 2022 (UTC)

Example
@KajenCAT: As an example: I take File:Instant_insanity_nets.svg from #Weird_rendering_of_pattern
  1. Download both versions:
    wget https://upload.wikimedia.org/wikipedia/commons/archive/1/12/20220314025255%21Instant_insanity_nets.svg
    wget https://upload.wikimedia.org/wikipedia/commons/1/12/Instant_insanity_nets.svg
  2. Open both in Notepad++ (and for convenience close all other opened files)
  3. Install Compare-Plugin, see https://www.makeuseof.com/tag/notepad-compare-two-files-plugin/
  4. Notepad++ > Plugins > Compare > Compare
  5. Something similar to https://commons.wikimedia.beta.wmflabs.org/wiki/File:Screenshot_from_2022-03-26_13-14-31.png should appear (I’m currently on Linux, therefore I use vimdiff instead of notepad++, so the interface is more like https://www.thewindowsclub.com/wp-content/uploads/2021/01/compare-two-files-in-notepad.png )
 — Johannes Kalliauer - contrib. 12:26, 26 March 2022 (UTC)
Thank you, @JoKalliauer:! Now I see the diff. I'm updating the Catalan version of File:2022 Russian invasion of Ukraine.svg and and I have already translated and transcribed most of the image (legend, toponyms, ...) to Catalan. I want to do it every few days to keep it updated, but I have to do it all over again from zero. Although I have almost automated this process, I was wondering if it would be possible to simply copy the new changes from the old file to the new file and overwrite them to my translated file, just to speed up the process.
Although this plugin is very useful (and it can help me in small changes), I don't see how I can do this. I searched it on internet, but I didn't understand it very well, as my knowledge in this field is very basic. KajenCAT (talk) 13:35, 26 March 2022 (UTC)
An alternative method without installing any additional software is to use Rillke's SVGedit: after adding
if (mw.config.get('wgNamespaceNumber') === 6 && /SVG/i.test(mw.config.get('wgTitle').slice(-3))) // SVGedit on SVG files only
	importScript('User:Rillke/SVGedit.js');
to Special:MyPage/common.js, save the previous version as an SVG file, click Edit SVG on the file page on Commons, Browse for the saved file, and click Diff. Cheers, cmɢʟeeτaʟκ 22:27, 28 March 2022 (UTC)
Hi @Cmglee:, thank you very much! However, I don't see how I could copy the change of this diff to my version language. In other words, how can I overwrite the modifications in another file without modifying what has not been touched? Regards, KajenCAT (talk) 15:55, 31 March 2022 (UTC)
Hi KajenCAT, I don't think SVGedit can do that. It sounds like you wish to do a three-way merge. http://stackoverflow.com/questions/572237/whats-the-best-three-way-merge-tool links to some tools that can do that ‐ sadly, I couldn't find a free online tool. The alternative is to generate a patch and apply it to the other file. http://tools.bartlweb.net/diff claims to do this but I haven't tried it out. Hope that helps, cmɢʟeeτaʟκ 00:11, 1 April 2022 (UTC)

Issue with rendering SVG file

I'm having trouble with rendering this file when using it on a wikipedia page, I'm not sure whether its to do with resolution or if I'm dealing with a corrupt file. In lower scaling all you see is an empty space, but if you select higher scaling, all the shapes in the svg file appear.

Here is the link to the file: en:File:Solent_First_Bus_Logo.svg

Let me know your thoughtsNHPluto (talk) 13:30, 19 June 2022 (UTC)

@NHPluto: How did you create this file? What is it’s source?  — Johannes Kalliauer - contrib. 14:15, 19 June 2022 (UTC)
@JoKalliauer: You don't need to pull the resolution way down to 43 x 11, because 431 x 110 = 47,410 which is less than half of the maximum permitted 100,000 pixels. --Redrose64 🌹 (talk) 17:26, 19 June 2022 (UTC)
@Redrose64 That's true, but the guideline imho does not directly cover SVG and the actual reason was not the reduction of the preview-size, but the reduction of the numeric precision (less digits in the SVG)  — Johannes Kalliauer - contrib. 19:21, 19 June 2022 (UTC)
Number of bytes in the SVG shouldn't be an issue when you're in the 3-4 KB area - WP:DWAP. It gets converted to a PNG for rendering, in any case, which may well be larger. But it is known that our librsvg utility isn't so good when the <svg> tag specifies small values for the width= and height= attributes. I think that this is because it tries to draw a PNG using integer conversions of the various coordinates, and then upscales it with consequent pixellation. --Redrose64 🌹 (talk) 19:46, 19 June 2022 (UTC)
@Redrose64
@JoKalliauer File was created from a non-free content logo used on a company's website using this link:
https://www.firstbus.co.uk/sites/all/themes/custom/fg2015/img/logos/opcos/12.svg
Though the link is dead as of now, I have the original file downloaded before the link was deleted. I haven't had a problem uploading NFC images for minimal use on pages before so I'm very much new to this. On the page it was supposed to be on, I have also uploaded two other SVG files and they have displayed as normal. NHPluto (talk) 21:48, 19 June 2022 (UTC)
@NHPluto non-free content isn't related the the rendererror, we were talking about my second upload at File:Solent_First_Bus_Logo.svg#filehistory, which shoudn't bother you. The problem in your svg was the following line <path id="svg_3" fill="url(#SVGID_1_)" d="m447,-87c0,0.6 -0.5,1.1 -1.1,1.1" class="st2"/>, but don't ask me why.  — Johannes Kalliauer - contrib. 14:13, 20 June 2022 (UTC)

Borders not showing up on file

I'm trying to make an election map for the 1857 WI governor race. There was no map on Commons with the correct county borders for that year, so I downloaded this file and changed a few lines to make the borders right. But when I uploaded the file, the borders I changed didn't render. It looks like the shapes render fine, but there are no borders. BJenkins42 (talk) 02:27, 5 August 2022 (UTC)

Hi BJenkins42, Thanks for your contribution. I'm unsure what you mean by borders not rendering. The thumbnail of the most recent version of File:Wisconsin_Presidential_Election_Results_1860.svg looks the same as the SVG in Firefox. The borders are white, as in the first version of the file. Can you please describe the problem in detail? Cheers, cmɢʟeeτaʟκ 22:23, 9 August 2022 (UTC)
I was able to fix the issue since then. Sorry for not posting that. Thanks anyway BJenkins42 (talk) 23:35, 9 August 2022 (UTC)

Incorrect Rendering of Circuit Diagram

Help! I've created a SVG diagram of a circuit diagram in Python using SchemDraw, File:IEC-61000-4-5_Simplified_Circuit_Diagram_of_the_Combination_Wave_Generator.svg. Unfortunately, due to either a compatibility problem or a librsvg bug, the schematic is not rendered correctly. When rendered, the capacitor C_c disappears entirely. More frustratingly, this rendering problem doesn't affect most resolutions but only affects the full-size, 2,560×843 resolution - which is usually the default size in many places.

I've already tried to convert strokes and objects to path, but it still doesn't solve the problem. Could any SVG gurus please help taking a look and suggesting a possible workaround?

See:

Thanks. Bieraaa (talk) 11:11, 28 August 2022 (UTC)

@Bieraaa: Try c:Template:Purge_client_cache after opening the 2560px-version, see c:Help:Purge#Advanced_manual_thumbnail_purging for details.  — Johannes Kalliauer - contrib. 11:26, 28 August 2022 (UTC)
Thanks for the tip. This definitely looks like a caching problem, I greatly underestimated the trickiness of caching. I just opened the same page via Tor Browser and found it shows up correctly. But I'm so far still unable to make it show up locally in either my web browser (cache disabled) or via wget in the command line, so it's possibly CDN cache related. I'll keep trying to purge the cache using the advanced options. Failing that, I'll just reload it with a different name... Bieraaa (talk) 11:50, 28 August 2022 (UTC)
Problem solved with ?action=purge, thanks again. Bieraaa (talk) Bieraaa (talk) 12:00, 28 August 2022 (UTC)

jpg to svg

Is there a wiki tool to convert logo like this with transparent background. Thank you. commons:File:MCC-LOGO.jpg Neurofreak (talk) 19:45, 16 September 2022 (UTC)

I don't know of a tool, but you could request a human create an SVG at commons:Commons:Graphic_Lab/Illustration_workshop. —RCraig09 (talk) 20:35, 16 September 2022 (UTC)
Inkscape has a tool to trace bitmaps, though the quality of the logo depends on its complexity and the parameters you choose. As your logo has a single colour and details are not too fine, it should work reasonably well. If you need help, please ask at the commons:Commons:Graphic_Lab/Illustration_workshop, as RCraig09 recommended. Good luck, cmɢʟeeτaʟκ 02:25, 18 September 2022 (UTC)
Thank you for the response. Neurofreak (talk) 18:06, 18 September 2022 (UTC)

Incorrect rendering of SVG circles using "stroke-dasharray" attribute (vs. "Arc" specification)

20221002 SVG Pie chart creation using circle stroke-dasharray attribute

This image uses the stroke-dasharray attribute on a circle to form "wedges" for use in pie charts. This "test image" renders perfectly when directly read by my Chrome, Firefox, and Safari, and no checker reported any SVG structural errors (w3.org, Commons SVG checker, and toolforge svg check).

The file renders correctly when I click on the main image on the file description page and the image fills the screen, but renders incorrectly on the Wikimedia file description page itself, on the Toolforge checker, and on en.Wikipedia. The two "25%" wedges in the left graphic should abut perfectly without a gap and without the left edges "tilting", and the right graphic's wedge shows an anomaly at the vertex. In all cases, there appears to be a "ghost" wedge that is slightly rotated from each original wedge.

Does anyone know what the problem is?

(FYI: A background explanation is provided in the sources linked on the file page, and a copy of the SVG code is embedded in image itself.)

Thanks for any insights you can provide. —RCraig09 (talk) 03:47, 3 October 2022 (UTC)

@RCraig09: That's an ingenious way of drawing circular sectors. The bug seems to be a combination of anti-aliasing and rounding error. Though the length of the dash is specified to many decimal places (157.0796326794897), rsvg doesn't exactly render it to that length, so the edge isn't exactly rectilinear. Perhaps the conventional way is still preferable:
<path d="M 0,0 H 200 A 200,200 0 0 0 0,-200" fill="black" stroke="none"/>
Cheers, cmɢʟeeτaʟκ 22:57, 3 October 2022 (UTC)
@Cmglee: Thanks for investigating. That's what I was afraid of. :-\ I'm not as familiar with the Arc function, and I was planning on making a generalized spreadsheet that automatically generates SVG code for pie charts. It will be a challenge to generalize wedges from 1 through 359 degrees! —RCraig09 (talk) 23:09, 3 October 2022 (UTC)
In case anyone is interested, below is code for making a pie chart using SVG's Arc function. Each wedge starts out as a vertical line leading up from the origin, and traverses an arc clockwise per pie chart standards. Arcs are then rotated to be "stacked" in succession around the circle. The large arc flag is 1 only if a particular arc is >180 degrees. The destination coordinates are sin θ,–cos θ. The following code would be placed inside a group <g transform="translate(x,y)"> to locate it appropriately.
<path transform="rotate(0)" d="M0,0 v-300 A300,300 0 1 1 -283.755673,97.379248 z" fill="blue"/>
<path transform="rotate(251.058809)" d="M0,0 v-300 A300,300 0 0 1 231.396036,-190.934215 z" fill="red"/>
<path transform="rotate(301.531392)" d="M0,0 v-300 A300,300 0 0 1 140.311783,-265.165238 z" fill="mediumseagreen"/>
<path transform="rotate(329.416879)" d="M0,0 v-300 A300,300 0 0 1 98.789689, -283.267713 z" fill="darkblue"/>
<path transform="rotate(348.64311)" d="M0,0 v-300 A300,300 0 0 1 20.001757, -299.332474 z" fill="lightblue"/>
<path transform="rotate(352.466)" d="M0,0 v-300 A300,300 0 0 1 19.729226, -299.35056 z" fill="salmon"/>
<path transform="rotate(356.236726)" d="M0,0 v-300 A300,300 0 0 1 19.690292, -299.353123 z" fill="green"/>
Thanks for the help, cmglee. —RCraig09 (talk) 18:41, 6 October 2022 (UTC)
Test of formula to draw sectors of a pie chart, given radius, begin angle (rows) and end angle (columns)
Hi RCraig09, My pleasure, and you beat me to it! Your formula is correct. The hardest part is deciding on the large-arc flag. My SVG is drawn by a Python script embedded in it. My assumptions are that angles are increasing anti-clockwise from the right (x-axis) and the entire circle is drawn if the beginning and ending angles are the same (strictly, I reduce the ending angles by a tiny amount so that the path still works).
Good luck with your pie-chart application, though if I may comment, humans are pretty poor at estimating angles except whether it is just above, equal to or below 180°: a percentage bar is easier to interpret correctly.
Cheers,
cmɢʟeeτaʟκ 21:48, 6 October 2022 (UTC)
I see that you use the mathematical approach to coordinate systems, moving counter-clockwise from an axis pointing to the right. My motivation was to make pie charts, which move clockwise from an axis pointing up.

I've updated these files using the Arc specification (previously I used a self-designed Path approach that was so inflexible that I was motivated to try the stroke-dasharray approach which isn't suitable for Wikimedia!). —RCraig09 (talk) 22:00, 6 October 2022 (UTC)

Yes, I was unsure what system to use and went with the maths way, thinking that tweaking the formula should be straightforward. Your stroke-dasharray method makes perfect sense (I've found even more hacky uses of stroke-dasharray e.g. File:Chessboard480.svg File:Square_triangular_number_36.svg and File:Pastel_checker.svg); it's just a pity that rsvg is buggy. Cheers, cmɢʟeeτaʟκ 22:33, 6 October 2022 (UTC)
Extremely clever use of stroke-dasharray in your chess/checker files! —RCraig09 (talk) 06:27, 7 October 2022 (UTC)

The convention of Bath City F.C. PNG club logo to SVG. The PNG logo looks extremely blurry on mobile — Preceding unsigned comment added by Joseph1891 (talkcontribs) 18:54, 31 October 2022 (UTC)

@Joseph1891: It's best to pursue your request at Wikipedia:Graphics Lab/Illustration workshop, signing your name with ~~~~. —RCraig09 (talk) 18:59, 31 October 2022 (UTC)
Ok thank you very much. — Preceding unsigned comment added by Joseph1891 (talkcontribs) 19:01, 31 October 2022 (UTC)
@Joseph1891: Unsure what you mean by blurry. The thumbnail looks fine here. cmɢʟeeτaʟκ 18:07, 1 November 2022 (UTC)

Yep, It’s been done by @RedPatch, thanks for your help. 👍 — Preceding unsigned comment added by Joseph1891 (talkcontribs) 19:03, 1 November 2022 (UTC)

Weird newline in file description page

This question is more about the Commons file page commons:File:Roving_bridge.svg than SVG code per se, but I'm unsure where to ask.

In the description on Android Chrome both on mobile and desktop views, there is a vertical gap between points 3 and 4. If I remove point 4, the gap appears between points 2 and 3. Would anyone know what is causing it and a fix?

Thanks,
cmɢʟeeτaʟκ 22:57, 27 October 2022 (UTC)

 Done Thanks to Glrx who investigated and filed http://phabricator.wikimedia.org/T322365. I have worked around the bug with an ordered list. cmɢʟeeτaʟκ 19:52, 3 November 2022 (UTC)

Does anyone know how EclecticArkie creates his graphs?

Does anyone possibly know how: EclecticArkie makes the history of seasons SVG graph for football clubs? I've asked him but it appears he hasn't taken anyone's requests since 2020. I'd quite like to create one myself for: Bath City F.C. However, I have no experience with creating such graphs, But I'd love to learn! If anyone is experienced in this field, I'd appreciate the help or just someone to point me in the right direction. Thank you all so much. Joseph1891 (talk) 16:41, 2 November 2022 (UTC)

@Joseph1891: Have you tried asking EclecticArkie (talk · contribs) directly? They don't edit every day, it is true; but have made edits as recently as yesterday, so are still around. Also, you don't give an example of what a history of seasons SVG graph for football clubs might be. --Redrose64 🌹 (talk) 22:34, 2 November 2022 (UTC)
Chart of yearly table positions of Torquay United
Yes I asked them about a month ago, no reply. This is an example of what the SVG graph looks like: Joseph1891 (talk) 22:55, 2 November 2022 (UTC)
The clean SVG code with comment <!-- years are 10px wide, positions are 4px high in svg --> and repetitive path commands seem to imply generation with a custom program. It's not too difficult to replicate it with a Python script, given the source data. However, if EclecticArkie is willing to share his or her program and data, that seems the best approach.
Alternatively, if the output need not be SVG, one could make something similar with the graph extension. Cheers, cmɢʟeeτaʟκ 20:08, 3 November 2022 (UTC)
Thank you so much for the help, unfortunately I'm a genuine beginner when it comes to coding/coding with SVGs. Joseph1891 (talk) 22:16, 3 November 2022 (UTC)

SVG instead of PNG

Why did you change all the mathematical formulas to svg, they can't be copied now?! Return the display in png format!!! — Preceding unsigned comment added by 217.118.90.162 (talk) 09:13, 4 December 2022 (UTC)

@217.118.90.162: The way math is rendered on Wikipedia is a feature of the software. I think you can find preferences and user scripts to modify it when you are logged in. In any case, this page is not the place to suggest software changes. Try the village pump. –small jars tc 10:39, 4 December 2022 (UTC)

Can someone make an .svg version of this file, although I published it in the above format in black? EmiliaITČA (talk) 14:17, 23 December 2022 (UTC)

@EmiliaITČA: Please ask at en:Wikipedia:Graphics_Lab/Illustration_workshop – this page is more for technical SVG issues. cmɢʟeeτaʟκ 02:32, 26 December 2022 (UTC)

 Done: PawełMM has uploaded cmɢʟeeτaʟκ 17:56, 8 January 2023 (UTC)

Possible bug when specifying tspan stroke-width in CSS

Only the first tspan of each text object has a thick stroke

Hi SVG experts,

On large thumbnails of this SVG, the first tspan of each text object fails to have its stroke-width set to 0.5 (other tspans are fine) with

 <style type="text/css">
...
tspan  { stroke-width:0.5; }
 </style>

Has anyone come across this bug?

Thanks,
cmɢʟeeτaʟκ 17:52, 8 January 2023 (UTC)

The stroke-width property is set in other rules:
.dep1  { fill:none; stroke:#0066ff; marker-end:url(#marker_dep1); stroke-width:1.6; }
.dep2  { fill:none; stroke:#cc0000; marker-end:url(#marker_dep2); stroke-width:1.6; }
.dim   { stroke:#000000; stroke-width:0.5; marker-start:url(#marker_jeep); marker-end:url(#marker_jeep); }
which may affect the <tspan>...</tspan> elements because a class selector has higher specificity than a type selector. So, try adding two more selectors to the selector list in order to increase the specificity:
.dep1 tspan,
.dep2 tspan,
tspan { stroke-width: 0.5; }
It shouldn't ne necessary to alter the other rules. --Redrose64 🌹 (talk) 19:04, 8 January 2023 (UTC)
@Cmglee:I checked view-source:https://upload.wikimedia.org/wikipedia/commons/archive/b/bd/20230108205709%21Test.svg and I noticed that all empty tspan without atribute get scrubbed before processing CSS, the rendering can be seen at: https://upload.wikimedia.org/wikipedia/commons/thumb/archive/b/bd/20230108205709%21Test.svg/666px-Test.svg.png . Maybe we should try to put empty tspan without attributes at second or later places?
 — Johannes Kalliauer - contrib. 21:09, 8 January 2023 (UTC)
PS: This bug is new to me, or at least it is not reported at phab:tag/wikimedia-svg-rendering. I don’t think that adding another librsvg-bug noticiable increases the priority of updating the server. Therefore I currently don’t see much sence of reporting it there, because it is an upstream-Bug (i.e. librsvg-bug), that is anyhow fixed in the current rust-librsvg-version.  — Johannes Kalliauer - contrib. 04:51, 9 January 2023 (UTC)
@JoKalliauer: and @Redrose64: thank you very much for debugging and working around the bug. Amazing how we're still uncovering new bugs. Any idea when rust-librsvg-version will be used throughout Wikimedia? Cheers, cmɢʟeeτaʟκ 09:14, 9 January 2023 (UTC)

text/plain vs image/svg+xml

@Glrx, Sarang, Cmglee, AntiCompositeNumber, and AKlapper (WMF): Does anyone understand

 — Johannes Kalliauer - contrib. 17:07, 19 January 2023 (UTC)

I haven't looked at either file, but is there a chance they have different encodings (UTF-8 with/without BOM, UCS-2 big/little endian, UNIX/Win/old Mac newlines etc)? cmɢʟeeτaʟκ 19:00, 19 January 2023 (UTC)
@Cmglee: I downloaded svg-file (with “save target as”) and it is “UTF-8 without BOM” and uses “Unix (LF)” Lineforward, so it should be perfect.
Be aware opening svg-files in Firefox and saving the opened SVG might change the context of the file.
 — Johannes Kalliauer - contrib. 19:10, 19 January 2023 (UTC)
I believe it is an old bug. Previously, MediaWiki required an XML prolog or the SVG file would be served as text/plain. The given file was uploaded in 2016, and MediaWiki probably classified the MIME type then.
In the past, I fixed several such files by adding the XML prolog. Today, it may only need a one-character change to upload and get reclassified.
I'm not sure that is the issue. If I query the API, the MIME is correct.
Perhaps the server gets CONTENT-TYPE from some other field.
I purged the cache for the image, but it did not change the result.
Glrx (talk) 19:46, 19 January 2023 (UTC)
Possibly Phab:T131012. Glrx (talk) 19:52, 19 January 2023 (UTC)
If a unit test fails, then modify the test so it no longer fails?
Glrx (talk) 20:21, 19 January 2023 (UTC)

@Glrx and JoKalliauer: When it gets a prefix "<?xml version="1.0"?>" it should be checkable. The SVG checker from W3C works sometimes without it, and sometimes doesn't. sarang사랑 10:29, 20 January 2023 (UTC)

@Sarang: Yes, this bug was afaik only in 2015 & 2016 for files without XML prolog, so I expect that any current reupload fixes this issue, I made phab:T327446 based on @Rillke:'s phab:T131012, maybe those tasks should be merged  — Johannes Kalliauer - contrib. 16:47, 20 January 2023 (UTC)
@Sarang: The validator does an HTTP request to MediaWiki to get the file. If MediaWiki responds with the header CONTENT-TYPE: image/svg+xml, then the validator processes the file as SVG. If MediaWiki responds with the header CONTENT-TYPE: text/plain, then the validator does not know what to do with the file (i.e., the validator must get an appropriate MIME type before it examines the file). Glrx (talk) 20:18, 20 January 2023 (UTC)
Checkmark This section is resolved and can be archived. If you disagree, replace this template with your comment.  — Johannes Kalliauer - contrib. 17:40, 30 January 2023 (UTC)

Underscoring not rendered

2010-2070-2100 Climate change threatens venues of Olympic Winter Games

Underscoring of text renders properly if read directly into both Chrome and Firefox. However, on Wikimedia and en.Wikipedia the underscoring does not appear.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg  width="1200" height="750" xmlns="http://www.w3.org/2000/svg">
...
  <g font-size="40" font-family="Liberation Sans,sans-serif" text-anchor="middle" fill="black">
...
    <g transform="translate(0,180)" text-decoration="underline">
      <text x="200">1981-2010</text>
      <text x="700">2041-2070</text>
      <text x="950">2071-2100</text>
    </g>

(Chrome 109.0.5414.87 and Firefox 102.7.0esr)
Thanks for any insight! —RCraig09 (talk) 06:53, 5 February 2023 (UTC)

I copied another tag from the SVG file to show what other attributes may affect that text. One thing that I notice is that there is no explicit stroke setting, so try adding stroke="none" after the fill="black". --Redrose64 🌹 (talk) 19:10, 5 February 2023 (UTC)
Thanks, @Redrose64: I tried designating stroke="no" strike="none" for Version 3, which was not successful. To avoid the problem, I just moved the text to where underscore isn't needed, in Version 4. Problem not solved, but avoided! A real head-scratcher. — 21:31, 5 February 2023 (UTC) . . . strikethrough added —RCraig09 (talk) 22:47, 5 February 2023 (UTC)
stroke="no" is not a valid attribute/value pair. Valid values for the stroke= attribute are exactly the same as documented for the stroke: property, and values that are not explicitly described are not handled by agents consistently. That is to say, some agents might treat a value of no in a similar manner to a value of none, but others might not - and do not need to. --Redrose64 🌹 (talk) 21:40, 5 February 2023 (UTC)
Sorry @Redrose64: I made a typo here on the Help Page. I did use strike="none" in the SVG file, without success. Quite the mystery. —RCraig09 (talk) 22:47, 5 February 2023 (UTC)

I'm posting a "resolved" template here because this particular problem is avoided. It would be a matter of interest if someone would actually solve the problem for future use. —RCraig09 (talk) 00:05, 6 February 2023 (UTC)

I don't understand the reason, but if I put all attributes within the specific <text > specification and do not rely on inheriting group <g > attributes, the underscoring renders properly on Wikimedia and en.Wikipedia. Specifically, the following works:
<text text-decoration="underline" font-size="40" font-family="Liberation Sans,sans-serif" text-anchor="middle" fill="black" x="200" y="380">1981-2010</text>
The following concise arrangement also works, implying that only the text-decoration attribute must be in each particular <text > specification:
<g transform="translate(0,80)">
<text text-decoration="underline" x="200">1981-2010</text>
<text text-decoration="underline" x="700">2041-2070</text>
<text text-decoration="underline" x="950">2071-2100</text>
</g>
P.S. It's not necessary to recite stroke="none". —RCraig09 (talk) 20:42, 6 February 2023 (UTC)
Resolved
Have you considered using the tspan element?
<text transform="translate(0,80)" text-decoration="underline">
  <tspan x="200">1981-2010</tspan>
  <tspan x="700">2041-2070</tspan>
  <tspan x="950">2071-2100</tspan>
</text>
--Redrose64 🌹 (talk) 09:11, 7 February 2023 (UTC)
Ah, a good idea to try... but I just tried it at File: Test.svg(see version 16:54, 7 February 2023) with odd results on Commons or en.WP. Using tspan doesn't help. Odd, but at least there's a workaround. —RCraig09 (talk) 17:04, 7 February 2023 (UTC)
Checkmark This section is resolved and can be archived. If you disagree, replace this template with your comment.  — Johannes Kalliauer - contrib. 19:16, 10 February 2023 (UTC)

Rendering gradients

I'm referring to old "Version 7" of this image.

Wikimedia/en.Wikipedia do not correctly render the gradient inside a rectangle in "Version 7" (uploaded 04:40, 10 February 2023); it shows up as a solid color, not a gradient. The gradient does render correctly in Chrome directly. The relevant code is:

<defs>
<linearGradient id="TrendChannel" x1="0" x2="0" y1="0" y2="1">
 <stop offset="0%" stop-color="white" />
 <stop offset="40%" stop-color="#dcdcff" />
 <stop offset="60%" stop-color="#dcdcff" />
 <stop offset="100%" stop-color="white" />
</linearGradient>
</defs>

<rect fill="url(#TrendChannel)" transform="translate(0,740) rotate(-47.5)"  width="2000" height="300"/>

Is this another libsvg bug, or am I missing something? Thanks again for your ideas. —RCraig09 (talk) 05:03, 10 February 2023 (UTC)

@RCraig09: remove the rotate in the transform and it works as expected. ;-), I think it is phab:T194582  — Johannes Kalliauer - contrib. 19:04, 10 February 2023 (UTC)
@JoKalliauer: Thanks once again for your knowledge and strategy. Vielen Dank! Your enhancement of the gradient definition was above my head as Mozilla.org only gives simpler examples. I paste your code here for future reference:
<defs>
<linearGradient id="TrendChannel" x1="0" x2="129.35382" y1="551.15533" y2="612.9679" gradientTransform="scale(2.5819889,1.3426342)" gradientUnits="userSpaceOnUse">
 <stop offset="0%" stop-color="white"/>
 <stop offset="40%" stop-color="#dcdcff"/>
 <stop offset="60%" stop-color="#dcdcff"/>
 <stop offset="100%" stop-color="white"/>
</linearGradient>
</defs>

<rect fill="url(#TrendChannel)" width="2000" height="750"/>
RCraig09 (talk) 20:47, 10 February 2023 (UTC)
I used Inkscape (Download-link). That is also the reason why the example uses more digits then necessary.  — Johannes Kalliauer - contrib. 21:44, 10 February 2023 (UTC)
Resolved

Multilingual SVG help needed

default
In Russian

I loaded File:Gear pump exploded-ru.svg into the SVG Translate Tool, copied the Russian text over as "русский", downloaded the SVG file, replaced the text strings without systemLanguage="ru" with English equivalents, tweaked some paths, and uploaded the file as above.

  1. Its Commons file description page doesn't seem to recognise that it has Russian in it: there is no "Render this image in <LANGUAGE> [Go]" beneath "Open in Media Viewer". What did I miss?
  2. Can a multilingual SVG specify that an element not be drawn for a particular language? In this case, I want the leader lines connecting the text labels with the features to appear for all languages except for one denoting "unannotated". I could
    • Use SVG symbols to draw them for each language except this one, or
    • Draw a white line over the unwanted elements,
      [how do I unindent this line without starting a new ordered list item?] but being able to not draw them for one case seems more elegant.
  3. Though the SVG Translate Tool recognises that it has two languages, it doesn't show a field for the second line of "Bushings", which needs only one line in English (and thus I set to a nonbreaking space), but two in Russian. How do I make the tool let the user edit it, yet not show anything in the default render?

Thanks,
cmɢʟeeτaʟκ 10:10, 5 March 2023 (UTC)

@Cmglee: I recommend reading Commons:Maximum_file_size, which says that multilingual files above mw:Manual:$wgSVGMetadataCutoff are not fully checked for switch/systemlanguage. For this File I recommend staying below 256kB, which should avoid MediaWiki not recognizing that the file has multiple languages.  — Johannes Kalliauer - contrib. 21:03, 5 March 2023 (UTC)
@JoKalliauer: Thank you so much for reducing the file size below the 256 KB threshold. Cheers, cmɢʟeeτaʟκ 16:32, 6 March 2023 (UTC)
@Cmglee: Another Workaround is to add
 <switch>
  <text systemLanguage="ru"/>
  <text/>
 </switch>
at the beginning, because MediaWiki only needs to know which languages are available (due to performance there is a treshold, therfore there exist no bug-report), but the actual text can be at the end. (librsvg reads the whole image)  — Johannes Kalliauer - contrib. 17:48, 6 March 2023 (UTC)

Stroke colour in CSS not picked up

PQ should be purple, not black

In this SVG's CSS, I have

.pq     { stroke:#cc00ff; stroke-opacity:0.5; }
path.pq { marker-start:url(#marker_p); marker-end:url(#marker_q); }

It seems the second line prevents the first line from taking effect (the stroke is black instead of the intended purple). Is this a known rsvg bug?

Thanks,
cmɢʟeeτaʟκ 13:13, 9 March 2023 (UTC)

@Cmglee:This example can be simplified to
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="106.58 -407.29 298.85 86.582" xmlns="http://www.w3.org/2000/svg">
 <style>
  .pq    {stroke:#c0f}
  path.pq{stroke-width:5}
 </style>
 <path class="pq" d="M 112,-400 L 400,-328"/>
</svg>
It is an unrepoted bug on phab:, however it does not occur in the current librsvg-version.  — Johannes Kalliauer - contrib. 17:35, 9 March 2023 (UTC)
Thanks for your reply, @JoKalliauer. I don't understand why the thumbnail shows it as black if "it does not occur in the current librsvg-version" 🤔 cmɢʟeeτaʟκ 02:19, 10 March 2023 (UTC)
@Cmglee: with current librsvg-version, I mean the latest rust-librsvg2.54 on https://gitlab.gnome.org/GNOME/librsvg/-/releases , not the outdated c-librsvg2.40 Wikimedia is currently using, see first sentence in c:Librsvg_bugs. (Sorry I used the wrong wording).
We could report it on phab:, but since it is an upstream-bug no one cares at Wikimedia, so I consider reporting as waste of time&energy. Upstream at rust-librsvg it is not a bug any more, since it is resolved anyhow, so you “can’t” report it on https://gitlab.gnome.org/GNOME/librsvg/-/issues .
We basically have to wait till Wikimedia is able to update their OS.
 — Johannes Kalliauer - contrib. 15:05, 10 March 2023 (UTC)
I understand what you mean now. Thanks for explaining and checking it on top-of-tree, @JoKalliauer. Cheers, cmɢʟeeτaʟκ 15:16, 10 March 2023 (UTC)

Alpha and beta characters not rendering

This is in

<text x="906" y="360" fill="fuchsia">&#x03B1;%</text><text x="930" y="360" fill="green">&#x03B2;%</text>

JWB (talk) 13:48, 24 March 2023 (UTC)

Do the characters exist in the DejaVu Sans font as installed on the Wikimedia servers used by librsvg at Commons? --Redrose64 🌹 (talk) 19:24, 24 March 2023 (UTC)
They might not have in 2010, but after I switched the font to Noto Sans I noticed that https://upload.wikimedia.org/wikipedia/commons/thumb/archive/c/cc/20230326053935!Sasahara.svg/491px-Sasahara.svg.png (newly generated thumbnail, but still with DejaVu Sans) looks fine. Probably just a very old thumbnail that stuck around. @JWB: feel free to revert if you prefer the other font, both versions should work now. AntiCompositeNumber (talk) 05:44, 26 March 2023 (UTC)
@JWB: I checked now the rendering of the old file it seems to work even with the old file. As @AntiCompositeNumber: already said it is related that it has been rendered in 2010, and ?action=purge most likely would have been enougth.  — Johannes Kalliauer - contrib. 14:50, 7 April 2023 (UTC)

png view of an svg file with right-to-left (Hebrew) text is off place.

I did not succeed in fixing this:

c:File:אינקרטינים וחוסמי DPP-4.svg

I will appreciate any help. Nirts (talk) 13:18, 7 April 2023 (UTC)

@Nirts: Please add at least one category to this file. If you don’t have the time adding a category (that’s the uploaders duty), then I don’t have the time helping you. If you need help adding a category feel free to ask.  — Johannes Kalliauer - contrib. 14:43, 7 April 2023 (UTC)
I've added the same categories as in the English-language version.
Separately, I'm worried about the claim that Nirts is the original "author" (vs. Ilmari Karonen ?), and its resulting licensing. —RCraig09 (talk) 15:35, 7 April 2023 (UTC)
Thanks. I Corrected that field. Nirts (talk) 19:47, 7 April 2023 (UTC)

Another rSVG text rendering bug?

I've run into two tspan-related problems that caused lines of text to be wrongly moved to the right: one was italicization and one was subscripting.

Removing the tspan specifications solved the problem, so you'll have to look at earlier versions on the file description pages to see the problems.


See Version 3: the "portion of..." text is wrongly moved to the right.
  • Suicide methods diagram (italics(:

The second line of the two was moved improperly to the right. Removing the tspan font-style="italic" specification solved the problem.

      <g font-family="Liberation Sans,sans-serif" font-size="40px" text-anchor="middle" fill="black">

<g transform="translate(800,205)">

<text><tspan font-style="italic">Areas</tspan> of rectangles show</text>
<text y="48">portion of attempts that are <tspan font-style="italic">lethal</tspan>:</text>

</g>
      </g>
  • CO2 emissions diagram (subscript):

Removing the tspan baseline-shift="sub" specification solved the problem.

See Version 2: the title at the top was wrongly moved to the right (now it isn't, for some reason!)
      <g font-family="Liberation Sans,sans-serif" text-anchor="middle" font-size="30">

<text x="535" y="56" font-size="45px">National wealth and CO<tspan baseline-shift="sub" font-size="35">2</tspan> emissions</text>

      </g>

Does anyone know if this an old problem? Or how to solve or avoid it? I'm now afraid to use tspan at all! Thanks for any observations or advice. —RCraig09 (talk) 17:43, 25 April 2023 (UTC)

@RCraig09: Maybe phab:T200443. If you provide a minimal (not) working example, you will beter understand the cause of it and how to make workarounds.  — Johannes Kalliauer - contrib. 18:40, 25 April 2023 (UTC)
Thanks, @JoKalliauer: It looks like it's a problem that will have to be avoided rather than be solved. I plan to experiment further. —RCraig09 (talk) 19:09, 25 April 2023 (UTC)
@RCraig09: Strange that the c-librsvg2.40.21 renders it correctly at https://svgcheck.toolforge.org/index.php, see phab:T335415 for details. This issue might get fixed with phab:T216815 (c-librsvg2.40 is abandoned software since 2017, see c:Librsvg_bugs for details) and it could be definitely fixed with phab:T40010.  — Johannes Kalliauer - contrib. 15:11, 26 April 2023 (UTC)
Related bug?
Unsure if it's related to this one which I previously reported. cmɢʟeeτaʟκ 07:12, 27 April 2023 (UTC)
@Cmglee: first version of 1/2n doesn't render correctly on https://svgcheck.toolforge.org/index.php (=identical to Commons). Therfore phab:T335415 is different to phab:T200443, however both bugs might be triggered by the same root. Thanks for the example.  — Johannes Kalliauer - contrib. 16:33, 27 April 2023 (UTC)

Coat of arms of Muhammad Luqman

This coat of arms are personal used by the leader of fictional nation in Brunei Lh1011 (talk) 13:15, 2 May 2023 (UTC)

@Lh1011:
  1. I think you are on the wrong page
  2. be specific what you would like to have
  3. add links to relevant pages
 — Johannes Kalliauer - contrib. 13:38, 2 May 2023 (UTC)
Checkmark This section is resolved and can be archived. If you disagree, replace this template with your comment.  — Johannes Kalliauer - contrib. 13:38, 2 May 2023 (UTC)

SVG filter and text trouble

Blocks are much lighter and "Tu" is displaced

I tried to tint some cubes in File:Extended_two_cube_calendar.svg with SVG filters and it came up very light. The text "Tu" has also been shifted right.

Though the texture looks poor in http://svgcheck.toolforge.org , the colour and text are correct.

After several attempts at fixing it, I reverted it to the 01:31, 16 February 2022 version but the bug persists. Both versions of the SVG look fine rendered by Firefox.

Can someone please help? Thanks, cmɢʟeeτaʟκ 03:57, 8 May 2023 (UTC)

Rather than using
<text transform="translate(50,50) rotate(90)"  y="0.7ex"><tspan>T</tspan><tspan dx="-0.3ex">u</tspan></text>
to draw the two letters individually with different offsets, try drawing them together, use the attribute text-anchor="middle" and specify the centre. --Redrose64 🌹 (talk) 20:27, 8 May 2023 (UTC)
Thanks, @Redrose64. I worked around the text shift using letter-spacing and no tspan.
The texture is still very light, though. I wonder how rsvg has changed since Feb 2022... cmɢʟeeτaʟκ 05:12, 9 May 2023 (UTC)

Text doesn't seem hinted on thumbnail

I'm opening @Timeshifter:'s query to our resident experts. Based on the comparison below:

am I correct to conclude that the less-legible text is due to rsvg not doing font hinting? The font size is 18px, slightly under the recommended 20px.

Thanks,
cmɢʟeeτaʟκ 12:21, 7 May 2023 (UTC)

cmglee and others who are interested. Only a little while ago before I saw this thread I figured out a way to view the SVG files easily at various sizes.
This is useful for bypassing all the Wikimedia software problems altogether while experimenting with the SVG file.
I put the SVG file inline between HTML and BODY tags in a Notepad++ text file. I change only the percent width setting. Say from 100% down to 30% or 50% or whatever. No need to change the height.
Then I changed the extension to .htm and let my browser open it. I can see what the US SVG map looks like at sizes used in Wikipedia articles. It opens at that smaller size. I am using Firefox browser on Windows 10 Pro on a desktop PC.
I used the HTML code in the top example here:
https://www.w3schools.com/html/html5_svg.asp
<!DOCTYPE html>
<html>
<body>
--- SVG file inline. With width of my choice. ---
</body>
</html>
This way I can test out the various text sizes for state names and values that the template allows one to try out. Also turning font bolding on and off. See: Commons:File:Template map of usa states and dc.svg.
--Timeshifter (talk) 21:34, 7 May 2023 (UTC)
cmglee. Oops. I thought I had tried changing the width in the SVG file before. Without putting it in an HTML file. But I must have done it incorrectly, or tried pixels, or various aspect ratios, or the viewbox width numbers. Without luck. But changing BOTH the width and the height in the SVG file works. Changing it to the same number. If starting at 100% for both, then drop down to any lower percentage for both numbers. The same number. Without putting it in an HTML file. Then open the SVG file in your browser to see the smaller size. Here is the SVG code line in question. After changing it from 100% to 50%:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="9 -40 945 630">
--Timeshifter (talk) 22:31, 7 May 2023 (UTC)
You can omit either the width= or the height= attribute, whichever one is present is used as-is, and the missing one is calculated automatically from that using the proportions as set by the last two values in the viewBox= attribute. Personally, though, I point my browser directly at the SVG file, and use its zoom feature. Firefox provides both a keyboard method (Ctrl++/Ctrl+0/Ctrl+-) and a mouse method (Ctrl and roll the mouse wheel). Chrome and Opera use the same keyboard method, I don't know about mouse. --Redrose64 🌹 (talk) 00:06, 8 May 2023 (UTC)
Redrose64 and cmglee. Thanks Redrose64. On the unchanged SVG template file Chrome and Edge work with both the keyboard and mouse method. Firefox does something really weird: Image and text is the same size, but the state text values move vertically up and down the screen. The percentage values remain in place. Have to see it to believe it.
And thanks for the syntaxhighlight fixes.
Removing just the height works, but not the same as within an HTML wrapper.
The zooming method is a great help. --Timeshifter (talk) 01:29, 8 May 2023 (UTC)
Has the discussion has been sidetracked: I thought @Timeshifter: was more interested in why the text appears worse in rsvg's rendering than browsers', rather than how to get an SVG file to display at a given size on a browser? cmɢʟeeτaʟκ 03:31, 8 May 2023 (UTC)
cmglee. I wrote: "I want to bypass all that. Is it possible to add a user-editable way to set a thumb size in the SVG code?" I didn't even think of the zooming method. Or I maybe I tried just the scroll wheel without secondary buttons. Or I used the wrong secondary buttons. I don't remember. But in any case I was trying in the wrong browser (Firefox). But I am very happy about the zooming method in Edge and Chrome. I need to install Opera too. I hope someone answers the rsvg stuff, too. The more methods the better. --Timeshifter (talk) 07:36, 8 May 2023 (UTC)
Someone correct me if I'm mistaken, but the size of thumbnails as they appear on Wikipedia articles cannot be set in the SVG: articles will just use the size specified in the [[File:...svg|thumb|...px|...]] wikitext (if any) or the default. cmɢʟeeτaʟκ 09:35, 8 May 2023 (UTC)

cmglee. Sorry. I was assuming people knew that I just wanted a preview of what a map looked like at article sizes. So I could experiment and find my preferred maps before uploading to the Commons. I was more clear in our past discussions, but this is a new discussion thread, and it needs to be clear. --Timeshifter (talk) 10:53, 8 May 2023 (UTC)

@Timeshifter: if you just want to see what the SVG looks like rendered in a browser at a given size (not a Wikimedia thumbnail in an article), replace
width="100%" height="100%"
with
width="300" height="200"
or whatever size you want in pixels. I used the former so that it would fit the browser window as much as possible. cmɢʟeeτaʟκ 05:22, 9 May 2023 (UTC)

text-anchor="middle" workaround not working

Xc badly spaced

Re the advice in the previous section, I added text-anchor="middle" to each problematic text in the attached SVG but the spacing is still really poor compared to before the latest rsvg change.

Can someone please refine the guidance?

Thanks,
cmɢʟeeτaʟκ 00:27, 5 June 2023 (UTC)

User:cmglee: Sorry, I don't understand all the coding in File:Punnett_square_colour_blindness.svg. I can only suggest experimenting with avoiding <tspan > specifications altogether, for example to achieve superscripting. Instead, manually place each character in a separate <text > specification. It's crude and time-consuming, I know, but <tspan > specifications been involved in several text-related SVG rendering problems. Sorry I don't have a solution, only a work-around. —RCraig09 (talk) 01:05, 5 June 2023 (UTC)
@RCraig09. Thanks for your help, and no need to be sorry! Cheers, cmɢʟeeτaʟκ 02:05, 15 June 2023 (UTC)
For the record, I worked around the problem by using text-anchor="start" on offending text. cmɢʟeeτaʟκ 07:40, 16 June 2023 (UTC)

English translation not rendered in multilingual SVG

Hi again,

This observation is somewhat related to the question above. I translated File:Unfall_Byford_Dolphin.svg into English and Malay (the default language is German). Whereas the Malay version shows with lang=ms, the English doesn't with lang=en (the default German is shown instead):

default
English
Malay

Of course, I could make English the default and add a lang=de translation, but I'd rather not step on the original uploader's toes.

Can an rsvg expert please look into this?

Thanks,
cmɢʟeeτaʟκ 14:10, 29 June 2023 (UTC)

@Cmglee: phab:T335361  — Johannes Kalliauer - contrib. 20:54, 11 July 2023 (UTC)
Thanks, @JoKalliauer: on the ticket, hnowlan added a comment on May 10 2023, 3:07 PM, "I think this has been resolved, lingering issues appear to be from edge caching." Might it be a regression on the new renderer? Thanks, cmɢʟeeτaʟκ 21:26, 11 July 2023 (UTC)
@Cmglee: sorry wrong ticket
 — Johannes Kalliauer - contrib. 05:41, 12 July 2023 (UTC)

systemLanguage="simple" not rendered

Labels are missing

Multilingual SVG allows switch statements to render language-dependent versions.

Previously, this thumbnail showed only labels for years and generation names and dates. Now, text is entirely absent, even when I removed the systemLanguage="simple" line to default to the English version in my last (07:38, 16 June 2023) upload on http://commons.wikimedia.org/w/index.php?lang=simple&title=File%3AGeneration_timeline.svg#filehistory – could an rsvg expert please look into this?

Thanks,
cmɢʟeeτaʟκ 07:49, 16 June 2023 (UTC)

Reposted on http://commons.wikimedia.org/w/index.php?title=Commons:Help_desk&diff=prev&oldid=777537020 as no one has responded in 10 days. cmɢʟeeτaʟκ 16:37, 26 June 2023 (UTC)
English text doesn't render Now fixed
P.S. A similar problem is happening with both the default and en versions of File:Multilingual SVG example.svg – other languages seem fine. cmɢʟeeτaʟκ 23:24, 26 June 2023 (UTC)

@Cmglee:. Hi. The examples should work, but they have run into problems with a recent upgrade to the SVG renderer. simple is not a valid IETF langtag; en-simple should be used instead. That is, use systemLanguage="en-simple". See Phab:T337139. The SVG spec is happy with simple, but some newer code may enforce legal IETF langtags.

The second file does not have a default rendering in its switch elements. See Phab:T337199. The newer renderer does not set the default language to en. Compare:

Glrx (talk) 14:27, 12 July 2023 (UTC)

Fixed!
Thank you very much, @Glrx: "en-simple" works! I tried updating the table on commons:Template:List_of_supported_languages which has "simple" instead of "en-simple" but am unsure how as it just does
{{#invoke:Languages|forEachLanguage|pattern=<tr id="lang_$lc"><td><code>$lc</code></td><td>$lnTrP</td><td>''$lnP''</td></tr>|inLang={{{1|{{int:lang}}}}}}}
It seems to get the list from commons:Module:Languages. Would you know how to fix it? Thanks, cmɢʟeeτaʟκ 01:00, 16 July 2023 (UTC)
@Cmglee:
The world is more complicated. There are IETF language tags (e.g., en-US; used by SVG). There are MediaWiki language identifiers (usually equivalent to IETF language tags but there are exceptions). There are Unix locale strings (e.g., en_US; they are supposed to be opaque).
The three types are often confused, and several games are played.
The MediaWiki language identifier for simple English is simple. The simple English wiki is found at https://simple.wikipedia.org (not https://en-simple.wikipedia.org)
Here's another discrepancy. There is an IETF language tag gsw.
MediaWiki uses the string als for that language. Hence there is the https://als.wikipedia.org wiki. Now the IETF langtag als is for a different language (Tosk Albanian). When the als.Wiki includes an SVG file, it uses the correct gsw IETF language tag.
There is an effort to change some MediaWiki language identifiers, but it takes a lot of work. For example, sr-el and sr-ec map to the IETF langtags sr-Latn and sr-Cyrl. I do not know the goals or status of that effort.
It gets worse: locale strings come into play. Old versions of librsvg used the LANG environment variable to pass the accepted language. That environment variable is supposed to be a Unix locale string, but early librsvg used it as an IETF langtag. Then librsvg started using the environment variables as Unix locale strings. So right now MW uses a hack that converts hyphens to underlines and shoves that into the LC_All environment variable; it is not the right thing; I doubt it works for Chinese. Modern versions of librsvg have a command line argument for the accepted languages; that is the right way to do it, but MW is not using those versions of librsvg yet.
Glrx (talk) 07:09, 16 July 2023 (UTC)
@Glrx: Many thanks for explaining. I've just seen your instruction. Was my addition on http://commons.wikimedia.org/w/index.php?title=Template:List_of_supported_languages&diff=prev&oldid=783623783 accurate? Cheers, cmɢʟeeτaʟκ 08:44, 16 July 2023 (UTC)
@Cmglee:
If the template is used for MW language identifier support, then the addition is wrong. If the template is used for IETF langtag support, then the addition is correct. The template's apparent purpose is for MW language identifiers (sr-latn and sr-cyrl are not present), so I think the addition is inappropriate.
If it is any consolation, the type confusion creeps into many places.
Glrx (talk) 18:30, 16 July 2023 (UTC)
See Meta:Special_language_codes. That article uses subdomain name for MW language identifier used above.
Glrx (talk) 18:36, 16 July 2023 (UTC)
Thanks, @Glrx. Is http://commons.wikimedia.org/w/index.php?title=Template:List_of_supported_languages&diff=prev&oldid=784094266 better? Cheers, cmɢʟeeτaʟκ 15:08, 17 July 2023 (UTC)
@Cmglee:
I do not know.
If the template is a table of IETF langtags, then als should not map to Albanian; simple should not map to English (simple has too many letters for a language: an IETF language subtag should have 2 or 3 letters); cbk is OK but not cbk-zam.
The table is a list of MW subdomains/language identifiers. They are not really subdomains either: there is not an sr-ec.Wiki, sr-latn.Wiki, or zh-hant.Wiki; scripts are not used in subdomains.
Consider how MW interprets the tags.
MW-specific identifiers that are not legitimate IETF langtags
  • {{#language:als}} → Alemannisch
  • {{#language:simple}} → Simple English
  • {{#language:sr-ec}} → српски (ћирилица)
  • {{#language:sr-el}} → srpski (latinica)
  • {{#language:cbk-zam}} → Chavacano de Zamboanga
Legitimate IETF langtags
  • {{#language:gsw}} → Alemannisch
  • {{#language:en-simple}} → Simple English
  • {{#language:sr-cyrl}} → српски (ћирилица)
  • {{#language:sr-latn}} → srpski (latinica)
  • {{#language:cbk}} → Chavacano de Zamboanga
  • {{#language:zam}} → zam (IETF: Miahuatlán Zapotec)
  • {{#language:tlh}} → tlh (IETF: Klingon)
  • {{#language:mul}} → mul (IETF: multiple languages)
  • {{#language:und}} → und (IETF: undetermined)
The template is apparently included in some SVG display templates, but I do not know if that was an intended use.
I see the template as a confused mix of identifiers. It is not clear what they are or where they are used.
Glrx (talk) 19:42, 17 July 2023 (UTC)
That's all right. Many thanks for explaining what you know, @Glrx: as the template is used on commons:Commons:Translation_possible/Learn_more#Language_codes which educates editors on the use of systemLanguage, I thought that it should be accurate. Perhaps it should have three columns of codes: MW, IETF and ISO 639? I see you've made a good attempt to explain it in the above section, but a layperson would still not be able to know what code to use for edge cases like "en-simple". Cheers, cmɢʟeeτaʟκ 04:17, 19 July 2023 (UTC)
@Cmglee:
It still depends on the purpose of the template. I could see a table of MW language identifiers with their corresponding IETF langtags. I'm not sure about the utility of such a list. The important aspect is there are a few WMF sites that use different identifiers (e.g., alsgsw). A list of IETF langtags would be incomplete. MW normally does not distinguish en-GB or en-US.
If the language identifier is used in HTML or SVG, then it should be an IETF langtag. The canonical source for those langtags is the IETF registry. There are some sticky points about usage. For example, Chinese is a mess. MW wants to use zh-hans (macrolanguage-script). Other sites want to use zh-CN (macrolanguage-country; mainland China implies Hans script). Still others want to specify the dialect: zh-cmn (macrolanguage-language; Mandarin) or just cmn (Mandarin; preferred).
There are a few translation MW projects. Those projects may be using the MW identifiers or even a mix of those identifiers and IETF langtags.
I wish the situation were clearer.
Glrx (talk) 05:49, 19 July 2023 (UTC)
Thanks again. I've reverted my change in the heading and noted en-simple in commons:Commons:Translation_possible/Learn_more#Language_codes. One solution is to hardcode the table on that page with IETF codes and not mention the WM codes. Cheers, cmɢʟeeτaʟκ 09:11, 19 July 2023 (UTC)

Is a DOCTYPE line ever needed?

I see it in some SVG image code, but not in others. For example:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

in File:Template map of usa states and dc.svg

I don't see it in OWID (Our World in Data) maps or graphs. Or here:

Is it needed in rare cases, or some kind of backward compatibility with old browser versions?

This page says it is not needed:

"XML, and some XML dialects (SVG and HTML included), don't require a DOCTYPE declaration. SVG 1.2 doesn't even have one. ... Any user agent that identifies XML content using its DOCTYPE declaration is unreliable. The real answer to the question is that XML content tells the user agent which dialect the element names belong to by giving them explicit 'namespace declarations'. ... The namespace declaration is provided by the xmlns parameter." --Timeshifter (talk) 02:28, 19 July 2023 (UTC)

I suppose if someone wanted to validate the SVG files in a general XML editor, it might be useful. http://w3.org/QA/2002/04/valid-dtd-list.html states
and lists several SVG doctypes. I haven't seen any issues in thumbnails or browsers with or without it. Cheers, cmɢʟeeτaʟκ 04:38, 19 July 2023 (UTC)
Commons:Help:SVG is what I needed to find. A detailed SVG help page. From it:
Commons:Help:SVG#Before you upload: validation and checking image appearance
"If there is no DOCTYPE (which is not required nor is it recommended)"
It has a couple references.
--Timeshifter (talk) 06:42, 19 July 2023 (UTC)
The SVG 1.1 (Second edition) spec, section 1.3 SVG Namespace, Public Identifier and System Identifier explicitly states It is not recommended that a DOCTYPE declaration be included in SVG documents. So I normally leave it out. --Redrose64 🌹 (talk) 18:15, 19 July 2023 (UTC)
See also c:Help:SVG#Document declaration. --Redrose64 🌹 (talk) 18:35, 19 July 2023 (UTC)
As for cmglee's list, it has four entries. Of these, SVG Basic and SVG Tiny are both stripped-down specs intended for mobile, whereas we use the full spec; our librsvg recognises SVG 1.1; so the only one of the four that is valid is SVG 1.1 Full - DTD:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
--Redrose64 🌹 (talk) 19:13, 19 July 2023 (UTC)
Thanks, Redrose64. So can that whole DOCTYPE line be left out? As long as the xmlns parameter remains elsewhere in the file? --Timeshifter (talk) 22:12, 19 July 2023 (UTC)
Yes, the DOCTYPE may be left out. But whether it is present or not, the xmlns="http://www.w3.org/2000/svg" attribute should always be used on the <svg> tag; it's difficult to explain, and also difficult to find some clear documentation (section 5.1.1 Overview isn't the easiest part of the SVG spec to understand), but omitting that attribute would either make the rest of the SVG file invalid, or require more complicated syntax for it to be valid. If you really want to read up on it, see Namespaces in XML 1.0 (Third Edition). --Redrose64 🌹 (talk) 23:29, 19 July 2023 (UTC)

Is it always OK to remove SVG version number?

See: Version.

According to that page it is OK to remove version="1.1" or version "1.0" (etc.) from an SVG file. Because the version attribute has been deprecated.

"Deprecated: This feature is no longer recommended."

Is there any reason to ever keep it? --Timeshifter (talk) 02:40, 19 July 2023 (UTC)

According to http://stackoverflow.com/a/34249810 ,
cmɢʟeeτaʟκ 04:44, 19 July 2023 (UTC)
cmglee. "image/svg+xml files"
Does that apply to File:Template map of usa states and dc.svg?
What does it apply to? --Timeshifter (talk) 14:17, 19 July 2023 (UTC)
Our librsvg doesn't recognises SVG 2, but SVG 1.1, where the attribute is certainly not deprecated. I recall some SVG problems two or three years ago (not necessarily on this page) which were fixed by adding the missing attribute version="1.1". --Redrose64 🌹 (talk) 18:24, 19 July 2023 (UTC)
See also c:Help:SVG#Document declaration. --Redrose64 🌹 (talk) 18:37, 19 July 2023 (UTC)
OK, Redrose64. I will return it to a few maps I removed it from.
I note that Wikimedia has been working on SVG stuff relatively recently. See: Phab:T265549. --Timeshifter (talk) 22:19, 19 July 2023 (UTC)
Yes, but per RsvgHandle Description, Librsvg supports reading SVG 1.1 data, and is gradually adding support for features in SVG 2, therefore, until full SVG 2.0 support is provided, we must not use SVG 2.0 features that are not also explicitly part of the SVG 1.1 spec; similarly, we must not omit syntax that will be optional or deprecated in SVG 2.0 but which is required by the SVG 1.1 spec. --Redrose64 🌹 (talk) 23:44, 19 July 2023 (UTC)

How to remove paths that go beyond the actual vector graphic?

Hello, I have a problem with an SVG file that already exists on Commons: mini

The file has paths that go beyond the drawing area in Illustrator. Screenshots: https://ibb.co/r07LZN8 and https://ibb.co/fGTBQtR

Basically, the file is very good and should not change if possible.

Unfortunately, the file can only be used poorly in this way. Does anyone have an idea how I can remove all paths that go beyond the actual vector graphic? Bildersindtoll (talk) 07:32, 20 July 2023 (UTC)

I don't see paths beyond the graphic in Inkscape 1.2.2 or in a browser. Nevertheless, I've saved it as a plain SVG in Inkscape 1.2.2. Can you refresh your cache and try again? cmɢʟeeτaʟκ 13:33, 20 July 2023 (UTC)
First of all thanks for your effort. I use Adobe Illustrator and the paths (like on the screenshots) are still there in your file. But maybe that's not an important point.
My main concern was to use this coat of arms to create an actual vector graphic of the country's flag with the recent details from the coat of arms. This is the PNG on Commons: mini
If someone with this SVG-coat of arms can do that, the problem would be solved. Bildersindtoll (talk) 14:20, 20 July 2023 (UTC)
Paths that go beyond the actual vector graphic shouldn't be a problem. Indeed, the technique is used quite often, some images being easier to make this way. Consider a very simple example: c:File:BSicon STRr.svg. This has all the appearance of a 90° curve, but in fact it's a circle centred at one corner of the image, so three-quarters of the path is outside the visible area. The SVG spec explicitly allows this in section 7 Coordinate Systems, Transformations and Units, by introducing the concept of an infinite canvas and a finite viewport within that.
cmglee: Inkscape can show the portions of paths outside the viewport, perhaps it's a configuration setting at your end. --Redrose64 🌹 (talk) 18:26, 20 July 2023 (UTC)
Thanks, @Redrose64.
A general solution to @Bildersindtoll's problem is to use clip-path – or mask for more advanced clipping such as taking into account stroke-width and stroke-dasharray, or opacity. cmɢʟeeτaʟκ 09:26, 21 July 2023 (UTC)
@Bildersindtoll: As File:Flag_of_Saxony-Anhalt_(state).svg is already an SVG (not PNG, as stated above) with the correct clipping, what did you wish to do? cmɢʟeeτaʟκ 09:32, 21 July 2023 (UTC)
Hi @Cmglee Unfortunately it's only an SVG-File but not an actual vector graphic. You can see it if you open the SVG in your browser and zoom in. Basically, I'm trying to put the SVG crest on the flag to make it an actual vector graphic. If you can do that, then of course that would be great. :) Bildersindtoll (talk) 10:24, 21 July 2023 (UTC)
Fixed?
@Bildersindtoll: Now I understand. I've uploaded a new version using File:Wappen_Sachsen-Anhalt.svg, made the background colours the same as the stripes' and restored the default width and height. Is it fine now? cmɢʟeeτaʟκ 15:29, 21 July 2023 (UTC)
Thank you @Cmglee Looks great, but there's one thing that's not quite right yet. The yellow color no longer seems to correspond to the original. (You can see it compared to the previous versions) I assume you transferred the yellow from the coat of arms to the flag? I think it should be exactly the opposite. I'm not sure if I can change that myself. If it shouldn't be too much trouble for you, I would of course be happy if you could do it. :) Bildersindtoll (talk) 16:24, 21 July 2023 (UTC)
Yes, I got it from File:Wappen_Sachsen-Anhalt.svg. If you open the SVG files and find the line
	.st1{fill:#EBBD00;}
changing EBBD00 to the FCD116 should use the yellow in the "PNG". Other colours are set in adjacent lines.
If there isn't a published guideline, you might want to check with other uploaders to come to a consensus first. Cheers, cmɢʟeeτaʟκ 22:59, 21 July 2023 (UTC)
@Cmglee I just did it. Thanks a lot again. There is actually a guideline and the color is listed there. By the way, I took a look at your user page and you are doing a really great job here....super interesting. Keep it up. :) Bildersindtoll (talk) 08:52, 22 July 2023 (UTC)
Thanks, and my pleasure, @Bildersindtoll: cmɢʟeeτaʟκ 16:00, 22 July 2023 (UTC)

Text Alignment breaking

I'm not sure if this is related to the first section on this page, though it may be, and I'm almost certain the issue here is with the tspans. Note how some of the text is incorrectly aligned or flowing off the page compared to the actual file. I would remove the tspans, but I'm unsure of how to do so without manually fixing the location and styles of each piece of text? Any help on correcting the alignment appreciated. – Isochrone (T) 20:21, 23 July 2023 (UTC)

@Isochrone: There are several possible causes.
First, there's an invalid declaration inside the <style>...</style> element - inside that, there is a rule
.cls-15,.cls-3{font-family:OpenSans-Medium,&quot;Open Sans&quot;;font-size:6px;font-weight:500}
which should be
.cls-15,.cls-3{font-family:OpenSans-Medium,"Open Sans",sans-serif;font-size:6px;font-weight:500}
Second, every declaration for the font-family: property should specify one of the five generic family values as the last item in its value-list, as I did with the sans-serif above. So, in the style="..." attributes of the present image, there are over 60 instances having font-family:'Noto Sans'; which should be font-family:'Noto Sans',sans-serif; and also two instances having font-family:Arial; which should be font-family:Arial,sans-serif;
Third, three of the fonts are not recognised by our installation of librsvg - unless a font is explicitly listed at m:SVG fonts, don't expect it to display as intended. --Redrose64 🌹 (talk) 20:58, 23 July 2023 (UTC)
Hi @Redrose64, thanks for your quick reply.
Unfortunately that isn't the issue, you're right that Open Sans isn't recognised, and so I removed it and used Noto Sans instead. The redundant style remains (I've removed it) but the actual font families are rendering fine in the SVG file, i.e. not the fallback DejaVu fonts.
I know it's not the best SVG, but it renders fine on everything except for rSVG... even if the fonts are falling back I wouldn't expect the positioning to be completely broken(!) – Isochrone (T) 21:09, 23 July 2023 (UTC)
So the issue was this weird nesting of the tspans within groups, I've removed that and it's... somehow working? I'm not really sure but thanks for the help – Isochrone (T) 09:31, 24 July 2023 (UTC)
The latest rsvg ignores text-anchor inheritance, defaulting to start. Try specifying it for each text tag using it. (This fix is not assured as it does not always work.) Cheers, cmɢʟeeτaʟκ 18:41, 24 July 2023 (UTC)