Help talk:SVG

From Wikimedia Commons, the free media repository
Jump to: navigation, search
Emblem-important.svg Please remember that this talk page is not for questions about SVG.
It is intended for discussing improvements to the Help:SVG page.

Information icon.svg The best place for questions and discussion about SVG is the
Graphics village pump

Replacement filing cabinet.svg 2007…2009

Multiple Language SVG[edit]


I made a SVG-file with support for multiple languages, so it can easily be translated and used in other languages IN ONE FILE. With the code:

 <text y="20" systemLanguage="de">vor</text>
 <text y="20" systemLanguage="fr">avant</text>
 <text y="20">before</text>

every language can be added and depending on the language setting of a SVG-supporting browser you'll have the image in your language. ([Example]) Unfortunatly, by the conversion of SVG to PNG the chosen language is always english. Will there be a possibility to include real multi-language-SVGs in WikiCommon? --Ffsepp (talk) 15:36, 8 September 2008 (UTC)

That's a good question. The text without the systemLanguage attribute, English in this case, is considered the fallback measure when the language of the software program cannot be determine. A PNG converter probably doesn't have a language key so this is why the switch element uses the English text, in your example, as the default text. Wgabrie (talk) 21:17, 8 September 2008 (UTC)
Yeah, the behaviour is right, but especially for a page like commons the multi-language-feature is great. Are there any plans to remove the converter since every browser exept IE is now supporting natively SVG? --Ffsepp (talk) 22:05, 8 September 2008 (UTC)
It would be nice, but probably no (or at least, not yet). Many SVGs run into megabytes compared to bitmaps which probably would be smaller. Spadeparty (talk) 06:14, 6 November 2008 (UTC)
Are there any news for this? Is Commons supporting this feature now? That would be really great!!! --Perhelion (talk) 11:01, 13 May 2010 (UTC)
I looking forward for this feature. It would be very easy to implement. It is possible to use "uselang" URL parameter to make things happen. But will they? BPK (talk) 01:15, 8 August 2011 (UTC)
If size matters, the server may compare and send the smaller one (which in case my svg files is the svg ;-)
There may be an opt-in mechanism for registered users. – Rainald62 (talk) 16:08, 9 October 2011 (UTC)
This is supported now. (Thanks to user:Jarry1250). You can now use syntax like [[file:Foo.svg|lang=de]] Bawolff (talk) 03:12, 11 November 2013 (UTC)

Vector magic no longer free[edit]

The help page says that Vector magic is free, but it is no longer so. If an editor here is using this tool anyway, an explanation of the charges would be helpful. Apparently, they do offer a few free conversions to allow potential customers a chance to try their service.

The link above doesn't seem to work. Was found here:
Perhaps they can't be bothered to provide a redirect page to their for-profit product.
May be fine print elsewhere; the home page says:
Free to try, no signup necessary, and results ready right away.
Is a link to this site linkspam if they are truly providing what appears to be this free service?
-Wmc824 (talk) 15:11, 30 January 2011 (UTC)

Undesirable Restrictions[edit]

The section Help:SVG#Creating_SVG_images_for_Wikimedia_Commons makes a generalization that Help:SVG#Bitmaps are a bad thing, inserting the opinions of a third party who is neither the image's author nor it's consumer. Should all of mankind's uses of imagery be restricted to those uses that have been witnessed and understood by a group of programmers? Some examples of svgs with bitmaps:

  1. map of Arid Badlands includes the reference image from which it is vectorized. In this capacity, the bitmap provides a measurement of accuracy, and a way for the consumer of the image to visually verify/validate the information presented.
  2. A vector graphic of the constellations, with bitmap renderings of the stars.
  3. A map of teeth in a mouth, with x-rays for each tooth.
  4. It might also be possible to use a self-contained bitmap as a thumbnail in future versions of the SVG interpreters.

AngleWyrm (talk) 16:48, 4 December 2009 (UTC)

Agreed that there are valuable uses, though I’d caution that it can easily be misused or done from expedience rather than because a bitmap is actually useful or necessary. I’ve re-written it more even-handedly in this revision.
—Nils von Barth (nbarth) (talk) 05:40, 23 June 2010 (UTC)

How SVGs work in MediaWiki[edit]

In this section there is a broken link to rsvg-view. Also, it says "If you want the SVG file you must save the link to the image instead of the image itself." But how do you do this?--RockMagnetist (talk) 14:11, 5 October 2010 (UTC)

I have added "by right mouse clicking on the link under the image". For example File:Example.svg‎ has the line "Example.svg‎ (SVG file, nominally 600 × 600 pixels, file size: 10 KB)". You would right-mouse click the blue "Example.svg‎" link. -84user (talk) 17:03, 5 October 2010 (UTC)
Oh - I misunderstood the statement. I thought it was telling me how to access the SVG file from a Wikipedia article. I would like to do that because the PNG conversions are terrible.--RockMagnetist (talk) 17:40, 5 October 2010 (UTC)
I could not find a way to do this using the existing gadgets in Wikipedia:Special:Preferences. You would need to create a link using the Media:namespace to "link directly to a file". I made a quick example at Wikipedia:Extended image syntax#Link. -84user (talk) 18:21, 5 October 2010 (UTC)
MediaWiki talk:Stockphoto.js is now tracking feature requests for the recently installed Share this feature, and it has "Version for Wikipedias to show on transcluded pages" which *might* give what what you are asking for, if transcluded is extended to include thumnbnails. -84user (talk) 18:49, 5 October 2010 (UTC)
I tried using your syntax (and some variations from Wikipedia:Images linking to articles) and I don't get a direct link to the SVG image. One difference I see between my media page and yours is that I have an explicit link to the SVG and you don't. I would really appreciate it if you would look at my link to Media:SingleDomainMagneticCharges.svg in Wikipedia:Demagnetizing field and show me how to fix it.--RockMagnetist (talk) 18:56, 5 October 2010 (UTC)
My placing of the example in the "link=" section was misleading: Media:Example.svg does not gives a direct link when used after "link=", only when used in plaintext so to speak. I tried a clunky workaround using imagemap to create a direct link to the SVG file in Wikipedia:en:Demagnetizing field#Single domain but this link will not update when a new version is uploaded.
I do not think Mediawiki has a way to force the link= to be a direct URL to a media file like this (even hard-coding the full url fails). But are you also asking for the wikimedia server to send your browser the actual SVG file so that the browser performs the rendering? That desirable feature has been requested in long-standing bug 3593, linked from Wikipedia:Wikipedia:Village pump (technical)/Archive 36#Serving SVG images themselves instead of rasterizations. One possibility is some javascript such as prototyped by User:TheDJ in 2008 being added to wikipedia's Monobook.js. Try asking at Wikipedia:Wikipedia:Village pump (technical). -84user (talk) 00:19, 6 October 2010 (UTC)
Thank you for your help, 84user. This all sounds so tricky! Would I be better off uploading PNG files? I have made scores of images for peer-reviewed publications and I have never had so much trouble getting them to look good. Usually I create PDF files.--RockMagnetist (talk) 01:46, 6 October 2010 (UTC)

This section could also have some explanation of the dimensions of the PNG images. For example, File:CategoricalProduct0x0Test0.svg has the sentence "This image rendered as PNG in other sizes: 200px, 500px, 1000px, 2000px." More correctly it should be "other widths" rather than "other sizes". Where do these widths originate? Why not 100 px wide also? Are all SVGs rendered to these widths? Regards, ... PeterEasthope (talk) 17:37, 10 October 2012 (UTC)

SVG software tagging[edit]

When is it appropriate to use those tags? Is it ever appropriate to specify what software was used? I think not! Many files are only converted. The same is, if someone makes a (minor tweak) editing tweak with other software? -- πϵρήλιο 01:15, 3 August 2011 (UTC)

I never use them. The only tag of real importance is valid SVG. I agree it should only be used if it is either vectorized or created from the ground up. -- RE rillke questions? 09:48, 3 August 2011 (UTC)

"upcoming SVG 1.2 standard"[edit]

It's not "upcoming" any more -- "SVG 1.2 Tiny" has now been changed to be completely independent from "SVG 1.2 Full", while "SVG 1.2 Full" itself was never officially adopted (and the current working draft hasn't been updated for over seven years), and the next official standard will apparently be called SVG 2.0... AnonMoos (talk) 16:36, 4 July 2012 (UTC)

Scrubbed with[edit]

Isn't it worth while to establish a template and a hidden category for these optimized files? --Maxxl2 (talk) 19:12, 15 September 2012 (UTC)

I really think not. I see really no reason, for example in contrast to Category:SVG Simplified!? -- πϵρήλιο 23:00, 15 September 2012 (UTC)
There is a difference. The intro of Category:SVG Simplified says: This category is intended to show examples of manually drawn SVG graphics .... Isn't that reason enough to form a new category? --Maxxl2 (talk) 11:05, 16 September 2012 (UTC)
Symbol oppose vote.svg Oppose Yes for sure, I know that there is a difference, the difference is that this category is usefully. Can you please more characterize this reason!? I still can not see them. There is no comparable category "automatically saved/optimized ... graphics" ... Thats like a job for a bot, so this is like a hidden bot category!? Anyway if we assume only hypothetically, that there is this category who will all inspect and maintain? And in general I've always automatically saved with Scour. So I would have to categorize all my SVG files afterwards? And alone, what are the real reasons to optimize with Scour? Also then this category should have another pointless template for all this SVG. -- πϵρήλιο 13:53, 16 September 2012 (UTC)
Thanks a lot for the enlightment. I've learned from your experience and explainations today. Yes, you are right, it was just an idea to be discussed and that is sufficiently done by now. --Maxxl2 (talk) 12:08, 17 September 2012 (UTC)

new rsvg[edit]

This should purge a lot of thumbnails and we now have a new rsvg on one imagescaler out of seven (?), so please give a look to Category:Pictures showing a librsvg bug to see if there are more/less/new errors. --Nemo 06:15, 11 October 2012 (UTC)

Not all layers renders, Inkscape[edit]

I have a pretty complicated image download here that has some problems. When I try it in the tool for check rendering in wikimedia it doesn't render all my layers. It's the same with the thumbnail in a folder when I view it as icon (ubuntu 12.04). I have tried to find out which layers that is the problem but they all work one by one but not together. I "think" the problem could be in some of those layers; 8, 1 from left,right top side, text 14pt lines, number 26pt lines but I'm really not sure. I have used Path/Union, Difference and so on (read that this could be a problem) and there are gradients, maybe 20 or so.
Path/Union, Difference and so on and gradients have I used in most of the stuff I have made here so I can't really understand this.
I have tried to save it as Plain svg, less layers and a other things but nothing helps.
If anyone have any idea of what to do or look for I would be very very thankful. --Goran tek-en (talk) 13:50, 27 February 2014 (UTC)

✓ Done I found the problem after some deep search. --Goran tek-en (talk) 17:00, 2 March 2014 (UTC)
Hello Goran tek-en, can you please tell more!? Thank you -- Perhelion (talk) 21:06, 2 March 2014 (UTC)
It will be some of a story. I run ubuntu 12.04 so from my understanding this uses the same lib as wikimedia does for rendering svg to bitmap.
  • I started of with an empty Inkscape document with EXACT (I had to adjust it in the code (opened as text)) the same page size as the one with the problem.
  • Then I had both documents open and a window with the folder containing the two documents viewed as icons.
  • I then copied one layer at the time from the document with the problem pasted it into place in the new document and saved a copy into that same folder and looked at the icon. If the icon rendered OK then I had no problem in that layer.
  • I then added layer by layer and when saving a copy making sure all of the added layers was visible so I could see if it rendered well. When I found a layer with problem I removed "half of that layers drawing" and saved a copy. Did it save OK I knew the problem was in the half removed (or the other way around) and I then had to remove half of that and so on until I found the path or what was the problem.
  • So it was basically a slow tidies work to break down each layer into parts to be able to find the piece that was the problem. If you don't run ubuntu you can use this tool svg check because it does exactly the same thing when it comes to rendering.
I'm not sure if I made myself clear on how I did it but if not just ask what and I will try to explain in some other way. --Goran tek-en (talk) 22:50, 2 March 2014 (UTC)

Onmouseover effects - script?[edit]

I recently tried to upload an SVG, which was blocked by a warning that it contained code or scripts which might not be displayed property with all browsers. It looked like a warning but acted as an absolute block.

I know that scripts are not permitted in images. Using Inkscape I added to an SVG image an action "onmouseover", which comes out in the XML code for the object as:

onmouseover="" onmouseout=""

I was not aware it would be deemed a script, if indeed it is. Is it?

Mouseover effects can be an effective way to display information. They can be misused: it would be possible to hide a pornographic image beneath an innocent scene, to be revealed when the mouse passes over, and this would not necessarily be spotted by those who vet new uploads. (I was just getting areas of a map to light up.)

Does this mouseover effect count as a blocked script?

Hogweard (talk) 20:21, 1 April 2014 (UTC)

Yes, this is an interactive event handler, although the same can be resolved in HTML also by employing CSS only. For putting information up you can use the Help:Gadget-ImageAnnotator. -- Perhelion (talk) 13:26, 11 April 2014 (UTC)

#Cleaning up SVG-files to W3C-valid[edit]

Cross-link: I completely disagree with most, see → User_talk:Wereldburger758 -- Perhelion (talk) 13:10, 11 April 2014 (UTC)

I've requested Help:SVG/basic3 for deletion. User: Perhelion (Commons: = crap?)  14:37, 5 July 2015 (UTC)

Further categorization clarification[edit]

Since the SVG categories do not seem to be going away - I suggest expanding on the documentation on categories a bit more. There does not seem to be much consistency and confusion remaining over how overcat'ing applies. Right now this page suggests files should not be solely in SVG categories, but does not really clarify beyond that. Does the overcat wording apply only to the SVG categories themselves or does it apply to SVG categories and non-SVG categories overlapping? Also, the SVG categories mentioned as examples are hidden categories, but that is not consistent. My understanding is that the hidden category usage applies well here and that similar to over hidden categories are not factored into overcat consideration with non-hidden categories. Thoughts? --Varnent (talk)(COI) 04:51, 6 August 2014 (UTC)


@AnonMoos:, IMHO you're right, ordinary quotes will do, but @Perhelion: simply adopted the style already in use for “vacuum” etc. At the moment it's a messy mixture. –Be..anyone (talk) 05:44, 1 November 2014 (UTC)

I would doubt that there's an official Commons policy on the matter, but en:WP:MOS tends to discourage the use of smartquotes. I'll look over the page... AnonMoos (talk) 12:54, 1 November 2014 (UTC)
@AnonMoos, Be..anyone: I admit I was not aware of this recommendation on the enWP. Anyway it is a bit illogical to remove the real(? curly – smartquotes) quotation mark. There is also no source, substantiation or any piece of evidence for this recommendation.
But here in the Edittools are also only the “real” quotation marks, so we can clear say the enWP recommendation has not really validity here!? User: Perhelion (Commons: = crap?) 12:22, 1 December 2014 (UTC)
The rationale could be, that technical texts should stick to ASCII or Latin-1 if that makes sense (in a context using other Unicode points anyway that wouldn't be the case.) The WP:MOS guideline offers other reasons. This could be obsolete, UTF-8 is now widely supported (and even the Windows variant of Latin-1 has those quotes, working for any Latin Windows installation since at least Windows 95). Just ignore me and change everything back if you like that better; as long as it tries to be consistent I'm fine with it. –Be..anyone (talk) 12:43, 1 December 2014 (UTC)

Category:SVG multilingual[edit]

Hi. Should all svg with text be multilingual ? Some svg has a few language versions, like this. I think about templetate : "This is a text svg. It should be converted to multilingual." Is it a good idea ? --Adam majewski (talk) 14:59, 30 November 2014 (UTC)

Hello Adam, good question and short answer no. The category is relatively new, the meaning is not fully elaborated. Any suggestion are welcome. But first:
This cat means SVG with the switch-element like Category:Translation possible - SVG (switch) (not every SVG with other language copy) — so I propose to merge both.
So maybe another suggestion, the template: Translate could get a new parameter to tag SVG language copies to merge!?
Anyway the SVG should be tagged with {{Translate}}. User: Perhelion (Commons: = crap?) 11:59, 1 December 2014 (UTC)

Request for someone to update "Fonts / text" for 2015[edit]

Comparison of Liberation Sans and Arial
Comparison of Liberation Serif and Times

Someone please update "Help:SVG#Fonts_.2F_text" section. I'm a SVG newbie editor, though I've done a lot of English-Wikipedia editing. I'm trying to EASILY understand the EXACT fonts that I need to use in my SVG drawings, including LINKS to download the EXACT fonts that I should be using for Wikipedia. I especially need to know exactly which monospaced font that I should be using. I'm editing with Inkscape on Windows 7. Thanks! • SbmeirowTalk • 14:07, 8 February 2015 (UTC)

This is actually a very complex topic because there is no "correct" answer (because every system is different – Wikipedia is yet another one – and not every solution works equally well on every system). There are some basic rules however that you can stick to:
  • If it's reasonably possible stick to the generic font-families (serif, sans-serif and monospace). Every system picks it's preferred font which fulfills those generic characteristics then, therefore this approach offers the best compatibility. However you have to consider that appearance might change across systems (e.g. font size and letter-spacing might change) and have to design your SVG accordingly (e.g. leave some space around the font and align it correctly, so it doesn't overlap the image when it changes size).
  • If you want a more consistent look take a font that is widely available, (e.g. Liberation is a very good choice).
    It's good practice to define a font stack (that is a list of fall-back fonts which are used in case the specified font is not available). However this is not possible with Inkscape at this time (you would have to hand edit your SVGs in a text editor and replace font specifications like font-family:Liberation Sans; with a font stack that will work well on a multitude of systems, e.g. font-family:Liberation Sans,Arial,sans-serif;).
  • If you don't want to stick with the default fonts and don't care about compatibility with other systems you can use a specific font from the list of installed fonts (the one from you link). There's also a graphical overview of SVG fonts on Meta (which is slightly outdated though).
Hope this helps. Regards, --Patrick87 (talk) 15:02, 8 February 2015 (UTC)
Follow-up question, why Liberation instead of DejaVu fonts? As Windows user I don't want to overload my box with free fonts only because they are free, and IIRC I picked DejaVu precisely for the reasons discussed here. –Be..anyone (talk) 20:28, 11 February 2015 (UTC)
The biggest advantage of the Liberation font family is, that the metrics of all font faces (Sans, Serif and Mono) are equal to a popular equivalent by Microsoft (Arial, Times New Roman and Courier New). This means you can easily switch from Liberation to the Microsoft equivalent (or vice versa) because the size/position of text in the SVG won't change. By specifying fallbacks appropriately (as described above) this already allows for a consistent look on Windows, Linux and on Wikipedia/Commons (which are based on Linux servers). --Patrick87 (talk) 00:41, 12 February 2015 (UTC)
Liberation Serif shares nearly identical metric as Times New Roman. Because modern MacOS[1] and iOS[2] include Times, making Liberation Serif an ideal choice for serif replacement. -- Sameboat - 同舟 (talk · contri.) 09:04, 12 February 2015 (UTC)
This turned out to be rather exciting for a Windows user: RedHat/Fedora apparently offers two versions, 2.00.1 (2013) and 1.07.4 (2014). The latter are w:Liberation_fonts with a GPL license, the former are newer w:Croscore fonts based on Google's Arimo (sans-serif), Tinos (serif) and Cousine (mono) with an Apache license. Apparently there are more glyphs in the 2.00.1 fonts. They have a good download page. –Be..anyone (talk) 20:48, 14 March 2015 (UTC)
I'm surprised that Arimo has slightly more compact vector data than Liberation Sans because when I convert my SVG to PDF, the PDF size is few KB smaller when using Arimo instead of Liberation Sans. I wonder if Wikimedia has these fonts installed on the server. -- Sameboat - 同舟 (talk · contri.) 02:28, 16 March 2015 (UTC)

When to use PNG over SVG?[edit]

The main page featured image today (File:Vatican City map EN.png) has an SVG version available, but it also has a template that reads "SVG version available, but please use PNG files in articles." Can someone explain to me why this is the case? I was under the impression that SVG was always preferable. Certainly the png file is 2.14 MB versus 418 KB for the svg. I'm not trying to argue that the SVG should be displayed instead, just trying to understand. Thanks. - Themightyquill (talk) 07:19, 11 February 2015 (UTC)

Only if superior (or as replacement for render problems, see {{Technically replaced}}) see Commons:Transition to SVG for more. User: Perhelion (Commons: = crap?)  08:36, 11 February 2015 (UTC)
(ec) The SVG version is based on Italian PNG, also it seems that the SVG rendering isn't quite identical to the author's intention. The major culprit is that the map uses "textpath" to render curved text like "Via del Seminario Etiopico" and "Via del Governatorato" so text would bend alongside the designated path. Textpath sadly isn't supported by librsvg, the SVG rendering engine used by Wikimedia, so any text wrapped inside textpath like "Via del Seminario Etiopico" disappears from the SVG render on WM. -- Sameboat - 同舟 (talk · contri.) 09:06, 11 February 2015 (UTC)

Thanks, Sameboat, that makes perfect sense. Would it not be a good idea to have a template to mark SVGs using textpath, and maybe put them in a category? Firstly, it would explain why those SVGs should not be used (in preference for PNGs) on wikipedia. Second, if/when librsvg does begin to support textpath, then those SVGs could be swapped in. Themightyquill (talk) 20:41, 11 February 2015 (UTC)

Killing font dependencies for SVG tiny[edit]

@Sameboat: Your tip sounds plausible, but shouldn't that be also a feature request for librsvg-convert, arriving in some unofficial Windows librsvg-convert.exe   port before 2020? –Be..anyone (talk) 16:49, 8 April 2015 (UTC)

You may make the request there. To me I never really bother converting text to path. That tip is just a recap of the previous discussion in Village Pump. -- Sameboat - 同舟 (talk · contri.) 22:55, 8 April 2015 (UTC)

Text box altered when uploaded[edit]

When the svg is edited locally the text box maintains its size, but when uploaded the text in the box does not maintain its size and just becomes a single line. Thanks. File link — Preceding unsigned comment added by MaryroseB540 (talk • contribs)

librsvg and most browsers do not support SVG v1 text box, not until SVG v2. Rework it without text box please. -- Sameboat - 同舟 (talk · contri.) 14:42, 11 June 2016 (UTC)
Thanks i worked it out. — Preceding unsigned comment added by (talk • contribs)

Linking svg files to data[edit]

Can someone direct me to any conversations / projects on automating the colouring of maps, charts etc on the fly, through linking to a database. For example the recent election map File:2017 UK General Election map.svg could autmatically be coloured in by linking the colours / constituencies to a database. I'm sure that this is done locally, on the user's computer; however, for transparancy, it would be better if it was done on the fly, on wiki. I think it would be very handy when census data is published to automatically generate svg files. Llywelyn2000 (talk) 05:55, 14 June 2017 (UTC)

Generally, no. If the processing is done in the SVG file, then it must be done with a scripting language, and WM does not allow scripts in SVG.
Furthermore, MW does not serve the SVG but rather a PNG derived from the SVG. The program used to paint the PNG does not allow scripting. I believe the program also does not use external CSS files, so coloring districts with external CSS data is off the table, too.
In the case of the UK GE map, it is very piggish at 3.75 MB. It could be unreasonable to serve such a large file. SVG files can be animated (e.g., to show districts over time), but the animations are lost in the served PNG, and browsers are thinking of dropping SMIL animation in favor of script animation.
MW SVG files are limited, and it is probably a good thing that they are right now.
Glrx (talk) 23:30, 16 June 2017 (UTC)

How to download and open an svg[edit]

I could not find an instruction on the help page for how to do this. · · · Peter (Southwood) (talk): 16:39, 27 June 2017 (UTC)

Did you try, on any «File:···.svg», clicking on the large rectangle with the rendered (PNG) image and then using the browser’s menu to save the file? Also, you can enjoy the Media Viewer for this purpose. Incnis Mrsi (talk) 17:05, 27 June 2017 (UTC)
In the file description page, right-click on the image and select "save link as..." to download the source SVG. You can open it in your browser tab to view it in real-time or any text editor to read or edit the XML source code. Today many vector graphics editors can open SVG file natively but be careful of the exported SVG from these applications can often be rendered incorrectly on Wikimedia, c.g. help:Illustrator. -- Sameboat - 同舟 (talk · contri.) 03:57, 28 June 2017 (UTC)
The intention was to edit the file on Inkscape. I found that the only way that I could do it was to open Inkscape, then open the source file in Inkscape, using the url on commons, and then save. I could not find a way to save the svg direct to my drive. This does not seem right. I can view an svg on Firefox, but cannot download it. · · · Peter (Southwood) (talk): 20:23, 28 June 2017 (UTC)
Most browsers (Mozilla Firefox included) offer the [Save Page As] option in the File dialog on any page, being it HTML, SVG, or JPEG. Just save what you currently browse. But some people make up a problem where at least one intuitively evident solution exists, supplemented by many others. Incnis Mrsi (talk) 09:00, 2 July 2017 (UTC)
Perhaps not as intuitively evident as you assume. Cheers, · · · Peter (Southwood) (talk): 19:15, 2 July 2017 (UTC)
What I found particularly counterintuitive is that when I select and open an svg file there is a menu bar across the top. The first item is download, bur when I click on download, I get a dialog box in which there are a couple of urls, an attribution link and several size options for downloading "Download image file: 32px | 64px | 128px | 256px | 512px | Full resolution." I do not expect an svg file to be associated with a size in pixels. All of these options except full resolution specify a size in pixels, and are unsurprisingly png renders. Only the last one does not specify anything except full resolution, which to me, would suggest it is also a bitmap, as there are no variable resolutions in a vector image. At this point I assumed that only bitmap downloads were possible. · · · Peter (Southwood) (talk): 07:51, 10 July 2017 (UTC)
Thanks but no thanks to your edit in the help page. First, many users (including me) have disabled that file page download helper bar. Second, every wiki file description page provides the same way to download the very source of the file by right-clicking on the central image preview. For downloading SVG source, as long as the URL displayed in the bottom browser bar while hovering on the central image preview ends with ".svg" instead of ".png", it's unmistakably the source SVG. I can't let such basic wiki page usage clutter the SVG help page which is for more specific technical instruction. -- Sameboat - 同舟 (talk · contri.) 12:59, 10 July 2017 (UTC)
The instructions were not intended for people who have disabled functionality, they are for people who have difficulty working out how to use the not quite so obvious default setup. I am not going to make a big deal of this, though I do think that the system is not as obvious as some would like to make out, and that either the software or the instruction should be improved. Since I cannot do anything about the software, I did what I could with the instructions. Having a system which is not easy to use reduces the availability of the material on Commons for re-use, defeating the object of the project. · · · Peter (Southwood) (talk): 16:40, 10 July 2017 (UTC)

Error template for SVG files that can't be viewed[edit]

What kind of error template should be used for files that won't display in the browser when viewed directly? For example, Coat of Arms of East Prussia.svg has a PNG preview but when you try to look at the SVG file itself, you get the error "This XML file does not appear to have any style information associated with it. The document tree is shown below." When I try to download it, I get a file that is zero bytes, but I don't know if it just won't download it or if it is actually a blank file that somehow generated a PNG preview during upload. Is {{InvalidSVG}} specific enough? Wikimandia (talk) 03:46, 13 September 2017 (UTC)

Wikimandia I would say the {{InvalidSVG}} and possibly {{Browserwarning}} is the best in this situation. Whether a SVG renders or not regardless if there are errors would be browser specific, so some users may see a problem while others may not. I've confirmed the SVG file does have errors that need to be corrected but I tested viewing the SVG in Chrome (on Windows 10), Firefox (on Windows 10), Internet Explorer and Microsoft Edge and none of them gave that message when viewing the SVG and all appeared to render the SVG correctly for me at least. The SVG file is 6+ MB so it could be that your web browser/computer had problems handling processing that large of a file (large in terms compared to the average sizes of most SVG files) which is why I also suggested adding {{Browserwarning}}. - Offnfopt(talk) 04:07, 13 September 2017 (UTC)
I'm using Chrome on Mac, but it can't be browser specific, especially because I can view larger ones. WikiCommons own SVG checker (Commons:Commons SVG Checker) won't validate it and spits out the same error: File size is: 0 bytes. WARNING: XML declaration not found and is strongly recommended. Successfully parsed XML structure. Not a SVG XML structure. Check finished! Wikimandia (talk) 04:21, 13 September 2017 (UTC)

Fallback fonts[edit]

“WARNING in <g>: Font type Bitstream Vera Sans is not available in Wikimedia software. It will be rendered with minor differences by Wikimedia's SVG renderer. See for details”

I sometimes edit files of others (I am a part of the german Graphics Lab), and I would like to replace the fonts with minor changes, therefore I would like to know which are the fallback fonts, or the fonts which will be used instead of the original font.

For example (Help:SVG#Font_substitution_and_fallback_fonts):

  • Arial => Liberation Sans
  • Times New Roman => Liberation Serif
  • Courier New => Liberation Mono
  • Bitstream Vera Sans => ...?
  • Sans => ...?

 — Johannes Kalliauer - Talk | Contributions 19:52, 22 October 2017 (UTC)

Replacing font names is a bad idea. The MW renderer already substitutes for Arial and Times New Roman, so the change is pointless for MW. A Commons SVG Checker warning such as that is not serious on its face. Down the road, the substitution has dubious value. The MW renderer may know "Liberation Sans", but most of the user agents out there will not know it; they do know "Arial". Even changing the string to "Arial, Liberation Sans" is pointless. An appropriate change might be to append a generic font to unusual font names. For example, "Bodoni" could go to "Bodoni, serif" if you know that, but even then most user agent font substitutions are close enough. So some labels show up as sans-serif when they should be serif; what's the big deal? The problem that users confront with fonts are layout issues that are much more subtle. A user selects a condensed font to make a label fit, but that font isn't available, so text overruns on librsvg.
Currently you are making SVG edits that allegedly "fix" errors, but end up deleting RDF. Leave metadata alone; there should be a lot more of it rather than less. Deleting metadata can easily be a copyright violation. I have no qualms about removing most inkscape:, sodipodi:, and Adobe namespace items, but there are exceptions; it can be a bad idea to remove attributes such as inkscape:stockid="DotM". Deleting some Adobe namespace items implies removing a switch element. It is also a bad idea to compress paths the way you have doing. Changing 0.123,0.456 -0.789,0.123 0.666,0.777 to .123.456-.789.123.666.777 may save space, but it is overkill. XML is a crappy format, but it is supposed to be human readable. LZW is very good at compressing structured spaces and repetitious style strings.
Glrx (talk) 21:17, 22 October 2017 (UTC)
Tanks for the answer. I'm working in the de:Wikipedia:Grafikwerkstatt and sometimes users whish new grafics. Therfore I use elements from different *.svgs. I would like that the new svg created on my computer (use Linux or Windows) looks the same as the picture created by the MW renderer. I could take new ones, but I would like to keep it similar to the style of the existing svg. I don't want to change fonts of existing svgs created by others.
 — Johannes Kalliauer - Talk | Contributions 15:29, 24 October 2017 (UTC)
The simplest approach is to use common font families with an explicit fallback to a generic font. Even simpler is to just specify the generic font.
For example, File:Globe valve diagram.svg uses font-family="Bitstream Vera Sans"; MW displays it sans-serif even though Bitstream Vera Sans is not in the font list. If I click on the image to look at the SVG in my browser, the text displays with a serif font. The font shift is a surprise, but it doesn't make much difference to the result. If the font is important, then the font specification should have been font-family="Bitstream Vera Sans, sans-serif".
If I were merging several images into one, then I would change the font families and sizes to be uniform. It's distracting to have slightly different font-families and font sizes in a single diagram. SVG font size specifications are often absurd. I've seen too many files with specifications such as font-size="18.378612px". Maybe they convert to reasonable point sizes, but the precision not needed.
Glrx (talk) 16:41, 24 October 2017 (UTC)

Anomalies with font attributes, especially font-style[edit]

with CSS
without CSS

Dear SVG experts!

I discovered that the converter handles font attributes defined via classes (the CSS syntax) differently than if they are specified via font-family="sans-serif" and font-style="italic" (SVG syntax). Note that it’s not me, but one Perhelion who crafted <text>s for the latter image, so I shouldn’t subscribe to correctness of the SVG code. Also there is now a posting on StackExchange about interpretation of font-family.

Somebody is certainly at fault, but who: rsvg developers, Wikimedia technicians, or an unreliable SVG code happened? Opinions? Incnis Mrsi (talk) 18:38, 27 December 2017 (UTC)

Update: It turned out that the current converter doesn’t reproduce the bug imaged with font-style="italic"_in_rsvg_at_Wikimedia.png mined from the MediaWiki cache, which was produced somewhere between April 9, 2014 and today. This likely isn’t a CSS–SVG difference of the converter, but its transient malfunction at an unknown date in the last four years. Incnis Mrsi (talk) 19:44, 27 December 2017 (UTC) specifically, on 2014-04-09 14:34 UTC according to the «Date:» header. Incnis Mrsi (talk) 12:46, 28 December 2017 (UTC)

@Incnis Mrsi: I think the rendering-problem is CSS-independet.  — Johannes Kalliauer - Talk | Contributions 22:35, 27 December 2017 (UTC)

Don't use random fonts without a generic fallback.
Generic fonts: font-family: serif and font-family: sans-serif are sensible, but font-family: sans is not.
Keep the code clean: use elements should link to elements in the defs section rather than deep clone elements that are also rendered in the body.
Do alignments right: text-anchor="end" is your friend.
Glrx (talk) 22:48, 27 December 2017 (UTC)

Thanks for your activity, people. Happy New Year! Incnis Mrsi (talk) 12:46, 28 December 2017 (UTC)

link to specific language version[edit]


I would like to link to but I don't know how. I tried:

[[:File:History of the Universe lang.svg?lang=zh|lang=zh]], [[:File:History of the Universe lang.svg|lang=zh]]

lang=zh, lang=zh

{{F|1=History of the Universe lang.svg?lang=zh|lang=zh}}, {{F|1=History of the Universe lang.svg|lang=zh}}

History of the Universe lang.svg?lang=zh, History of the Universe lang.svg

{{technically replaced|1=History of the Universe lang.svg?lang=zh|lang=zh}}
Rendering bug.svg
Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.

Help talk:SVG Gnome-go-next.svg File:SVG.png

Deutsch | English | Español | Italiano | 한국어 | Македонски | Русский | 中文 | 中文(简体)‎ | 中文(繁體)‎ | +/−

No SVG.svg

{{vva|1=History of the Universe lang.svg?lang=zh|lang=zh}}

 — Johannes Kalliauer - Talk | Contributions 22:51, 27 December 2017 (UTC)

The file has multiple languages, but there is only one file and therefore only one wiki markup link:
Such a link goes to the File: page; it is not a link to the SVG file itself. Just ask the reader to follow the link and then select the appropriate language from the dropdown box when he gets there.
If you try to include a URL parameter to specify the language, then the wiki markup will URLEncode the "?" to "%3F" because it believes the "?" is part of the filename:
Switch-translated files were an addition to MW, so the markup wasn't made to handle links with URL params.
For a link with URL parameters, just use single brackets and a raw URL:
If the reader can read Chinese, then
works, but does not keep the reader on his wiki or transport him to Commons...
For the templates, just use the file name without the language argument. A Chinese reader will get to the correct file, and the documentation should describe how to add the lang argument. To make it clearer, the templates need modification to take lang params.
On another front, zh is an IETF macrolanguage rather than a language. SVG files should use langtags such as zh-Hans (simplified Chinese) or zh-Hant (traditional Chinese). It turns out that librsvg is broken and will will display the first zh-* it finds, but the browsers will do it a little better. BTW, only use one langtag per systemLanguage attribute because Chrome and Edge don't do it right. (Chrome will work if you put spaces around the commas: systemLanguage="de , fr , it", but Chrome will think there are two "," langtags.) It's one of those rare places that librsvg does a better job than Chrome.
Glrx (talk) 23:52, 27 December 2017 (UTC)
@Glrx: Thanks for the answer. I tried zh:File:History of the Universe lang.svg, but on my computer it renders the english version (also if I'm not logged in).
@Glrx: Maybe you know how to "repair" File:Structure_of_the_magnetosphere_LanguageSwitch.svg it uses systemLanguage="ru-1" for File:Structure_of_the_magnetosphere-ru-1.svg and systemLanguage="ru-2" for File:Structure_of_the_magnetosphere-ru-2.svg. Due to a renderbug I created one workaround version (based on the solution proposed by Perhelion) and I added all different language-versions with a language-switch. There were two Russian versions. Is it possible to have one file with a languageswitch with two Russian versions?
 — Johannes Kalliauer - Talk | Contributions 17:17, 28 December 2017 (UTC)
(Oops; wrong referent about zh:.) Yes, it displays English. IIRC, MW design decision is to default images to lang=en. If it defaulted to the WP's language, then MW would be generating language-specific versions even when that language is not available in the SVG file.
You are opening a old wound with langtag handling because File:Structure of the magnetosphere LanguageSwitch.svg won't show either "ru-1" or "ru-2" in the language select dropdown, langtag sorting is gone, and WMF developers are monumentally confused about SVG langtags.
You cannot display the "ru-1' image with the dropdown control, but you can use "lang=ru-1" in the URL to do the display:
The magnetosphere SVG uses the langtags "ru-1", "ru-2", and "numbered"; those langtags should not be used because they do not conform to the BCP47 specification. A singleton such as "-1" should be followed by another subtag; "numbered" is not in the registry. Multiple versions of the same language are allowed in an SVG file. For example, SVG can be written to distinguish American (en-US such as "color") and British (en-GB such as "colour") spellings. Conforming langtags could be "ru-x-1", "ru-x-2", and "qqz-x-numbered" (or "qqn"), but those langtags are poor. For the Russian langtags, there's probably a regional difference in the phrases that should be distinguished with existing region subtags such as "ru-RU" (Russian as used in Russia) and "ru-UA" (Russian as used in the Ukraine). (Those region subtags are only an example; I don't know the regions involved; I'd have to ask a Russian speaker why different phrases are used.) (More problems: hyphenated langtags don't work correctly in librsvg, so it does not distinguish "ru-RU" from "ru-UA".)
On another issue, the switch-translated magnetosphere SVG file has grouped all phrases in one language together (all the "de" text elements are selected with one switch). I call that approach a planar translation. It is better to use more switch elements and group the phrases with the same meaning together. That is, one switch element for every phrase that needs to be translated. That's how switch elements are used in File:First Ionization Energy.svg. Keeping similar phrases together makes it clearer what needs to be translated. I like that you kept multiline translations within one text element.
Glrx (talk) 21:20, 28 December 2017 (UTC)

Help with Bold Font[edit]

Hello, I am somewhat of a new SVG editor, although I find it very enjoyable (especailly converting old .png into .svg). I'm coming across a strange issue I was hoping to resolve. I've been working on making "election apportionment" diagrams, diagrams used to show how many members of a certain congressional body belong to a specific party. A file called 114thHouse.svg is an example of what I mean. However, I'm coming across some strange issues. Whenever I upload my .svg to wikicommons, I lose my bolded font. For example, look at US_House_193-239_(3V).svg (notice the 435 is bolded) and compare that to 114thHouse.svg. Why is this happening? In Adobe Illustrator, I can see there is bold font.— Preceding unsigned comment added by PeterMGrund (talk • contribs) 03:01, 13 January 2018 (UTC)

Hello Peter, this is task phab:T25643. Adobe used his own (proprietary) font-name systematic, which is also for me not understandable. I fixed one of your files for example-- User: Perhelion 03:36, 13 January 2018 (UTC)
Why one should expect «.st0{font-family:'Helvetica-Bold';}» to be understandable by anything but Adobe Inc. house products? This is a non-standard CSS inciting vendor lock-in. On Commons, such things must be fixed on sight, thanks user:Perhelion. @PeterMGrund: use links File:US_House_193-239_(3V).svg and File:114thHouse.svg (with colon after opening square brackets in the wiki code). Incnis Mrsi (talk) 08:19, 13 January 2018 (UTC)

All characters piled-up[edit]


I created the following file with a text editor: File:Carte hexagonale 8mm numerote 35hex.svg

Everything seems perfect when I display it with Firefox or Chrome or when I import it into Inkscape. However, the SVG-to-PNG does not work well. I guess it is related to text-anchor="middle" but the problem does not seem to be listed here (or maybe I just didn't see it or understand it).

Of course I can import it into Inkscape then save it (it seem to automatically set the text anchor to left while keeping the correct position) but I find this solution a bit unsatisfying.

Any hint?


Cdang (talk) 13:20, 19 February 2018 (UTC)

Explicit definition of letter-spacing was decisive, although I have no idea why was it that wrong by default. It is better to post such stuff to Commons:Graphics village pump next time, anyway. Incnis Mrsi (talk) 14:21, 19 February 2018 (UTC)
Thanks a lot Incnis Mrsi. Regards
Cdang (talk) 16:05, 19 February 2018 (UTC)