Wikipedia:SVG help/Archive 5

This is an archive of past discussions on Wikipedia:SVG help, for the period February 2011 to January 2013.
Do not edit the contents of this page. If you wish to start a new discussion or revive an old one, please do so on the current main page.

Archive 1

←

Archive 3

→

File:Motionfield.svg

I uploaded the first versions of this image some years ago, and about a year ago I made a last modification. When I uploaded it, however, the rendered image was the same as the last before version. There should be some altered text and directions of arrows reversed. I then thought this was some temporary problem and just forgot about. Now that I return to this image, the problem remains. I can download the SVG file from wikipedia and render it in Inkscape and it looks just right, but the image that is rendered in wikipedia is still wrong. I uploaded the file just downloaded to my laptop (that looks fine) again to wikipedia, and it still renders as one of the old version. The text where the green lines intersect should read "Camera center" not "Focal point" and the arrows in the image plane should point in the opposite direction relative to the arrows in the upper right.

Just now I can't see what the problem is. The file that I download from wikipedia doesn't even contain the text fragments that are rendered in the image by wikipedia. The image is produced in Inkscape, and I tested the stroke-to-path trick and it doesn't seem to make things going, the image is still OK in Inscape and not OK when uploaded to wikipedia. --KYN (talk) 22:05, 28 February 2011 (UTC)

I checked the image you last uploaded and it was absolutely fine. It contained all the edits you did and displayed them correctly in the thumbnail, in the browser and on my PC. I reverted to the old 2010 version and it displayed correctly. Most probably, all you need is to clear your browser's cache, you can do that by holding "shift" and clicking on the "refresh" button in your browser. Clear your cache whenever your changes don't display, especially after re-uploading a file. I haven't heard of a caching delay of more than a year, but I'm sure that's the case here. We also have a tool called Commons:SVG Check that shows how the file will look when uploaded, and what errors it might contain. By the way, I took the chance to do some optimization for your file, now the arrows and points are more consistent and the file size is down to less than 5kb. Best regards, -- Orionist ★ talk 19:06, 2 March 2011 (UTC)

File:BSicon SANDBOX.svg

Hi all, I recently have a problem about rendering an SVG correctly. The file File:BSicon SANDBOX.svg has a mask within it, and the desired outcome is a pair of parallel dashed line following the cubic bezier curve. I was able to achieve that in IE9, Firefox and Chrome, but not on the Commons or the SVG check. Can anyone spot the problem? Or is there other ways to achieve the same effect? Thanks in advance – PeterCX&Talk 19:40, 23 March 2011 (UTC)

Hi Peter! I came to tell you that you needed to match the two paths in the file, but apparently you figured that out already! The thumbnails still show thin red lines linking the sides of the dashes, and I couldn't find a way to get rid of them without outlining. Converting to outlines might not be an elegant solution, but it guarantees that you get the exact appearance you want. Below are the outlined paths, cropped to the visible area. you can paste the code into your file, the resulting size should be about 2.4 kb. Regards, -- Orionist ★ talk 10:50, 24 March 2011 (UTC)

<path fill="#BE2D2C" d="M295.777,208.671l37.64-14.403c-5.142-13.438-9.74-27.339-13.669-41.32l-38.736,10.884
	C285.346,179.369,290.292,194.287,295.777,208.671z"/>
<path fill="#BE2D2C" d="M337.351,293.414l34.502-20.847c-7.636-12.637-14.709-25.558-21.026-38.404l-36.196,17.798
	C321.672,266.286,329.271,280.074,337.351,293.414z"/>
<path fill="#BE2D2C" d="M260.389,23.721l39.979-1.324C300.123,15.052,300,7.516,300,0v-0.176h-40V0
	C260,8.042,260.136,15.943,260.389,23.721z"/>
<path fill="#BE2D2C" d="M392.476,370.604l31.104-25.399c-9.81-12.012-19.007-24.011-27.338-35.664l-32.746,23.41
	C372.754,345.851,382.442,358.368,392.476,370.604z"/>
<path fill="#BE2D2C" d="M200.421,25.708l39.981-1.324C240.142,16.354,240,8.234,240,0v-0.176h-40V0
	C200,8.615,200.142,17.264,200.421,25.708z"/>
<path fill="#BE2D2C" d="M309.798,110.375c-2.664-14.132-4.812-28.803-6.382-43.605l-39.815,4.223
	c1.69,16.184,3.95,31.78,6.754,46.818L309.798,110.375z"/>
<path fill="#BE2D2C" d="M500,485.848v-20.073l-10.052,10.009C493.286,479.135,496.646,482.493,500,485.848z"/>
<path fill="#BE2D2C" d="M485.134,413.8c-11.79-12.238-22.175-23.349-31.748-33.965l-29.759,26.835
	c10.66,11.784,21.583,23.385,32.688,34.894L485.134,413.8z"/>
<path fill="#BE2D2C" d="M261.988,169.177l-38.512,10.821c4.75,16.907,10.317,33.733,16.546,50.01l37.361-14.297
	C271.57,200.506,266.443,185.03,261.988,169.177z"/>
<path fill="#BE2D2C" d="M319.55,302.02c-8.212-13.687-15.719-27.453-22.571-41.379l-35.891,17.647
	c7.584,15.424,16.054,30.899,25.175,45.994l34.245-20.691C320.19,303.065,319.866,302.546,319.55,302.02z"/>
<path fill="#BE2D2C" d="M314.893,367.697c9.568,13.385,20.076,27.098,31.23,40.758l31.015-25.326
	c-10.244-12.542-20.178-25.416-29.688-38.707L314.893,367.697z"/>
<path fill="#BE2D2C" d="M243.736,73.099l-39.762,4.218c1.853,17.464,4.394,34.82,7.554,51.583l39.301-7.409
	C247.839,105.691,245.48,89.584,243.736,73.099z"/>
<path fill="#BE2D2C" d="M379.12,446.804c10.316,11.44,21.438,23.339,33.998,36.377l28.815-27.762
	c-11.163-11.595-22.226-23.379-33.082-35.425L379.12,446.804z"/>
<path fill="#BE2D2C" d="M465.629,500h20.239c-3.363-3.365-6.723-6.723-10.091-10.105L465.629,500z"/>

Thank you very much Orionist! May I know what software did you use to generate the outlines? Then I might be able to try that out later on more other icons.

Also there is another minor problem about masking. I noticed that, the last dash on the right edge has a part with wrong opacity. Not very serious on File: BSicon SANDBOX.svg, but more apparant in another file File:BSicon tÜWo+r.svg. Is it again only solvable by drawing outlines? Thanks again – PeterCX&Talk 15:31, 24 March 2011 (UTC)

Well, I used Adobe Illustrator, but you should be able to do the same with Inkscape. As for the problem in File:BSicon tÜWo+r.svg, I tried a couple of things but was unsuccessful. It's displaying no errors at SVG check though, so I'll forward this to the developer. If you decide to use the outlines for this file, just tell me and I'll post them here for you. Regards! -- Orionist ★ talk 01:55, 27 March 2011 (UTC)

Never say never! The solution was to trick the system: As File:BSicon tÜWo+r.svg is basically a rotated version of File: BSicon SANDBOX.svg (which did not show the defect), I used the transform attribute to rotate it around the center of the viewBox (figured that out after ten failed attempts with other methods, and highly appreciated input from User:Jarry1250). Regards, -- Orionist ★ talk 11:29, 27 March 2011 (UTC)

wikimedia:File:Map_of_collective_bargaining_legislation.svg

The current font used has a kerning issue when rendered by wikipedia, although looks correct when I display it directly or render it to png using imagemagick. I assume it's simply due to wikipedia not having the font, but even if the font gets replaced, the replacement font should kern correctly. — Preceding unsigned comment added by Justin Ormont (talk • contribs) 04:26, 25 March 2011 (UTC)

This is a problem with the "librsvg" renderer used in Wikipedia (in MediaWiki software in particular) as it has problems rendering most fonts. Your best bet is to try variants of Bitstream Vera Sans or Dejavu Sans (Condensed usually gives best results). Sometimes neither of these works and the file displays some artifacts at small thumbnail sizes, in these cases you can use some non-svg font, like Arial, which would be a bit jumpy, but renders well at small sizes. Regards, -- Orionist ★ talk 23:27, 29 March 2011 (UTC)

File:1852 US Electoral Map.svg

The pie charts on the right are supposed to have titles which are put on a path. If you view the image at full resolution (in a compatible browser), they are there, but they don't seem to appear inside wikipedia. Any ideas? --Hardwigg (talk) 20:30, 1 May 2011 (UTC)

It's a well-known bug of RSVG that it doesn't support this. (What you call viewing "at full resolution" means viewing in a separate program other than RSVG.) The basic crude solution to all RSVG font problems is to convert text to paths... AnonMoos (talk) 23:03, 2 May 2011 (UTC)

Not sure that the raw popular vote totals are all that meaningful for antebellum elections anyway -- until the 1830's, different states had strongly different electoral qualifications, and South Carolina infamously had no popular vote whatsoever in presidential elections until after the war... AnonMoos (talk)

File:UPLB Campus map.svg

Title not displaying at center of the two lines. Paragraph at legend flowing into other parts of the image. These are both problems under render. Everything is fine under Inkscape, Firefox and Ubuntu's image preview. It exclusively uses DejaVu fonts. Moray An Par (talk) 09:24, 4 May 2011 (UTC)

How to test SVG locally?

How to test SVG locally with the same SVG vector to raster engine as in Wikipedia before uploading it to Commons. I uploaded SVG which has no problems with Opera 11, IE 9 and FireFox 3.6.9. Wikipedia's rasterization software renders this image with some unwanted objects. I need to determine whether it is an SVG file bug or engine bug.BPK (talk) 00:30, 8 June 2011 (UTC)

Although not exactly "local", the SVG Check tool should solve your problem. Alternatively, you could try installing and running rsvg, which is the renderer used by MediaWiki. —Quibik (talk) 09:47, 8 June 2011 (UTC)

This looks strange: when I upload my SVG to online SVG check tool, everything looks fine. It goes close to testing the picture with librsvg. Assume that I managed to build the library. How to make practical use of it? (I'm running Windows). By the way, I'm talking about this image BPK (talk) 18:14, 10 June 2011 (UTC)

I did not find rsvg directly in my Ubuntu system. It turned out to be within apt-get install librsvg2-bin. But I had found the librsvg2-2 library it uses and listed its reverse dependencies. If you use a program in it, it uses the same code to render an SVG, and, for example, libreoffice is equivalent to rsvg.

$ apt-cache rdepends librsvg2-2 | sort | uniq librsvg2-2 Reverse Depends: aisleriot aterm aterm-ml cairo-clock cairo-dock-core cairo-dock-plug-ins compiz-plugins darktable denemo emacs23 emacs23-lucid eog fvwm gambas2-gb-gtk-svg gbrainy gcompris gdesklets gimp gir1.2-rsvg-2.0 glchess glines gnobots2 gnome-panel gnome-system-monitor gnomine gnotski gstreamer0.10-plugins-bad gweled gwibber iagno libabiword-2.9 libafterimage0 libccss-1-5 libevas1 libgdk-pixbuf2.0-0 libgdk-pixbuf2.0-0:i386 libgegl-0.0-0 libgldi3 libhippocanvas-1-0 libimage-librsvg-perl libjava-gnome-jni liblablgtk2-gnome-ocaml libmagickcore4-extra libmono-system-windows-forms4.0-cil libmono-winforms2.0-cil libopenscenegraph80 libreoffice-core librsvg2-2.18-cil librsvg2-2:i386 librsvg2-bin librsvg2-common librsvg2-dbg librsvg2-dev libswami0 logjam mahjongg mate-control-center mate-panel mate-system-monitor mdm mistelix mldonkey-gui moblin-icon-theme monkey-bubble netsurf-gtk performous pike7.8-svg python-libavg python-rsvg quarry ruby-rsvg2 tryton-client tuxmath tuxpaint tuxtype vlc-plugin-svg xfce4-xkb-plugin --A Pirard (talk) 20:13, 15 October 2013 (UTC)

File:Super Science Stories Canadian issues grid.svg

Displays black boxes instead of the grid I was looking for; it's supposed to be an SVG version of File:Super Science Stories Canadian issues grid.png. It's an Inkscape svg; I tried the stroke to path conversion but it doesn't seem to have helped, plus it removed the colour fills I had and I now don't see how to fill colour in the converted shapes. I'm not very experienced with Inkscape so a pointer on how to solve the problem there would be helpful, or a suggestion of a different editor to use that wouldn't cause this problem. Mike Christie (talk - contribs - library) 11:46, 4 July 2011 (UTC)

Solution: #Missing objects or black boxes 91.42.178.157 (talk) 14:42, 4 July 2011 (UTC)

I did that, or at least I think I did; I selected everything in the svg and chose Object->Stroke to path, saved that and uploaded that version. I'll try again without flowed text. Mike Christie (talk - contribs - library) 14:47, 4 July 2011 (UTC)

Done Next time I would prefer Office (or similar tool) to build or convert. -- Perhelion_»♥› 15:40, 4 July 2011 (UTC)

That looks great -- thank you very much! I need to do dozens of these: I've been building them in Excel and capturing them as pngs but it's been suggested that svgs would work better. Can you tell me what I was doing wrong in Inkscape? Or should I use another tool? Mike Christie (talk - contribs - library) 15:50, 4 July 2011 (UTC)

I figured out how to get successful svg uploads. However, I now have a related problem -- I thought I would try redoing what Perhelion did above in order to tweak the fonts and spacing slightly. However, the svg does not render perfectly in Wikipedia. Here is an image showing the rendering differences; the top image is how it renders in Inkscape; the bottom image is how Wikipedia renders it. The font has been changed and the centring of the text in the cells is not as accurate. Is there anything I can do about this or is it a limitation of the existing rendering engine? Mike Christie (talk - contribs - library) 17:59, 4 July 2011 (UTC)

Yes there are many limitations (prefer Commons:Commons:SVG). I think the description as like SVG problem FAQ here is very short and outdated and mean that must be placed on Commons. I've done a bit extra tuning with a texteditor (above). I'm only a guest here. Greetings and Good Bye -- Perhelion_»♥› 14:06, 6 July 2011 (UTC)

free hand drawing in svg format

I require assistance with free hand drawing in svg format. when i draw a free hand image it shows the following code when opened in a web browser. the first point is the starting point what is the rest of it??/

-ajay —Preceding unsigned comment added by 14.139.160.2 (talk) 13:15, 7 July 2011 (UTC)

This link should give a thorough explanation, but it's basically this: A (cubic) bezier curve is drawn from the starting point to the third coordinate after "c". The first and second coordinates are the control points, and all coords after "c" are relative to the starting point. Hytar (talk) 18:38, 7 July 2011 (UTC)

Rotate text of labels correctly

Create a new request

How to rotate labels of latitude and longitude to have its text placed horizontally? I have rotated the whole image 32.5°, but it is not good for the text. (I can do the rest of changes such as color of the ocean my myself later.) By the way, the text is placed on right places in Inkscape (but incorrectly rotated), but the text is incorrectly placed on thumbnail (and other SVG viewers). --Snek01 (talk) 22:19, 18 July 2011 (UTC)

I have resolved it manually adding texts one by one. --Snek01 (talk) 21:01, 21 July 2011 (UTC)

File:British_Isles_Euler_Diagram_8.svg

Using Inkscape: I have problems when converting strokes to paths; they distort heavily (see "Guernsey" or "Jersey" ellipses, for example).

This is my first time using Inkscape, so hopefully I'll get better at simple issues like this. Thanks. TWCarlson (talk) 15:33, 12 August 2011 (UTC)

Looks cool. Why you do convert all to paths??? πϵρήλιο ℗ 17:55, 12 August 2011 (UTC)

Internet Explorer seems to convert them all to paths anyway when rendering. I'll do it in whatever way looks right. Can you help with that? TWCarlson (talk) 02:36, 15 August 2011 (UTC)

I have solved this problem myself. I was creating an ellipse and then stretching it with the selection handles. I really should have been using the ellipse handles (picking the ellipse tool and then clicking the shape). I found this by examining the svg file in a text editor and seeing a "transform" term applied to the path. Using the ellipse handles changes the radii dimensions directly without applying a "transform". TWCarlson (talk) 22:35, 15 August 2011 (UTC)

File:CatenaryForceDiagram.svg

There are two problems with the PNG rendering of this. First the labels are moved around but I suspect I can fix that by playing around with the scaling. Second, tspan seems to be changing the text; the downward arrow should be be labelled (0, −λgs) but the PNG version has (0, −λ)gs. I've checked this in Firefox and Inkscape so the problem seems to be a bug in RSVG, any work-around suggested?--RDBury (talk) 15:46, 20 September 2011 (UTC)

I think it's fixed now, for problem 1 the workaround is to not use ViewBox to scale the image, i.e. always use pixels as the unit of measurement. For problem 2, I encased the whole text in tspans, using font-style="none" for the non-italics sections.--RDBury (talk) 16:50, 20 September 2011 (UTC)

File:Non-binding-price-ceiling.svg and File:Binding-price-ceiling.svg

Noticed something weird about these two. In the price ceiling article, the Non-binding-price-ceiling image is displayed incorrectly (the text "non-binding price ceiling" is cut off on the right side of the image), but the Binding-price-ceiling image is displayed correctly. When clicking the Binding-price-ceiling image, taking you to the image page though, the image is displayed incorrectly. Both times the image is converted to PNG to be displayed (at least in my browser), but the article image is scaled slightly. Also though, in my browser (Google Chrome 14—I'm not currently on my home computer), the images appear to be rendered correctly when I view the SVG file directly. —danhash (talk) 18:51, 29 September 2011 (UTC)

It's standard font-rendering difficulties. The way to be sure that text looks like it does in your vector editor is to "Convert text to paths". AnonMoos (talk) 15:43, 30 September 2011 (UTC)

What can be done to fix the rendering here on wikipedia? Does the rendering engine need to be improved or made more standards-compliant? —danhash (talk) 20:26, 30 September 2011 (UTC)

You can see some past discussions at commons:Commons:Graphics village pump and meta:Talk:SVG_fonts... AnonMoos (talk) 21:04, 30 September 2011 (UTC)

So basically it's a problem that everyone is aware of but isn't really being fixed? —danhash (talk) 19:43, 6 October 2011 (UTC)

Yes, but there are reasons. You probably need a better explanation than was provided.

The problem is that your computer and Wikipedia do not have the same fonts. Most of the fonts you have are nonfree. Wikipedia can only use free fonts, which you don't have. When you display the SVG by itself, your browser is using your computer's fonts. However, thumbnails have to be converted to PNGs by Wikipedia, not your browser, so they use Wikipedia's fonts.

The problem is not with Wikipedia. It is doing exactly what it should be doing. The problem is with the file which was not designed with Wikipedia fonts in mind. Fortunately, the fonts Wikipedia uses are free, and so you can download them. And if Wikipedia still cuts off the fonts after you fix that, you can put a clear rectangle on the whole thing to make sure the file will crop correctly.

I hope this is helpful. — trlkly 20:54, 10 October 2011 (UTC)

Seems to me, then, that the resolution is pretty simple, although it may suck just as much. If an SVG image is using non-free fonts and the thumbnailing by MediaWiki causes the fonts to be skewed or cut off or the image to otherwise look crappy, horrible, and unencyclopedic (as it does) it either:

shouldn't be used in an article, in which case it shouldn't be on wikipedia (but perhaps on commons),
should be converted to PNG and uploaded (in which case the vector nature of the image is lost),
or should, ideally, be edited to work with a free font, which would require (potentially lots of) extra work.

This only seems logical to me: we want non-crappy images in our encyclopedia articles don't we? Following the same logical thought process, SVG images that look crappy as explained above should just be deleted. It's better to have no image in an article than to have images that look like crap to readers who won't understand that it's because of Wikipedia's licensing policy. If a standard wait time is applied (7 days or something reasonable) it will give the uploader and other editors time to fix the image, but images that nobody cares enough to update will still be deleted instead of making articles look bad. —danhash (talk) 21:25, 10 October 2011 (UTC)

File:Nucleotides 1.svg

The file isn't rendering the same as it does in Adobe Illustrator; the lines are too thick. It should appear like File:Nucleotides.png. Antony–22 (^talk⁄_contribs) 19:55, 25 October 2011 (UTC)

There's no stroke-width parameter specified on any of the lines so they are defaulting to whatever the renderer's stroke size is. --The Pink Oboe (talk) 21:10, 25 October 2011 (UTC)

How did you create the image? Do you know WP:CSDG? --Leyo 21:57, 25 October 2011 (UTC)

I made some changes to the previous version of the image, which renders fine. I basically just changed some of the text and extended the dashed lines to fit the new text. I guess Illustrator lost something that was in the previous image. Antony–22 (^talk⁄_contribs) 22:50, 25 October 2011 (UTC)

You might want to start again using the previous version and to the editing with Inkscape or even a texteditor. --Leyo 07:53, 26 October 2011 (UTC)

And increase the filesize by 50% full of bloated and useless code? Text editor yes, Inkscape no. You're using Illustrator CS4 I believe? Illustrator CS5/CS5.5 produces much better SVG code than previous versions, so if at all possible I recommend you upgrade if you are going to be making SVGs on a regular basis. --The Pink Oboe (talk) 09:17, 26 October 2011 (UTC)

File:TGG Classes2Tables Rule Class2Table Binding Semantics (en).svg

The Commons SVG renderer renders the DejaVu Sans Condensed font differently from what I get in a) IE and Chrome (with the current version 2.33 of the font installed on my PC), b) Inkscape, and c) the Jarry1250's SVG Check on the toolserver. Results for a), b) and c) look perfect, only the Commons renderer draws the font too large, resulting in labels to be over the border of its boxes (clearly visible on "package:Package"). I checked the librsvg bugzilla, but did not find a related bug. Any ideas? --JanRieke (talk) 21:50, 2 November 2011 (UTC)

It's basically a kerning issue: the letters are more far apart than they should be. This is one of the big issues with our renderer, which seems unable to render even a sliver of kerning. One solution is to put each letter into its own tspan element, which would force kerning on the renderer, but fragment text and add clutter to the code. I did that by re-saving in Illustrator, but the resulting code might need some clean up (feel free to revert if you don't like the result), and there might be other solutions that I'm unaware of. Hope this helps. -- Orionist ★ talk 16:21, 3 November 2011 (UTC)

Thank you! Unfortunately, I don't have Illustrator. Do you know if this is also possible with Inkscape? (I have more files to fix...) I have tried the "Split Text" extension, but it creates huge spaces between the characters. Maybe I will just slightly reduce the font size... :/ --JanRieke (talk) 20:42, 3 November 2011 (UTC)

Removal line

The removal of a line doen't go very well. In the left corner of the picture a line can be seen that shouldn't be there. I opened it in Inkscape and saw this line of code:

<svg:FlowRoot id="flowroot2553">
<svgL:flowPara id="flowPara2559">
<svg:flowRegion id="flowregion2555">

I removed the code and it works fine but not for the thumbnails. Why not? Wereldburger758 (talk) 07:29, 10 November 2011 (UTC)

Have you purged the thumbnail cache as the thumbnail above looks fine to me. --The Pink Oboe (talk) 09:11, 10 November 2011 (UTC)

I normally bypass the cache by clicking on shift+renew. But that still shows the line. Wereldburger758 (talk) 12:16, 10 November 2011 (UTC)

A strange thing I noticed is that like yourself purging didn't work...until I went onto the commons page then purged that. The line disappeared on commons, but when I came back to WP the line was back. I again tried purging it but it was still there. To me that says there are either two different renderers active and/or two different caches involved...or, of course, something I haven't thought of. --The Pink Oboe (talk) 13:19, 10 November 2011 (UTC)

Can you take a look at the code? Wereldburger758 (talk) 17:38, 11 November 2011 (UTC)

This is something that is related to this case. I made this file: 1938_CS-B07_Zákaz_jízdy_motorových_vozidel_jejichž_váha_přesahuje_vyznačenou_mez.svg . I noticed that I had used the wrong color (black instead of blue) and changed it. But the change cannot be seen in the thumbnail. Click on the thumbnail and all is fine. Wereldburger758 (talk) 07:42, 12 November 2011 (UTC)

convert File:RichmondCoatofArms.jpg to svg

I need the file RichmondCoatofArms.jpg coverted to SVG and for the SVG image to replace the RichmondCoatofArms.jpg on the Richmond The American International University in London wikipedia page. -- 19:01, 27 November 2011‎ User:LordByron81

However, that would require a lot of work for something which would end up being merely a non-free fair-use graphic. In any case, this page is more for questions about already-existing SVG files; your question belongs more on the Graphic Workshop, Illustrations board... AnonMoos (talk) 15:55, 20 January 2012 (UTC)

Help deleting preliminary uploads

I am using Adobe Illustrator 10 which does not display SVG images the same as when uploaded to Wikipedia. I made a number of changes to File:MaxwellEqArea.svg on the commons, uploading each change which looked good in Illustrator, but not on Wikipedia. I finally got it right, but I think the intermediate files should be deleted, and I do not know how to do that. PAR (talk) 23:19, 11 January 2012 (UTC)

You can post your request to commons:Commons:Administrators'_noticeboard and a Commons admin will delete them for you. By the way, if you need a place for testing for future uploads, File:Test.svg is a file on Commons set aside for testing purposes. Cheers! -- Orionist ★ talk 00:23, 12 January 2012 (UTC)

You can also use the commons:Commons:SVG Check tool. I was having the same problem as you, and found that tool to be a lifesaver. Antony–22 (^talk⁄_contribs) 07:31, 12 January 2012 (UTC)

File:DIRFT1.svg

Error Description - in wikipedia/commons black boxes on "splined curves" are appearing including parts I have definately labled as "fill transparent". Appears to vaildate ok and views ok using google chrome. Passes Jarry1250 tool and displays well with that, upload preview also looks ok but not once uploaded.

PNG image of what it should look like here File:DIRFT1.png Mddkpp (talk) 04:13, 20 January 2012 (UTC)

Fixed -- it seems that your SVG-generating program put some default graphic attributes ( fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" clip-path="url(#p.0)") up in the SVG header. That worked at least partially with past versions of RSVG, but it doesn't seem to work with the current version... AnonMoos (talk) 15:49, 20 January 2012 (UTC)

Ok (I'm used google docs paint program) - I see the text you mentioned when I open with a text editor - can you give me an easy fix for future versions? Or it is a case of the wiki software needing updateing? (..If it's a problem with the google docs output I'll go and 'bug' them.)212.50.167.138 (talk) 05:37, 21 January 2012 (UTC)

I'm really not sure which side is at fault, but it's an incompatibility between the software you're using and the current version of RSVG. I don't know of any way of fixing the problem other than what I did -- I opened the SVG file with a text editor, cut all graphic attributes (stroke and fill attributes etc.) from the <svg ...> element, created a new <g ...> element at the beginning of the vector data (but after the definition of the global clipping path in this case) and pasted the previously-cut graphic attributes there, and then added a </g> right before the </svg> at the end... AnonMoos (talk) 10:43, 21 January 2012 (UTC)

redefining an attribute in SVG

I am working with the standard blank map 6 svg from wikimedia commons. I added a list of languages and I am trying to make it so that when I hover over a language the corresponding countries light up, change colour, or in some way indicate that they are 'selected'. Here is the code I am using.

where tEnglish is the text object that says 'English'. Does nothing.

Whether with <set> or <animate> or any other method, I can not get the svg to change an attribute that has been defined. Meaning that if I delete the fill="#E0E0E0" attribute from one of the <path>s, I can get it to work (altho then the default is black instead of grey, which does not fit the style of the website I'm working on), but if the <path> already contains a fill= attribute, it will not change as directed by the <set> tag.

I have also tried deleting the fill="#E0E0E0" and defining it in a stylesheet - same problem.

So, is it completely impossible to redefine an attribute of a path once it is declared? Does <set> only work if the attribute has not been defined? Is my idea even possible? I appreciate any help that can be proffered.

— Preceding unsigned comment added by 96.251.83.98 (talk • contribs) 24 April 2012 (UTC) and modified significantly by 96.238.211.182 (talk • contribs) 10 May 2012 (UTC)

Thumbnail render blurry

I have been working on recreating some old graphs as SVG charts (using matplotlib). This is working great, except the thumbnail images of the graphs are very blurry, especially the fonts. If I render a png at the same resolution using matplotlib or Inkscape, I get a very clear image. Is there any way to fix this? It looks so bad I'm tempted to just upload my 300px thumbnail and link it in the article instead :(

See the thumbnail on the right. For comparison, here is the version I rendered at 350px. Quasar (talk) 15:12, 9 May 2012 (UTC)

^ "US Census Bureau, 25+, 2005". Retrieved 2006-12-08.

Why did you convert the text into paths? --Leyo 21:32, 9 May 2012 (UTC)

Ahh, that may be the main issue. This is the direct svg output from matplotlib (a plotting/graphing library for python), I will see if there is a way to get it not to do that. Quasar (talk) 01:45, 10 May 2012 (UTC)

png rendering of File:Sound levels.svg

I created this file from a text file, checking the rendering on Opera.

The svg version is all right -- same rendering as Opera -- but the png rendering is wrong.

Obviously : text scaling and location
More discreetely : markers at ends of lines

— Preceding unsigned comment added by PolBr (talk • contribs) 14 May 2012 (UTC)

Uploaded new SVG, PNG rendering unchanged

I uploaded a new version of an SVG image, and the PNG files have not updated to reflect the changes to the image yet, which means that the image is still displaying its old form on pages. It's been over two days now. How do I get the wikimedia software to update this image? Van Isaac_WS^contribs 10:28, 24 May 2012 (UTC)

You need to clear the server's cache. To do that hold shift+refresh button (or Ctrl+refresh in IE). If that doesn't work go to the image description page (if it's in Commons, go to its Commons page) and follow the instructions on Help:Purge. That should take care of any stubborn thumbs. Cheers! -- Orionist ★ talk 07:07, 25 May 2012 (UTC)

I had already tried purging my cache before I ever came here. The commons purge instructions, however, worked wonderfully. Thanks for the help. Van Isaac_WS^contribs 10:13, 25 May 2012 (UTC)

File:Sachin Tendulkar graph.svg — black patches appearing in PNG rendering

I have uploaded File:Sachin Tendulkar graph.svg, a vector and updated version of File:Sachin Tendulkar graph.png. However, its PNG rendering (which appears wherever the file is used) contains unnecessary black patches which do not appear in the actual SVG version (such as in Inkscape or in Internet Explorer 9 (which supports SVG image display)) jfd34 (talk) 17:02, 25 May 2012 (UTC)

Mysterious black rectangles in SVG files are almost always due to the stupid Inkscape "flowtext" nonsense, which can be diagnosed at commons:Commons:SVG Check... -- AnonMoos (talk) 21:45, 25 May 2012 (UTC)

Removed the "flowtext" nonsense, having trouble getting new thumbnails to display right now... AnonMoos (talk) 22:04, 25 May 2012 (UTC)

Conversion

Why are SVGs the preferred graphics on Wikipedia if the software automatically converts them to PNGs when they are displayed in articles? Inter change able 22:35, 29 May 2012 (UTC)

Because vector SVG desplays equally clearly at any size, while PNG can't. See also commons:Commons:Transition to SVG ... -- AnonMoos (talk) 04:52, 30 May 2012 (UTC)

So you're saying that the PNG to which the SVG is converted will display clearly no matter what its size is. Inter change able 16:36, 30 May 2012 (UTC)

Why not look at File:VectorBitmapExample.svg, the very first image on article Vector graphics, etc.? -- AnonMoos (talk) 20:21, 30 May 2012 (UTC)

If you click on the thumbnail it takes you to the image description page, if you click on that the original SVG file will display in your browser, and NOT a converted PNG.

The thumbs in articles are usually below 300px and the image page is 800px. Does that mean we don't need high-res PNGs and JPGs either? Thumbs in articles are indiscernible most of the time and all you have to do is just click a couple of times to get the high-res. Vector graphics provide the highest resolution possible (infinite) in a small file size. They are also a hell lot easier to correct, modify and translate, which is sometimes impossible with pixel graphics. These alone should be enough reason to prefer SVG. Regards. -- Orionist ★ talk 22:52, 30 May 2012 (UTC)

I think the OP might have been asking why SVG'S are preferred even though they're not displayed. This might be because of browser support. Pokajanje|Talk 05:15, 8 March 2013 (UTC)

File:KlauberTriangle.svg — image does not render

This is an updated version of File:KlauberTriangle.png which contains undesired extra-wide vertical lines. Unfortunately, the .svg version, which looks much better, does not show up at all. Will Orrick (talk) 18:11, 13 June 2012 (UTC)

Thanks to User:AnonMoos for leaving a helpful remark on my Wikimedia Commons Talk page. I figured out how to make a true .svg version of this image, but it looks like the file size for an image of this complexity will be too large. Subsequently I figured out how to improve the quality of the .png file that the .svg file was intended to replace, so I'm going to revert to that. Will Orrick (talk) 13:49, 14 June 2012 (UTC)

Why haven't thumbnails been updated?

I've just created a prettier version of the image on the left but for some reason some thumbnails/PNG versions haven't been updated. I'm guessing this is something that should happen automatically as I've not managed to find much about it. Any comments/hints appreciated! Thanks, Smason79 (talk) 11:49, 29 June 2012 (UTC)

This is a caching problem, which can occur anywhere from the Wikimedia server to your own local hard drive. You can try "purging" the server image and reloading in your browser... AnonMoos (talk) 20:33, 29 June 2012 (UTC)

I should have noted that I'd tried clearing the cache in my browser and reloading. Thanks for the pointer to purge, but I'm not sure what should be purged? I tried the image page and one of the thumbnails, but neither appeared to have any effect (the purge action disappeared from the URL, so I doubt it's me mistyping and should have been recognised by the server). Smason79 (talk) 10:45, 30 June 2012 (UTC)

Just checked again and the images seem to have corrected themselves. Still unsure whether next time I should be patient or if it's a manually triggered event. Smason79 (talk) 15:31, 1 July 2012 (UTC)

To AnonMoos – From the client side, how do you signal the Wikimedia server or any other servers along the way to "purge" their images? I've sometimes waited for over a week for "the" cache to clear. All I know for sure is that it's not my client-side. Stigmatella aurantiaca (talk) 07:26, 26 July 2012 (UTC)

If you go to directly to the Wikimedia Commons image description page, on most skins there should be a "purge" link or tab, or you can add "&action=purge" / "?action=purge" (depending on context) to the URL... AnonMoos (talk) 16:58, 26 July 2012 (UTC)

Generating SVGs on the fly

Is there any way to make SVG images "on the fly" within templates? For example a template that made a circle of the radius passed to it as the first parameter, filled with the colour specified in the second parameter like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="{{{1|100}}}" cy="{{{1|100}}}" r="{{{1|100}}}" stroke="black" stroke-width="1" fill="{{{2|black}}}"/>

</svg>

If not by default, are there any workarounds that could work on other wikis for more complex examples? --xensyria^T 19:03, 7 July 2012 (UTC)

SVG Parameters http://www.w3.org/TR/SVGParamPrimer/ is what you'd want to use, but Wikipedias renderer won't properly support it. -- 02:54, 23 December 2012‎ 84.73.74.217

Thanks, I hope this is a feature they would be willing to implement in the future. --xensyria^T 03:17, 23 December 2012 (UTC)

Undesirable tinted backgrounds

SVG images in some display templates have undesirable tinted backgrounds. For example Template:Multiple images. On the German Wikipedia, standard thumbnails have this same rendering flaw. A friend of mine uploaded modified versions of two of my images to and I was upset at the rendering, so I set about to do a kludge, which I first tested out on Template:Multiple images.

For each image I added a new layer below the main layer and locked the main layer to prevent accidents. Switching to the lower layer, I added a borderless rectangle and sized it to exactly match the width and height of the image, then changed its fill color to white.

If you analyze the versions of my images on , you'll see this kludge applied. I'm sure there must be an easier alternative than an SVG expert could point out to me, but meanwhile, this kludge worked. So my question is, is there a simpler alternative to this kludge?

Thanks, Stigmatella aurantiaca (talk) 07:15, 26 July 2012 (UTC)

It would be more convenient if you could directly link to examples of images which you consider good and bad... AnonMoos (talk) 17:00, 26 July 2012 (UTC)

Kludged SVG image with extra white layer

SVG image without the kludge

Also compare Figure 2. A depiction of the concept of the "aether wind" in en:Michelson–Morley experiment versus the German-language version in . Stigmatella aurantiaca (talk) 01:10, 27 July 2012 (UTC)

One thing that could make things simpler is if I am allowed to make the white rectangle any size I want, rather than trying to be exact about not spilling over the borders of the image. Am I allowed to do that? Stigmatella aurantiaca (talk) 07:10, 27 July 2012 (UTC)

I'm afraid this is more a matter of principle here (that could be easily resolved technically though):

First of all, what you are doing Stigmatella aurantiaca, is removing transparency from those SVGs. This is very bad in my opinion. A good SVG is designed that it works on all sort of backgrounds – the transparency can be wisely chosen to improve the SVGs visual appearance. This should not be done if not totally necessary.
The downside: if the SVGs author did non consider tinted (as you are complaining) or other colored backgrounds this can lead to the appearance being not optimal (e.g. the tinted background shining through at places where it might seem inappropriate.

Now there are two possibilities:

Improve the SVG (which should be done wisely and not only by removing transparency completely for the reasons lain out above).
Resolve the issue technically here on Wikipedia by changing the templates you mentioned to show a white background by default. E.g. on English Wikipedia in article space images are given a white background by default (it's done by a simple entry in common.css if I remember correctly). The template you used above could be adjustet appropriately. On German Wikipedia the default tinted background is used though (but could be changed by CSS, too, so if you want this to be changed you'd have to tdo a request there).

--Patrick87 (talk) 14:34, 3 October 2013 (UTC)

I created a request to change Common.css to fix the lacking styling of the template you mentioned here. --Patrick87 (talk) 15:35, 3 October 2013 (UTC)

Thanks! Stigmatella aurantiaca (talk) 19:19, 3 October 2013 (UTC)

Sierpinski triangle.svg

Resolved

– User:Perhelion 01:29, 4 March 2013 (UTC)

I just uploaded a new version of File:Sierpinski_triangle.svg, but it appears the size of the svg prevents RSVG from rendering previews Beojan (talk) 16:23, 1 August 2012 (UTC)

File:AFLteamlocations.svg

Tried to convert a .png file into an .svg and then update the .svg file, but I screwed it up and I have no idea what the problem is or how to fix it. Tampabay721 (talk) 07:15, 11 August 2012 (UTC)

I reverted the file for you. You can try again. Stigmatella aurantiaca (talk) 23:58, 26 August 2012 (UTC)

Source for geographical backgrounds for maps

I am not sure this is the right place to ask this question, but just in case: I want to turn this map into SVG and I think I should have no problem with the front lines, armies, etc. However, I would like to keep the geographical background (mountain ranges, etc) as well but drawing them by hand would be too time-consuming and complex. I was wondering if you could point me to some source of SVG physical maps I could use as background for this map (and others I intend to turn into SVG as well) that fulfill all the required license requirements for use in Commons. I was thinking on something like this (assuming the background is vector and not raster). Thank you in advance!--Rowanwindwhistler (talk) 20:30, 19 August 2012 (UTC)

SVG code from an image

Hello,can someone tell me how to get the SVG code from a image? Please help, thanks. — Preceding unsigned comment added by 204.232.105.90 (talk • contribs) 26 August 2012 (UTC) [and section heading added by dcljr (talk) 01:18, 1 August 2019 (UTC)]

It took me a minute to find your question, which was concatenated to the end of Rowanwindwhistler's question and easy to overlook. Please use an appropriate topic header (i.e. ==== blah blah ====) and sign your comments.

From Inkscape, choose Edit/XML Editor...

Alternatively, if you are confident in your SVG text-editing skills, you can use any text editor, preferably one with an XML mode like Notepad++. Stigmatella aurantiaca (talk) 23:37, 26 August 2012 (UTC)

Can't Edit A SVG File on Inkscape

Hey, I'm preparing election maps right now, and I use CC Commons Licensed SVG Maps as backgrounds. But today, Inkscape doesn't let me do anything on any file. Why is this problem show up ? I always open those files as 'Embed' Files. But today, I can't even draw a line on anything on Inkscape. User:Berkaysnklf (Message), 13 October, 2012, 09:17 (UTC)

If you don't have any concrete example to point us to, you may get better results asking on an Inkscape-specific forum... -- AnonMoos (talk) 11:30, 13 October 2012 (UTC)

Need help with rendering (i.e., displaying) an SVG image generated using Inkscape

I ported a WOS II portable-based Wiki to XAMPP Lite 1.7.1. Everything works fine, with the exception of rendering SVG images. Instead of displaying the SVG images, the Wiki only displayes the following (example of one such occurrance)

The user can double-mouse-click on the http://.... directory path and the Inkscape-generated image (FO-1.svg) will be displayed, but it will not render automatically. Does anyone have any suggestions? -- 13:51, 17 December 2012‎ User:Edwardjakob

That's actually more of a Mediawiki setup and configuration question, while this is a place for people who have problems with SVG files uploaded to English Wikipedia or Wikimedia Commons. You could ask at a Wikimedia software forum. AnonMoos (talk) 16:24, 17 December 2012 (UTC)

File:Missouri_BSA_Councils.svg

File:Missouri BSA Councils.svg

I created maps for the locations of Boy Scout Councils in the Central Region in ArcGIS and exported them as SVG, but they do not render correctly in wikipedia. They render fine when viewed directly by a web browser, and appear fine in the upload preview, but when wikipedia renders them into PNG, the text becomes jumbled. I attemped to correct this problem by changing fonta and by removing the text halo, but to no avail. Problem also appears in File:Illinois_BSA_Councils.svg and File:Chicago_Area_BSA_Councils.svg.

— Preceding unsigned comment added by Ruarkr.2008 (talk • contribs) 11 January 2013 (UTC)

[US_Census_Bureau,_25+,_2005-1] "US Census Bureau, 25+, 2005". Retrieved 2006-12-08.

[1]