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)