Wikipedia:SVG help

See also: Wikipedia:Graphic Lab/Resources/SVG and Wikipedia:Graphic Lab/Illustration workshop

Create a new request

SVG help Scalable vector graphics is a commonly used file format for providing a geometrical description of an image using basic objects such as labels, circles, lines, curves and polygons. An image can be reduced or enlarged to an arbitrary size, and will not suffer image data loss, nor will it become pixelated. SVG makes an excellent format for artwork, diagrams and drawings. SVG images are defined in XML text files. This means that they can be searched, indexed, scripted and, compressed. Since they are XML files, SVG images can be edited with any text editor, but SVG-based drawing programs are also available. However, the rendering engine used by wiki is not perfect, and may cause the image to be shown incorrectly, or differently from how it is displayed in your vector editor of choice. This page enables authors experiencing problems with SVG graphics to obtain some help in getting their images into wiki the way they intend. Further information: Help:SVG

Things that can be helped with on this page Understanding SVG Questions about the SVG format Using SVG appropriately When to (or not to) use SVG What you see is not what you get Missing objects from files Random filled boxes in the image Images that are the wrong size Font inconsistencies Other weird and wonderful bugs Something new Questions that you can't find a better place for

Common problems black boxes Tracked in Phabricator Task T43424 Declined a picture containing SVG1.2-valid flowRoot If black box appear, read c:User:JoKalliauer/RepairFlowRoot how to solve this issue, but do not remove those objects since they might contain text. The workarounds that one can employ are either not to use flowed text (by using the text tool without creating a text field), or convert the text to normal text (by Text-editor or sed-comand, or with Inkscape-GUI or with a Inkscape-batch), but to stroke the text using "object to path", since path-text is not recomended and increases file-size. font-family issues Tracked in Phabricator Task T180923 fallbackfonts Due to copyright restrictions, MediaWiki cannot use proprietary fonts that are commonly found on several proprietary operating systems. Fonts such as Geneva require licensing fees to distribute. rsvg will not be able to locate such fonts, and the text will fail to appear in the rendered image. There are three solutions to this issue: One can substitute a font that is available on Wikipedia. (Facilitates editability.) One can specify a generic font-family such as "sans-serif", "serif", or "monospace", but this will lead to a different rendering, better is to use fallback-fonts such as font-family="Liberation Sans,Arial,Helvetica,sans-serif", that you define simmilar fonts wich are available on 1)Wikimedia 2)Windows 3)Linux 4)Mac. Or, alternatively, one can convert the text into path information, but it is not recommended, except vor textlogos. Group text, and create two copies, converting one to paths (Compromise)] and making the other editable text layer transparent, but this might get removed by SVG-optimizers. moving the text outside the visible area, as in File:Essigsäuresynthesen.svg. For ease of subsequent editing and significantly smaller file sizes, substituting the font with an available font is the recommended option. Many of the common fonts have non-proprietary alternatives that are somewhat similar in typographical style, resulting in minimal disruption to existing images during substitution. For a list of fonts available in Wikipedia, see available fonts on Meta. Wikimedia has some default-fallback-fonts, and will use Liberation Serif for Times New Roman, and Liberation Sans for Arial, for all further fallbacks please see: c:Help:SVG#fallback Fonts which are available on Wikimedia servers may or may not be available on a visitor's machine. If the placement or appearance of text in the image is important and there is uncertainty about which fonts are installed on a visitor's machine, then converting text into path information (as mentioned hereinbefore) may be necessary. bad letter-alignment on small font-size Tracked in Phabricator Task T36947 Open phab:T36947 Librsvg calculates the letter-distances inaccurantly for font-sizes of 20px and below. For a text like <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="30" font-size="5px">exampletext</text> </svg> you can replace it with: <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"> <text x="200" y="300" font-size="50px">exampletext</text> </svg> or with <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g transform="scale(0.1)"><text x="200" y="300" font-size="50px">exampletext</text></g> </svg> Missing embedded JPEG images Tracked in Phabricator Task T193929 Invalid Normal image Broken image When a raster graphic is embedded in an SVG it is encoded into base64 data. That data is then assigned a MIME type in the <image> element. In the case of an embedded JPEG, the MIME type is "image/jpeg". Older versions of Inkscape (and possibly other editors) assigned the MIME type "image/jpg". While Inkscape and most web browsers will display such an SVG image just fine, the MediaWiki software that rasterizes the SVG file will have trouble with it. Not recognizing the MIME type "image/jpg" there will simply be an empty space where the image is supposed to be. The fix is to open the SVG file in a text editor, find the <image> element, locate "image/jpg", change it to "image/jpeg" and re-save. At right is an example of this problem. The Commons SVG Checker looks for this problem; see Commons:Commons:Commons SVG Checker/KnownBugs#Checks for details. CSS rules being ignored Tracked in Phabricator Task T68672 Open repaired file after it was black When CSS rules are included between <style>...</style> tags, make sure that the opening tag has the attribute type="text/css" (as in <style type="text/css">...</style>). This attribute is defined in the SVG specifications, although not required by them; but some user agents (including librsvg) will not process the element without that attribute. Without the attribute, default values may be used - such as black instead of a colour. Rendering files MediaWiki (the software from which Wikipedia is run) uses the librsvg-library to rasterize all of its svg files. The version of the rsvg program that is installed on wiki does not always correctly raster the Inkscape or OpenOffice.org SVG files. The file manager GNOME Files or c:Commons:Commons_SVG_Checker relies on librsvg, so it can be used to check the quality before a SVG is uploaded. Rendering Inkscape files There is a simple work-around for the scarcities of librsvg. The operation "Stroke to Path", to be found under Menu>Path in Inkscape or via Ctrl+Alt+C, can be applied to all of the objects that are not rendered correctly. To keep the SVGs editable, this should only be done to the files intended for upload, and these files can be deleted afterwards. As of February 2014, the objects that must be modified to render correctly by libsrvg include: Lines with arrow heads (the arrows need to be converted) Text, that has been transformed, e.g. "Text on Path" Compound objects created with the binary path tools (union, intersect etc.) Rendering OpenOffice.org SVG files OpenOffice.org SVG files may require manual modification before being uploaded to Wikipedia. To achieve this: Change all fonts to Wikipedia supported fonts as mentioned before. (E.g. change "Sans embedded" to "DejaVu Sans".) Add "px" to all font-size references. (E.g. change "font-size:100" to "font-size:100px".) Remove all additional x coordinate references in tspan elements. (E.g. change <tspan x="17583 17917 " y="10943"> to <tspan x="17583" y="10943">.) [Not required for OO 2.3.0] Explicitly colour all text (e.g. black) by replacing relevant "stroke:none;fill:none" instances with "stroke:none;fill:rgb(0,0,0)" (note that simply explicitly colouring text black in OpenOffice 3.2.1 does not appear to work). NB: Vector graphics line widths may also need to be set explicitly in OpenOffice.org Draw. SVG code replacement guide (executing replace all using Nedit regular expressions) Original text Replacement text Sans embedded DejaVu Sans tspan x="([0-9]*) ([0-9 ]*)" tspan x="\1" <g style="stroke:none;fill:none"><text> <g style="stroke:none;fill:rgb(0,0,0)"><text> This SVG export procedure has been tested using OO 2.3.0 and OO 3.2.1 with a simple .odg candidate. Further information: Help:SVG

Assistance

If you have a tricky SVG file with a problem not described, or can't quite figure out what the previous section was talking about, you can simply ask for assistance by posting a quick note hereafter that outlines the problem, as well as providing links to the files that are exhibiting these problems. Don't forget to sign your name with four tilde symbols (~~~~) and an editor will attempt to reply here to help!

When you are happy that a request has been fulfilled, just leave a note so that the request can be archived later, as needed.

An alternative source of help is Commons:Graphics village pump.

Current requests

Create a new request

File:Respiratory system be.png, File:Equatorial coordinates.be.png

Hi! I think that files should be in SVG-format. Please, help to transform it. --Einimi (talk) 11:08, 5 February 2018 (UTC)

@Einimi: This is really a matter for Wikipedia:Graphics Lab. --Redrose64 🌹 (talk) 16:46, 5 February 2018 (UTC)

The way to suggest converting PNG to SVG is to tag the files on Commons with {{Convert to SVG}}. There are already SVG versions of the first file (e.g., commons:File:Respiratory_system.svg); a better result would have been to run SVG Translate on the English SVG. Glrx (talk) 20:08, 5 February 2018 (UTC)

Poor SNG rendering

Hello, some of the line objects in this file are blowing up and the pngs are not rendering correctly. Please may you advise? (91.225.114.9 (talk) 09:54, 26 February 2018 (UTC)Nancy_clarence) commons:File:Studholme.svg

@Nancy clarence: I've fixed it, but it took me two goes. There were two main things that were wrong: I added the line

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

at the very start - although not required by the SVG spec, this is required by some user agents (similarly, I added the attribute version="1.1" to the <svg> tag although this is less important); second, I added the attribute type="text/css" to the <style> tag - again, not required by the SVG spec but required by some user agents. I also added newlines and indentation for clarity. --Redrose64 🌹 (talk) 10:32, 26 February 2018 (UTC)

@Redrose64: thank you very much. Is it possible to erase the early attempts to make the file history cleaner? — Preceding unsigned comment added by 91.225.114.9 (talk) 10:36, 26 February 2018 (UTC)

I can't; only a Commons Administrator can do that - but I think that they would refuse, see c:Commons:Revision deletion#Revision deletion is used sparingly. --Redrose64 🌹 (talk) 11:26, 26 February 2018 (UTC)

SVG Rendering issue: c:File:Legal_situation_of_surrogacy.svg

I use Inkscape with c:File:Blank_Map_World_Secondary_Political_Divisions.svg as a template and fill the area with the color code according to c:File:Maternidad_subrogada_situación_legal.PNG.

At first, I forget to resize the canvas size, so it was rendered only the middle area. Then I select all object in the image and use "Resize page to drawing or selection" to resize the canvas.

The problem was the PNG rendered from the WikiMedia is wrong. Some countries, both fill and unfill colors, is going blank. But the original file is work just fine. I try open both IrfanView and Google Chrome and it's properly rendered.

Do you have any idea how I went wrong or any suggestions?

Thank you, — Preceding unsigned comment added by Itpcc (talk • contribs) 18:00, 26 February 2018 (UTC)

I took a quick look.

The style element has been moved to the end, and that may be confusing the agent.

The SVG file is huge at 6.5 MB.

Glrx (talk) 19:22, 26 February 2018 (UTC)

Yes, certainly move the <style>...</style> element - it should really be no later than the first element that matches one of the selectors inside the <style>...</style> element. Personally I would put it between the <title>...</title> element and the <defs>...</defs> element, but it could alternatively be placed inside the <defs>...</defs> element. --Redrose64 🌹 (talk) 23:38, 26 February 2018 (UTC)

Thank you for your comments. I agree that the file size is too large. I try to save in Inkscape as "Optimized SVG". But, as you can guess, it doesn't work.

That drives me very frustrated! I don't know how to make it right. I think I should stop editing this file and make a new one from scratch with other software (Maybe Adobe Illustrator, who know).

Anyway, thank you for your time. I'm really glad your kind comments. Itpcc (talk) 12:28, 27 February 2018 (UTC)

Moving Files Over to Wikia/FANDOM

I'm an admin on the Alternate History Wiki. Over the past few years, I've been trying to keep our files in sync with those of Wikimedia. As of the past few months, several files appear to be corrupted and distorted once uploaded onto Wikia/FANDOM.

One example is File:Flag of Hungary (1867-1918).svg, which became completely distorted and unusable on our site (see here in file history). I've "fixed" it by pasting a PNG version over the SVG, but this is only meant to be temporary. This issue also exists for several SVG files moved over to our site (flags, coats of arms, and logos).

I was hoping you guys give shed some light on how to fix this (if possible). Any help would be greatly appreciated. --NuclearVacuum (talk) 21:01, 17 March 2018 (UTC)

@NuclearVacuum: I usually ignore requests for assistance with Wikia: I object to the advertising. However, this is the same problem as #Poor SNG rendering above - the SVG source begins with an <svg> tag, specifically <svg xmlns="http://www.w3.org/2000/svg" height="600" viewBox="161.5 13.5 245.7 159.45503" width="900" version="1">. There's nothing wrong with that - it's valid per the SVG 1.0 spec - but some user agents won't handle it without a line of XML before that, like <?xml version="1.0" encoding="UTF-8" standalone="no"?> - of this, the standalone="no" is optional, the rest is necessary although none of it is part of the SVG spec. --Redrose64 🌹 (talk) 23:16, 17 March 2018 (UTC)

@Redrose64: Thank you for your reply. However, I don't believe the linked message is the same issue here. Another example is File:Ottawa_Senators.svg, which possesses all of the aforementioned additions you've made prior, but still becomes distorted over on Wikia.[1] Any thoughts? --NuclearVacuum (talk) 00:02, 18 March 2018 (UTC)

File:KomunistiLogo.svg

had been converted to , but apparently, when I converted it, I cannot duplicate the Georgian alphabets with the curves. Also, there is some problem with the alphabet hollow centers. I cannot make it transparent, so I make it white instead. Can someone help me? Thanks.--Respublika Narodnaya (talk) 08:59, 25 April 2018 (UTC)

@Respublika Narodnaya: Have you tried WP:GL/I? --Redrose64 🌹 (talk) 15:52, 25 April 2018 (UTC)

@Redrose64:How to do it? Can you do it for me?--Respublika Narodnaya (talk) 15:53, 25 April 2018 (UTC)

My curiosity got the better of me.

• კომუნისტი ("Communist") was obvious.
• პროლეტარებო ყველა ქვეყნისა, შეერთდით! ("Join the proletariat of all countries!") was harder (I got a letter wrong, so I was getting "all pets unite!"). The ka.WP even has an article on it: პროლეტარებო ყველა ქვეყნისა, შეერთდით!

Glrx (talk) 17:29, 25 April 2018 (UTC)

@Respublika Narodnaya: At WP:GL/I there are some tabs at the top. One of them is "Illustration workshop" which is bolded. In the same tab you should see a link like "New request". Click that. --Redrose64 🌹 (talk) 19:06, 25 April 2018 (UTC)

I think RN got it working; the file now has the "Join the proletariat..." motto. Glrx (talk) 22:01, 25 April 2018 (UTC)

Burka Ban Map

hi I want somebody to make a map of nations that ban the burka and the nation that don't currently have a ban. on the Islamic dress in Europe. ‎ QubecMan (talk) 02:04, 15 June 2018 (UTC)

Rasterised version loses colour?

Hi, I just uploaded File:Boston_Uprising_logo.svg. Basically, the original SVG has colour, but the rasterised PNG created by Wikipedia seems to lose it. If anyone could point me in the right direction I would appreciate it. Wiki nV (talk) 13:24, 5 July 2018 (UTC)

Fixed myself, can be archived. Wiki nV (talk) 13:49, 5 July 2018 (UTC)

@Wiki nV: Alternatively, you could have added the attribute type="text/css" to the <style> tag, as in

<defs>
<style type="text/css">.cls-1 {
        fill: #174b97;
      }</style>
</defs>

It's not required by the SVG spec, but some user agents won't process the <style>...</style> element without it. --Redrose64 🌹 (talk) 15:32, 5 July 2018 (UTC)

@Redrose64: Roger that, noted for next time. Cheerio. Wiki nV (talk) 16:28, 5 July 2018 (UTC)

Problem with my svg image colors

So I updated a map and uploaded it. The png thumbnail is colorless, but when I open the original svg version of the image, the colors are back. I think the reason is that I used var function to color elements. Does anyone know how to solve the issue? — Preceding unsigned comment added by New in site (talk • contribs) 04:51, 11 August 2018 (edit) (UTC)

@New in site: It's never a good idea to use w3schools for advice. It's not always accurate, and they have a habit of implying that proposed features are widely recognised. var(...) is not a feature of SVG, it is part of CSS Custom Properties for Cascading Variables Module Level 1 which is a W3C Candidate Recommendation, therefore not a formal standard, therefore it is something that user agents need not follow. We use librsvg to convert SVG files to PNG, and you should not use any feature that is not explicitly described in either the SVG 1.1 specification or in the CSS 2 spec. --Redrose64 🌹 (talk) 08:08, 11 August 2018 (UTC)

@New in site: just replace:

• var(--aaa) -> #385E0F
• var(--aa) -> #6E8B3D
• var(--a) -> #BEE554
• var(--bbb) -> #FFC125
• var(--bb) -> #FF8600
• var(--b) -> #E04006
• var(--ccc) -> #802A2A
• var(--sd) -> #000000
• var(--nr) -> #999999

However please check your source-code in line 2049 ' id='ma'/> without any tag except <svg> around it, there might be something broken.

JoKalliauer (talk) 09:27, 12 August 2018 (UTC)

File:LaredoBucksLogo.svg and File:WichitaFallsForceLogo.svg

Hello,
So I recently uploaded File:LaredoBucksLogo.svg and File:WichitaFallsForceLogo.svg, but there are some problems. The former is entirely black, and the latter is just all kinds of messed up. It's worth noting that I have zero experience working with vector graphics, and I simply pulled the SVGs directly from the teams' websites. Any ideas on how to fix this?
Thanks,
Sparkyb10123 (talk) 20:58, 28 August 2018 (UTC)

@Sparkyb10123: File:LaredoBucksLogo.svg was fixed by adding type="text/css" to the style tag. This is a longstanding bug that will be fixed soon. As for the other logo, it too was missing type="text/css" in the style tag. However, adding it did not fix the issue. It seems like that might be related to another bug, and I'll leave fixing it to someone with more experience with librsvg's quirks. --AntiCompositeNumber (talk) 21:57, 28 August 2018 (UTC)

@AntiCompositeNumber: Awesome, thanks! Sparkyb10123 (talk) 22:22, 28 August 2018 (UTC)

SVG slightly cut off

I have noticed that some SVG images (particularly logos) are slightly cut off and have a small section missing on one side, when viewed on Wikipeida, but when the same image is viewed using editing software such as InkScape they appear fine. For example:

File:Supreme_court_crest_(official).svg is very slightly cut off on the right hand side of the "circle"

File:Guy's_and_St_Thomas'_NHS_Foundation_Trust_logo.svg has the text on the bottom line cut off as well

ElshadK (talk) 14:07, 2 September 2018 (UTC)

The first one is actually cut off on both sides, but it's more obvious on the right. This can happen if you have a circle whose radius has a value approaching half of the available width. Remember that the stroke (by which the outline of the circle is made visible) has a width, which means that if you have a circle of radius 50px and a stroke of width 1px, the containing box must be at least 101px wide otherwise the sides of the circle will be clipped.

Another possibility is that InkScape is using some non-standard feature that it knows how to handle, but which is unrecognised by librsvg. See my reply of 08:08, 11 August 2018 (UTC) above. --Redrose64 🌹 (talk) 14:51, 2 September 2018 (UTC)

Font Issue...

Hello,

I have not been able to fix the font issue that I meet in File:Nombres de motzkin.svg. I have read the font section here above, and the list of available fonts. This file requires a monospace font. I have chosen 'DejaVu Sans Mono', but still the png preview is not correct. Note that the svg itself displays correctly when clicked on.

Can you please help ?

Kilom691 (talk) 19:16, 14 September 2018 (UTC)

There's a bug in MediaWiki's renderer that chokes on apostrophes in the font-family attribute (but not the font-family style property). So I removed the apostrophes. I also added the font-family monospace so it has a chance in other venues. Glrx (talk) 19:53, 14 September 2018 (UTC)

Thanks a lot ! Kilom691 (talk) 06:13, 15 September 2018 (UTC)

New color

The Euro 1976 logo is in the wrong shade of blue, like it is shown here in UEFA official site, or more specifically the image here. I have made the fixed version in .png file. What should I do? – Flix11 (talk) 06:55, 1 October 2018 (UTC)

Forget about PNG, for a start. Whilst it is a comparatively simple task to convert a SVG to a PNG (librsvg does this all the time), the reverse conversion is difficult. If you want to alter the colours in an existing SVG, edit that using either an application which knows about SVG - such as InkScape - or use a plain text editor like MS WordPad or MS Notepad.

The image being File:UEFA Euro 1976 official logo.svg, you would go to that page, click the Original file link (or click the image itself) and use your browser's "Save as" feature to save it somewhere on your computer. Then open the saved copy in WordPad (or whatever you choose to use), look for each instance of the "wrong" blue - almost certainly the value #0505ff in attributes like fill="#0505ff" - and alter this value to whatever you decided was the correct value (use "Search and replace" with "Replace all" to do them quickly). Save it, and use the Upload a new version of this file feature found on the file description page. --Redrose64 🌹 (talk) 08:24, 1 October 2018 (UTC)

@Redrose64: Thank you for helping. I just wonder if I can make SVG image files for the Euro 1960, 1968, and 1984 logos because the logos (flags) are in different ways, like in UEFA sites of 1960, 1968, and 1984. What should I do? Should I upload PNG images I made instead? – Flix11 (talk) 10:57, 1 October 2018 (UTC)

I don't understand the question "I just wonder if I can make SVG image files ..." - these three are already in SVG format. If SVG is available, that is to be preferred over PNG because SVG are infinitely scalable and compress much better for the web. --Redrose64 🌹 (talk) 21:02, 1 October 2018 (UTC)

I think Flix11 is pointing out that WP's SVGs differ from the images he's linked. There's a left-to-right versus top-to-bottom color issue, and presence/absence of a stripe. Presumably, Brands of the World had a legit source for the SVG, but the link I checked was not archived. Glrx (talk) 21:17, 1 October 2018 (UTC)

@Redrose64:, @Glrx: Correct, they are from UEFA.com history section. Should I change (if so, teach me how to do so) or not? – Flix11 (talk) 15:28, 5 October 2018 (UTC)

@Flix11:, if you can install and run en:Inkscape, http://inkscape.org/en/doc/tutorials/tracing/tutorial-tracing.html has a tutorial on converting a bitmap to an SVG. Cheers, cmɢʟee⎆τaʟκ 20:39, 6 October 2018 (UTC)

Maldivian Cinema svg file

 Done

I tried to create a file for Maldivian Cinema using;

• Mplayer_blank.svg
• Flag_of-Maldives.svg

but since I am not familiar with creating svg files, I request for help from fellow members.

Samples of how such images look like can be seen in Cinema of Pakistan and Bollywood. ShappeAli (talk) 14:47, 5 October 2018 (UTC)

Hi ShappeAli,

I've uploaded File:Clapperboard_Maldives.svg as requested and added instructions in the SVG to create other similar icons:

    Replace the lines between the first "->" and "<!-" below with
    lines between <svg ... height="..."> and </svg> in the flag SVG
    file. You may need to change the numbers in the above scale(...)
    denoting horizontal and vertical scale, so that the flag fits.

Cheers,
cmɢʟee⎆τaʟκ 20:35, 6 October 2018 (UTC)

Thank you so much! ShappeAli (talk) 04:12, 7 October 2018 (UTC)

[librsvgbug] RadialGradients incorrectly rendered in thumbnail

Bubbles are broken

• 
  Bubbles are broken

After updating File:USGS_magnitude_8_earthquakes_since_1900.svg, I found that most circles with radial gradient are flat-shaded.

Curiously, those in the legend are OK. It seems as if the first stop is ignored, as the fill retains the 0.5 opacity. Any ideas why?

Thanks,
cmɢʟee⎆τaʟκ 19:58, 6 October 2018 (UTC)

@Cmglee: since it works on Commons:Commons_SVG_Checker. Therefore testing needs new uploads. Hence it might be difficult to find the issue. Anyway now it should be repaired now.  Done JoKalliauer (talk) 22:06, 6 October 2018 (UTC)

Thank you very much, JoKalliauer. Could you briefly describe what you did to fix it, and if possible, what you think the problem was? Thanks, cmɢʟee⎆τaʟκ 23:02, 6 October 2018 (UTC)

To be honest, I started scripts without thinking: https://github.com/JoKalliauer/cleanupSVG Which uses 1)Scour, 2)https://github.com/RazrFalcon/svgcleaner 3)https://github.com/svg/svgo 4)Inkscape (--verb=SelectionUnGroup) 5)a self-written-script that repairs librsvgbugs

To be honest, I didn't expect it to work, since this bug seems not to be familiar to me.

I will take a look at it and upload it to File:Test.svg.

 — Johannes Kalliauer - contrib. 07:00, 7 October 2018 (UTC)

@Cmglee: I ungrouped it in Inkscape.  — Johannes Kalliauer - contrib. 08:10, 7 October 2018 (UTC)

Thanks, Johannes Kalliauer. I'll check it again next time I update the diagram. cmɢʟee⎆τaʟκ 17:18, 7 October 2018 (UTC)

Cardiff_City_crest.svg

Can somebody please look at the Ribbon on this logo ? It's displaying as transparent when it should be white.

File:Cardiff_City_crest.svg TheBigJagielka (talk) 13:24, 12 October 2018 (UTC)

It seems to be white; when I display it against a dark-coloured background, the background does not show through. --Redrose64 🌹 (talk) 14:36, 12 October 2018 (UTC)

I also can not replicate the issue. @TheBigJagielka:, are you still seeing the transparency? If so, more information about what you are looking at the file with would be helpful. --AntiCompositeNumber (talk) 14:59, 12 October 2018 (UTC)

Apologies, I've been an idiot. The cached image in my browser was still displaying. TheBigJagielka (talk) 19:51, 12 October 2018 (UTC)

[librsvgbug] Fonts are affected when size of images is decreased

phab:T36947

• 
• 
• 

I am finding whenever these images (File:Map of the Luxembourg general election, 2018.svg, File:2017 Queensland state election map.svg , File:Regional Composition of the Italian Council of Ministers (Conte Cabinet).svg) I have created in inkscape are rendered at other resolutions the text bugs out and either words join up or space out creating illegible text. JDuggan101 (talk • contribs) 18:04, 18 October 2018 (UTC)

@JDuggan101: Don't use font-family:Arial; - in fact, never use a single font family unless that be one of the generic ones like font-family:sans-serif;. Better would be a list like font-family:Arial, sans-serif;. More later (when I'm home from work). --Redrose64 🌹 (talk) 07:50, 19 October 2018 (UTC)

AFAIC on Wikimedia Arial automatically fallbacks to Liberation Sans with practically identical font metrics, so this is a very minor issue without specifying any fallback font manually. Answering your question, the incorrect text positiong is a long-lingering known issue with the SVG-PNG rasterizer, librsvg and there is currently no perfect solution. Personally I would recommend exporting and uploading a separate PDF version by RSVG-Convert which guarantees accurate text rasterization. Admittedly this isn’t a standard practice on Wikimedia, not to mention the weird color darkening issue of Wikimedia’s PDF rasterizer, which seems to have something to do with gamma-linear color space conversion. ---- Sameboat - 同舟 (talk · contri.) 11:28, 19 October 2018 (UTC)

@Redrose64:Sameboat - 同舟 is right Arial fallbacks to "Liberation Sans", as described on c:Help:SVG#fallback. Actually it is a outdated librsvgbug: phab:T36947, and got corrected in the updated version of librsvg. This problem is visualicied in File:Fonttest-Kerning.svg and can be corrected by using just font-sizes above 25.

 — Johannes Kalliauer - contrib. 11:43, 19 October 2018 (UTC)

By “fixed” it should mean no modification to the current SVG is needed in order to see the intended result. The current situation is that the larger font-size you use, the more precise down-scaling rasterization. This workaround is unfortunately not always practical. For much more complex SVG diagrams like this, all text position coordinates have to be revised. It is very time-consuming to be done manually even just by multiplying 10. ---- Sameboat - 同舟 (talk · contri.) 11:55, 19 October 2018 (UTC)

Thank you for all your help, I was able to fix the text by using the object to path / stroke to path. Also, thank you for telling me not to use arial for my fonts I will take that advice with other creations I make. JDuggan101 (talk • contribs) 19:02, 19 October 2018 (UTC)

No... Converting text to path shape is exactly what we recommend against. ---- Sameboat - 同舟 (talk · contri.) 23:49, 19 October 2018 (UTC)

@Sameboat: "fixed" means you have to update librsvg (not the file)

Since Wikimedia uses an outdaten librsvg-version meanwhile we can use a workaround, and I don't see a problem in editing such files; I edited this bug more than 1000times under the User:JoKalliauer2. I remember one file was a Raleway-system: File:Sheffield_Area_1950.svg, so simmilar to the metrosystem you showed.

PS: And I would not edit such files manually, because in more complex cases you can't just multiply by 10 (if there are several complex transforms). (Due to flie-size efficiency/simplification I also upscaled all paths).

 — Johannes Kalliauer - contrib. 09:27, 20 October 2018 (UTC)

[librsvgbug] Request for help, SVG graphics Renewable Energy to car use

phab:T36947

• 
  English
• 
  Deutsch

For File:Well_to_Wheels_(kWh)_-_Dual_Language_En+De_Original.svg I fail to cleanup an imported (CC BY licensed) graphics with the help of inkscape. Text is irregular, overlapping, unlike in the original. Can you help? After your cleanup I would like to split it into a German and an English version --Gregor Hagedorn (talk) 21:00, 21 October 2018 (UTC)

 Request taken by  — Johannes Kalliauer - contrib. 06:35, 22 October 2018 (UTC). tomorrow after work (phab:T36947) — Johannes Kalliauer - contrib. 06:35, 22 October 2018 (UTC)

@Gregor Hagedorn: The file still has some problems you might be able to resolve on your own:

• the fonts are too small (I cannot read it in an reasonable size), and there is too much text for a picture, maybe font-size="400" might be a good choise for this picture
• both language-versions are not alligned very well (f.e "energy content" and "energy loss" should be aligned with the dots (they are too low, and in the german version too high)

If you want to edit the file in Inkscape:

• For the englisch version I open the file in any texteditor and rename systemLanguage="en" to anything else, like MyLanguages="en", after saving it again in Inkscape (save it as an Inkscape-SVG) rename it back in any texteditor.
• Fot the german version do the same with systemLanguage="de"

 — Johannes Kalliauer - contrib. 15:35, 24 October 2018 (UTC)

(librsvgbug) Getting thumbnails to appear right

phab:T36947

Hello, I just created a vector image for the first time in my life: it was a satisfying experience, but now that I actually want to use it I'm having issues. :P The image in question is File:stroop-taak.svg. On the page itself it looks fine, although different from how it looks in the editor, probably because of Wikipedia using a different font. However, when I try to place this image in a page using [[File:Stroop-taak.svg|thumb|300px]] the letters get extremely bad kerning. This is probably a trivial issue, but as I'm completely new to this, I don't know what to do! Hopefully you do. ;) 607 (talk) 19:16, 27 October 2018 (UTC)

We get so many questions like this that we should probably make it a FAQ. --Redrose64 🌹 (talk) 22:47, 27 October 2018 (UTC)

@Redrose64: This bug is on Wikimedia at least here since July 2016 (this is before I was active), and since this librsvg-bug is fixed, we just have too wait for the next update on the Wikimedia-servers. In the German wikipedia there is a explantation: w:de:Wikipedia:Probleme_mit_SVGs#Die_Abstände_von_Buchstaben_stimmen_nicht.  — Johannes Kalliauer - contrib. 07:33, 28 October 2018 (UTC)

@607 wikipedia: please use font-sizes above 20px, see phab:T36947 for details.

There's a lot of text on that page, but I didn't know what to look for, beyond 'font-size', and I didn't understand what was mentioned about that. Could you give an example of what I should put, or another page which had the same issue but fixed it? 607 (talk) 08:28, 28 October 2018 (UTC)

@607 wikipedia:You just have to use font-sizes above 20px, you are using: font-size:8.46666622px;: Therfore just use 10times larger fonts and you are on the save side. Just scroll upwards and look at the last two requests: #[librsvgbug]_Fonts_are_affected_when_size_of_images_is_decreased or #[librsvgbug]_Request_for_help,_SVG_graphics_Renewable_Energy_to_car_use

 — Johannes Kalliauer - contrib. 10:30, 28 October 2018 (UTC)

Ah, you mean change the font sizes in the SVG file itself? I thought you were talking about a tag on Wikipedia, because of the <pre> tag used. 607 (talk) 10:49, 28 October 2018 (UTC)

After I finished scaling up the entire image in Inkscape, I saw that you actually uploaded a new version of the image... which is not much bigger than the other images, but it does look good. I guess I don't need to upload mine, then. Something else I remarked is your version being much smaller in terms of bytes. Well... thanks! — Preceding unsigned comment added by 607 wikipedia (talk • contribs) 11:38, 28 October 2018 (UTC)

actually I upscaled all fonts by a factor of 100. The change of the dimensions is just a convertion-mistake you used: width="160.53mm" height="169.34mm", which is according to Wikimedia equal to width="569" height="600", but common browser convert it equal to width="606.73" height="640.03". That kind of upscaling was unintentionally.  — Johannes Kalliauer - contrib. 13:02, 28 October 2018 (UTC)

1938 Palestinian flag

Hello, I request someone to upload a Palestinian flag with a cross and crescent from this site [2]. The flag will be used in articles like 1936–1939 Arab revolt in Palestine and Flag of Palestine.--Sakiv (talk) 01:01, 28 October 2018 (UTC)

@Sakiv: This should be below the c:Commons:Threshold_of_originality, therfore you can download this flag and upload it to c:Commons:Hochladen.  — Johannes Kalliauer - contrib. 07:41, 28 October 2018 (UTC)

@JoKalliauer: I want it to be in svg format.--Sakiv (talk) 17:52, 28 October 2018 (UTC)

Trouble downloading/opening SVG files

I am currently trying to open svg files provided on a website. When I try to extract then open the files in say, Cricut Design Space, they will not open because it does not recognize the file, because it is a weblink instead of a file after extracting the files. This is what the link looks like, file:///C:/Users/MCFSR/Desktop/CRICUT/SnowflakeTrees_Template.svg. Cricut Design Space does not recognize this svg file format. Apparently it is being opened/saved as a Chrome HTML document (I looked at the file properties) and I do not want it to do that. If anyone has any ideas as to how I can change that, I would greatly appreciate it.Meemoo752 (talk) 19:17, 20 November 2018 (UTC)meemoo752

@Meemoo752: That is a URL. To convert that into a path on your machine, remove the "file:///" prefix. Depending upon the program or application that you're trying to open it in, you may also need to change all the slashes to backslashes: C:\Users\MCFSR\Desktop\CRICUT\SnowflakeTrees_Template.svg --Redrose64 🌹 (talk) 22:23, 20 November 2018 (UTC)

Thank you so much! — Preceding unsigned comment added by Meemoo752 (talk • contribs) 13:44, 21 November 2018 (UTC)

Can you tell me how I would go about converting it into a path on my machine? I removed the "file:///" prefix, but it keeps reverting back to the weblink. I also tried setting the forward slashes from forward to backward. Should I take the changed path and paste it into the program I am trying to use? — Preceding unsigned comment added by Meemoo752 (talk • contribs) 16:03, 21 November 2018 (UTC)

Don't do it in the browser's address bar. You need to be in the "Open ..." dialog box of Cricut Design Space. --Redrose64 🌹 (talk) 23:21, 21 November 2018 (UTC)

Does Wikipedia support Style Sheets in SVG files?

• 
  file with problematic CSS
• 
  Test of librsvg-Render according this problem

Moved from WT:SVG help

 – AntiCompositeNumber (talk) 22:48, 13 December 2018 (UTC)

An SVG file uploaded to Wikimedia did not render correctly. It contained style sheets, and it was rendered as if they were not present. A new version of the file, with the styles moved to attributes and the style sheets removed, did render correctly. Are style sheets not supported? (SVG's with style sheets can be used in the <image> tag in any browser.) File:Slitherlink_Shading.svg — Preceding unsigned comment added by Axenicely (talk • contribs) 21:28, 13 December 2018 (UTC)

@Axenicely: The file you created is invalid, see https://validator.w3.org/check?uri=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Farchive%2Ff%2Ff3%2F20181213003103!Slitherlink_Shading.svg&doctype=SVG+1.1 for details. Not even Inkscape can view the file correclty, so thats a bug in your file, not in the viewer.  — Johannes Kalliauer - contrib. 23:01, 13 December 2018 (UTC)

@Axenicely: Remember that SVG files are not displayed directly by the MediaWiki software, they're converted to a .PNG file which is what gets served to your browser. The conversion is carried out by librsvg, which does not recognise the latest versions of either SVG or CSS, nor does it permit non-standard coding such as browser extensions. Some things to try.

1. remove the id="numbers0" attribute from the first <defs>...</defs> element
2. consolidate the three <defs>...</defs> elements into a single one
3. move the <style>...</style> elements from the bottom of the file to the top, inside the <defs>...</defs> element
4. consolidate the two <style>...</style> elements into a single one
5. make sure that your style sheets do not contain any browser-specific properties such as -webkit-user-select:

If all that fails, ensure that the CSS contains nothing that isn't explicitly permitted by the CSS 2.1 specification, and that the SVG contains nothing that isn't explicitly permitted by the SVG 1.1 specification. --Redrose64 🌹 (talk) 12:59, 14 December 2018 (UTC)

@Redrose64: Redrose, thanks to you and JoKalliauer for your replies. The validator was complaining about data- attributes, which aren't supported in SVG 1.1, so I replaced them, and the file validated (no errors). But it still didn't render correctly in the Media Viewer or as a thumbnail. So, I tried three more versions, the last of which incorporates all the changes you suggested. Same result. All four of these new versions validated as SVG 1.1, no errors (https://validator.w3.org/check?uri=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Farchive%2Ff%2Ff3%2F20181214213932%2521Slitherlink_Shading.svg). So at this point I can't imagine what can be wrong with my file. It's valid SVG 1.1. I've uploaded 8 versions, and the only one that works is the one that contains no style sheets. When I have the time, I'll isolate that variable with a simpler file (though I'm hesitant to experiment in a public space, I hope it's ok.)

Yes, Wikimedia's librsvg supports style with some limitations. It appears that one of those limitations is [attribute="value"] selectors do not work. Glrx (talk) 21:50, 14 December 2018 (UTC)

@Glrx: The file you uploaded doesn't use attribute selectors; it's using class selectors only. But moving the style sheet to the top made a difference: it is converted correctly by this converter, whereas none of mine are except for the one without style sheets. Thanks. -- axenicely 22:13, 14 December 2018 (UTC)

[attribute="value"] selectors should work, since they have been part of the CSS 2 spec right from the start, although they were not part of CSS 1 (which permitted only the most basic of selectors - element, class and id). --Redrose64 🌹 (talk) 23:56, 14 December 2018 (UTC)

@Redrose64: Actually, I did try using attribute selectors before switching to class. See version of 21:23, 14 December 2018. I did not try [attribute=value] (no quotation marks). There are some places in librsvg where quotation marks confuse its parser, so dropping quotation marks might work. Given comments at Gnome librsvg issues, I didn't bother. Glrx (talk) 03:25, 15 December 2018 (UTC)

@Redrose64: We never actually tested attribute selectors without the data- attributes. So... I just uploaded an extremely simple svg file, File:LibrsrvTest.svg, which initially contained nothing but a <rect> and <style> elements, and did that test with the 'id' attribute, and it failed. (If successful, a green rectangle will be displayed.) I hope to use that simple file to get to the bottom of this, but so far I can't get anything to work. -- axenicely 01:58, 15 December 2018 (UTC)

@Axenicely: All four versions of that test image lack one essential thing - the <style>...</style> element must have the attribute type="text/css", as described at the top of this page. --Redrose64 🌹 (talk) 12:39, 15 December 2018 (UTC)

OK, it seems that librsvg only respects id and class selectors that are in accordance with the CSS 1 specification (which were superseded by the CSS 2.0 specification twenty years ago). It also does not recognise the universal selector * That is, the following selectors are valid: #r, rect#r, .c, rect.c whereas the following selectors are not valid: [id="r"], *[id="r"], *#r, rect[id="r"], [class="c"], *[class="c"], *.c, rect[class="c"]. --Redrose64 🌹 (talk) 13:33, 15 December 2018 (UTC)

@Glrx: (Post from 21:50, 14 December 2018 (UTC)):

You said that the file was valid:

• accoring nu.validator correct: https://validator.w3.org/check?uri=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Farchive%2Ff%2Ff3%2F20181214213932%2521Slitherlink_Shading.svg
• according W3C-SVG1.1-DTD not: https://validator.w3.org/check?uri=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Farchive%2Ff%2Ff3%2F20181214213932%2521Slitherlink_Shading.svg&doctype=SVG+1.1
  • there is no attribute "data-shade"

 — Johannes Kalliauer - contrib. 19:28, 15 December 2018 (UTC)

@JoKalliauer: Nothing was invalid in any of the versions except for the data- attributes. After they were removed, librsvg still failed to render many valid files correctly. -- axenicely

@JoKalliauer: I did not say the version would validate. I said librsvg did not do attribute selection for that version of the SVG file. Furthermore, the presence of additional attributes does not make an SVG file invalid in the sense that the file will not render. One point of XML was to allow extensions. The W3 validator is overly strict; sometimes they will allow additional attributes. The presence of additional, well known, non-SVG, attributes such as data-* or aria-* should not cause any alarm. Glrx (talk) 20:52, 15 December 2018 (UTC)

@Glrx: I only know aria-label and data-name, I did not know data-shade.

Checking Glrx file (Aswell the original one) with c:Commons:Commons SVG Checker returns following error:

• ERROR in <path>: Trailing space found in attribute transform It may not be rendered properly by Wikimedia's SVG renderer under certain conditions. See https://bugzilla.gnome.org/show_bug.cgi?id=645201 for details.

Is this bug outdated, since the file seems to work fine?

@Axenicely: If you (Axenicely) delete data-shade the file can't work any more since <style>#shades *[data-shade="-1"] { fill: #f8f000; } #shades *[data-shade="2"], #shades *[data-shade="-2"] { fill: #ffa5d2; }</style> defines the colour according to data-shade. Therefore I would replaced this attribute (f.e. with class="shadem2" as Glrx did).

For those who are interessted:

What is needed to change (from the first version):

1. <style type="text/css"> need to be a the beginning
2. <style type="text/css"> needs to have type="text/css", see phab:T68672
3. [class="c"] needs to be replaced by .c, see File:LibrsrvTest.svg (version of 13:00, 15. Dez. 2018) and post above from User:Redrose64

What can be keept:

1. two <style> does not seem to make a problem (Also I would not recommend it)

 — Johannes Kalliauer - contrib. 21:22, 15 December 2018 (UTC)

I tested Redrose64's five rules (above), using the LibrsrvTest.svg test file (sorry for the bad name), and it seems that the only one that's necessary is that <style> elements be at the top of the file - presumably before the first graphical object (that is not inside a <defs> element). The <style> elements can appear after <defs> elements. They do not have to be children of <defs> elements. There can be more than one <style> element. A <style> element can contain browser-specific properties. There can be more than one <defs> element, and they can have id attributes. As Redrose has noted, it is necessary that the <style> elements have a type attribute set to "text/css". -- axenicely 21:41, 15 December 2018 (UTC)

Regarding data-shade= and similar attributes: HTML 5 introduced the concept of custom data attributes; these are not part of the latest recommended SVG spec (SVG 1.1), but they are included in the drafts for SVG 2. --Redrose64 🌹 (talk) 00:06, 16 December 2018 (UTC)

I did some testing with the first three svg-to-png converters that turned up in a google search. All three failed with the <style> element at the bottom! The first two converted successfully with data- elements, the third failed. <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"><style type="text/css">[data-on="1"]{fill:green;}</style><rect data-on="1" x="0" y="0" width="100%" height="100%"/></svg> -- axenicely 01:20, 16 December 2018 (UTC)