This page uses content from Wikipedia and is licensed under CC BY-SA.

Wikipedia:SVG help

Create a new request

SVG help

Scalable vector graphics is a commonly used file format for providing a geometrical description of an image using basic objects such as labels, circles, lines, curves and polygons. An image can be reduced or enlarged to an arbitrary size, and will not suffer image data loss, nor will it become pixelated. SVG makes an excellent format for artwork, diagrams and drawings. SVG images are defined in XML text files. This means that they can be searched, indexed, scripted and, compressed. Since they are XML files, SVG images can be edited with any text editor, but SVG-based drawing programs are also available.

However, the rendering engine used by wiki is not perfect, and may cause the image to be shown incorrectly, or differently from how it is displayed in your vector editor of choice. This page enables authors experiencing problems with SVG graphics to obtain some help in getting their images into wiki the way they intend.

Things that can be helped with on this page

Understanding SVG

  • Questions about the SVG format

Using SVG appropriately

  • When to (or not to) use SVG

What you see is not what you get

  • Missing objects from files
  • Random filled boxes in the image
  • Images that are the wrong size
  • Font inconsistencies
  • Other weird and wonderful bugs

Something new

  • Questions that you can't find a better place for

Common problems

Missing objects or black boxes

Failure to convert these objects appropriately, which is often not user error, may lead to incorrect Z-ordering, phantom black boxes or missing (not rasterized) objects. If operating on a system with rsvg installed (based on the librsvg library which is used by Wikimedia to rasterize SVG files), it may be a good idea to check the image before uploading to MediaWiki servers. If black boxes still appear after converting all objects appropriately, it may be necessary to hand-edit the XML to remove the <flowroot> tags. [1] [2] The issue seems to stem from a mismatch between SVG 1.2 and SVG 1.1 behaviour, and affects several 1.1 programs, such as rsvg. The workarounds that one can employ are either not to use flowed text (by using the text tool without creating a text field), or to stroke the text using "object to path". This can subsequently (and optionally) be cleaned up using "simplify", although this has the negative side effect of smoothing your fonts, particularly at sharp corners. The positive effect of the simplify step is to significantly reduce the filesize required to describe your text components.

Font issues

Due to copyright restrictions, MediaWiki cannot use proprietary fonts that are commonly found on several proprietary operating systems. Fonts such as Geneva require licensing fees to distribute. rsvg will not be able to locate such fonts, and the text will fail to appear in the rendered image. There are three solutions to this issue:

  • One can substitute a font that is available on Wikipedia. (Facilitates editability.)
  • One can specify a generic font-family such as "sans-serif", "serif", or "monospace".
  • Or, alternatively, one can convert the text into path information in Inkscape. (Better typographical appearance.)
  • Group text, and create two copies, converting one to paths and making the other editable text layer transparent. (Compromise)

For ease of subsequent editing and significantly smaller file sizes, substituting the font with an available font is the recommended option. Many of the common fonts have non-proprietary alternatives that are somewhat similar in typographical style, resulting in minimal disruption to existing images during substitution. For a list of fonts available in Wikipedia, see available fonts on Meta.

Here are some suggested freely-distributable replacements for commonly-used proprietary fonts:

Fonts which are available on Wikimedia servers may or may not be available on a visitor's machine. If the placement or appearance of text in the image is important and there is uncertainty about which fonts are installed on a visitor's machine, then converting text into path information (as mentioned hereinbefore) may be necessary.

MediaWiki provides rasterized previews of SVG images. If those are only images needed by a visitor, then no portability issues may arise. If the visitor retrieves the SVG image to render it directly in their browser (perhaps to zoom in and see more detail than provided in MediaWiki's rasterized preview), it may not display as intended unless the referenced fonts have been installed on the visitor's machine.

Some fonts like Times and Helvetica have problems with resizing, replacing them with Liberation Serif and Liberation Sans, respectively, should fix the issue.

Missing embedded JPEG images

Normal image
Broken image

When a raster graphic is embedded in an SVG it is encoded into base64 data. That data is then assigned a MIME type in the <image> element. In the case of an embedded JPEG, the MIME type is "image/jpeg". Older versions of Inkscape (and possibly other editors) assigned the MIME type "image/jpg". While Inkscape and most web browsers will display such an SVG image just fine, the MediaWiki software that rasterizes the SVG file will have trouble with it. Not recognizing the MIME type "image/jpg" there will simply be an empty space where the image is supposed to be. The fix is to open the SVG file in a text editor, find the <image> element, locate "image/jpg", change it to "image/jpeg" and re-save. At right is an example of this problem.

CSS rules being ignored

When CSS rules are included between <style>...</style> tags, make sure that the opening tag has the attribute type="text/css" (as in <style type="text/css">...</style>). This attribute is defined in the SVG specifications, although not required by them; but some user agents (including librsvg) will not process the element without that attribute. Without the attribute, default values may be used - such as black instead of a colour.

Rendering files

MediaWiki (the software from which Wikipedia is run) uses the librsvg-library to rasterize all of its svg files. The version of the rsvg program that is installed on wiki does not always correctly raster the Inkscape or SVG files. The file manager GNOME Files relies on librsvg, so it can be used to check the quality before a SVG is uploaded.

Rendering Inkscape files

There is a simple work-around for the scarcities of librsvg. The operation "Stroke to Path", to be found under Menu>Path in Inkscape or via Ctrl+Alt+C, can be applied to all of the objects that are not rendered correctly. To keep the SVGs editable, this should only be done to the files intended for upload, and these files can be deleted afterwards.

As of February 2014, the objects that must be modified to render correctly by libsrvg include:

  • Lines with arrow heads (the arrows need to be converted)
  • Text, that has been transformed, e.g. "Text on Path"
  • Compound objects created with the binary path tools (union, intersect etc.)

Rendering SVG files SVG files may require manual modification before being uploaded to Wikipedia. To achieve this:

  • Change all fonts to Wikipedia supported fonts as mentioned before. (E.g. change "Sans embedded" to "DejaVu Sans".)
  • Add "px" to all font-size references. (E.g. change "font-size:100" to "font-size:100px".)
  • Remove all additional x coordinate references in tspan elements. (E.g. change <tspan x="17583 17917 " y="10943"> to <tspan x="17583" y="10943">.)
  • [Not required for OO 2.3.0] Explicitly colour all text (e.g. black) by replacing relevant "stroke:none;fill:none" instances with "stroke:none;fill:rgb(0,0,0)" (note that simply explicitly colouring text black in OpenOffice 3.2.1 does not appear to work).

NB: Vector graphics line widths may also need to be set explicitly in Draw.

SVG code replacement guide (executing replace all using Nedit regular expressions)
Original text Replacement text
Sans embedded DejaVu Sans
font-size:([0-9]*); font-size:\1px;
tspan x="([0-9]*) ([0-9 ]*)" tspan x="\1"
<g style="stroke:none;fill:none"><text> <g style="stroke:none;fill:rgb(0,0,0)"><text>

This SVG export procedure has been tested using OO 2.3.0 and OO 3.2.1 with a simple .odg candidate.


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

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

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

Current requests

Create a new request

File:Respiratory system be.png, File:Equatorial

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

@Einimi: This is really a matter for Wikipedia:Graphics Lab. --Redrose64 🌹 (talk) 16:46, 5 February 2018 (UTC)
The way to suggest converting PNG to SVG is to tag the files on Commons with {{Convert to SVG}}. There are already SVG versions of the first file (e.g., commons:File:Respiratory_system.svg); a better result would have been to run SVG Translate on the English SVG. Glrx (talk) 20:08, 5 February 2018 (UTC)

Poor SNG rendering

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

@Nancy clarence: I've fixed it, but it took me two goes. There were two main things that were wrong: I added the line
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
at the very start - although not required by the SVG spec, this is required by some user agents (similarly, I added the attribute version="1.1" to the <svg> tag although this is less important); second, I added the attribute type="text/css" to the <style> tag - again, not required by the SVG spec but required by some user agents. I also added newlines and indentation for clarity. --Redrose64 🌹 (talk) 10:32, 26 February 2018 (UTC)
@Redrose64: thank you very much. Is it possible to erase the early attempts to make the file history cleaner? — Preceding unsigned comment added by (talk) 10:36, 26 February 2018 (UTC)
I can't; only a Commons Administrator can do that - but I think that they would refuse, see c:Commons:Revision deletion#Revision deletion is used sparingly. --Redrose64 🌹 (talk) 11:26, 26 February 2018 (UTC)

SVG Rendering issue: c:File:Legal_situation_of_surrogacy.svg

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

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

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

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

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

I took a quick look.
The style element has been moved to the end, and that may be confusing the agent.
The SVG file is huge at 6.5 MB.
Glrx (talk) 19:22, 26 February 2018 (UTC)
Yes, certainly move the <style>...</style> element - it should really be no later than the first element that matches one of the selectors inside the <style>...</style> element. Personally I would put it between the <title>...</title> element and the <defs>...</defs> element, but it could alternatively be placed inside the <defs>...</defs> element. --Redrose64 🌹 (talk) 23:38, 26 February 2018 (UTC)
Thank you for your comments. I agree that the file size is too large. I try to save in Inkscape as "Optimized SVG". But, as you can guess, it doesn't work.
That drives me very frustrated! I don't know how to make it right. I think I should stop editing this file and make a new one from scratch with other software (Maybe Adobe Illustrator, who know).
Anyway, thank you for your time. I'm really glad your kind comments. Itpcc (talk) 12:28, 27 February 2018 (UTC)

Moving Files Over to Wikia/FANDOM

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

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

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

@NuclearVacuum: I usually ignore requests for assistance with Wikia: I object to the advertising. However, this is the same problem as #Poor SNG rendering above - the SVG source begins with an <svg> tag, specifically <svg xmlns="" height="600" viewBox="161.5 13.5 245.7 159.45503" width="900" version="1">. There's nothing wrong with that - it's valid per the SVG 1.0 spec - but some user agents won't handle it without a line of XML before that, like <?xml version="1.0" encoding="UTF-8" standalone="no"?> - of this, the standalone="no" is optional, the rest is necessary although none of it is part of the SVG spec. --Redrose64 🌹 (talk) 23:16, 17 March 2018 (UTC)
@Redrose64: Thank you for your reply. However, I don't believe the linked message is the same issue here. Another example is File:Ottawa_Senators.svg, which possesses all of the aforementioned additions you've made prior, but still becomes distorted over on Wikia.[3] Any thoughts? --NuclearVacuum (talk) 00:02, 18 March 2018 (UTC)


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

@Respublika Narodnaya: Have you tried WP:GL/I? --Redrose64 🌹 (talk) 15:52, 25 April 2018 (UTC)
@Redrose64:How to do it? Can you do it for me?--Respublika Narodnaya (talk) 15:53, 25 April 2018 (UTC)
My curiosity got the better of me.
Glrx (talk) 17:29, 25 April 2018 (UTC)
@Respublika Narodnaya: At WP:GL/I there are some tabs at the top. One of them is "Illustration workshop" which is bolded. In the same tab you should see a link like "New request". Click that. --Redrose64 🌹 (talk) 19:06, 25 April 2018 (UTC)
I think RN got it working; the file now has the "Join the proletariat..." motto. Glrx (talk) 22:01, 25 April 2018 (UTC)

Burka Ban Map

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

Rasterised version loses colour?

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

Fixed myself, can be archived. Wiki nV (talk) 13:49, 5 July 2018 (UTC)
@Wiki nV: Alternatively, you could have added the attribute type="text/css" to the <style> tag, as in
<style type="text/css">.cls-1 {
        fill: #174b97;
It's not required by the SVG spec, but some user agents won't process the <style>...</style> element without it. --Redrose64 🌹 (talk) 15:32, 5 July 2018 (UTC)
@Redrose64: Roger that, noted for next time. Cheerio. Wiki nV (talk) 16:28, 5 July 2018 (UTC)

Problem with my svg image colors

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

@New in site: It's never a good idea to use w3schools for advice. It's not always accurate, and they have a habit of implying that proposed features are widely recognised. var(...) is not a feature of SVG, it is part of CSS Custom Properties for Cascading Variables Module Level 1 which is a W3C Candidate Recommendation, therefore not a formal standard, therefore it is something that user agents need not follow. We use librsvg to convert SVG files to PNG, and you should not use any feature that is not explicitly described in either the SVG 1.1 specification or in the CSS 2 spec. --Redrose64 🌹 (talk) 08:08, 11 August 2018 (UTC)
@New in site: just replace:
  • var(--aaa) -> #385E0F
  • var(--aa) -> #6E8B3D
  • var(--a) -> #BEE554
  • var(--bbb) -> #FFC125
  • var(--bb) -> #FF8600
  • var(--b) -> #E04006
  • var(--ccc) -> #802A2A
  • var(--sd) -> #000000
  • var(--nr) -> #999999
However please check your source-code in line 2049 ' id='ma'/> without any tag except <svg> around it, there might be something broken.
JoKalliauer (talk) 09:27, 12 August 2018 (UTC)

File:LaredoBucksLogo.svg and File:WichitaFallsForceLogo.svg

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

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

SVG slightly cut off

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

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

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

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

The first one is actually cut off on both sides, but it's more obvious on the right. This can happen if you have a circle whose radius has a value approaching half of the available width. Remember that the stroke (by which the outline of the circle is made visible) has a width, which means that if you have a circle of radius 50px and a stroke of width 1px, the containing box must be at least 101px wide otherwise the sides of the circle will be clipped.
Another possibility is that InkScape is using some non-standard feature that it knows how to handle, but which is unrecognised by librsvg. See my reply of 08:08, 11 August 2018 (UTC) above. --Redrose64 🌹 (talk) 14:51, 2 September 2018 (UTC)

Font Issue...


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

Can you please help ?

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

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

New color

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

Forget about PNG, for a start. Whilst it is a comparatively simple task to convert a SVG to a PNG (librsvg does this all the time), the reverse conversion is difficult. If you want to alter the colours in an existing SVG, edit that using either an application which knows about SVG - such as InkScape - or use a plain text editor like MS WordPad or MS Notepad.
The image being File:UEFA Euro 1976 official logo.svg, you would go to that page, click the Original file link (or click the image itself) and use your browser's "Save as" feature to save it somewhere on your computer. Then open the saved copy in WordPad (or whatever you choose to use), look for each instance of the "wrong" blue - almost certainly the value #0505ff in attributes like fill="#0505ff" - and alter this value to whatever you decided was the correct value (use "Search and replace" with "Replace all" to do them quickly). Save it, and use the Upload a new version of this file feature found on the file description page. --Redrose64 🌹 (talk) 08:24, 1 October 2018 (UTC)
@Redrose64: Thank you for helping. I just wonder if I can make SVG image files for the Euro 1960, 1968, and 1984 logos because the logos (flags) are in different ways, like in UEFA sites of 1960, 1968, and 1984. What should I do? Should I upload PNG images I made instead? – Flix11 (talk) 10:57, 1 October 2018 (UTC)
I don't understand the question "I just wonder if I can make SVG image files ..." - these three are already in SVG format. If SVG is available, that is to be preferred over PNG because SVG are infinitely scalable and compress much better for the web. --Redrose64 🌹 (talk) 21:02, 1 October 2018 (UTC)
I think Flix11 is pointing out that WP's SVGs differ from the images he's linked. There's a left-to-right versus top-to-bottom color issue, and presence/absence of a stripe. Presumably, Brands of the World had a legit source for the SVG, but the link I checked was not archived. Glrx (talk) 21:17, 1 October 2018 (UTC)
@Redrose64:, @Glrx: Correct, they are from history section. Should I change (if so, teach me how to do so) or not? – Flix11 (talk) 15:28, 5 October 2018 (UTC)
@Flix11:, if you can install and run en:Inkscape, [] has a tutorial on converting a bitmap to an SVG. Cheers, cmɢʟeeτaʟκ 20:39, 6 October 2018 (UTC)

Maldivian Cinema svg file


I tried to create a file for Maldivian Cinema using;

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

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

Hi ShappeAli,
I've uploaded File:Clapperboard_Maldives.svg as requested and added instructions in the SVG to create other similar icons:
    Replace the lines between the first "->" and "<!-" below with
    lines between <svg ... height="..."> and </svg> in the flag SVG
    file. You may need to change the numbers in the above scale(...)
    denoting horizontal and vertical scale, so that the flag fits.
cmɢʟeeτaʟκ 20:35, 6 October 2018 (UTC)
Thank you so much! ShappeAli (talk) 04:12, 7 October 2018 (UTC)

[librsvgbug] RadialGradients incorrectly rendered in thumbnail

Bubbles are broken

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

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

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

@Cmglee: since it works on Commons:Commons_SVG_Checker. Therefore testing needs new uploads. Hence it might be difficult to find the issue. Anyway now it should be repaired now.  Done JoKalliauer (talk) 22:06, 6 October 2018 (UTC)
Thank you very much, JoKalliauer. Could you briefly describe what you did to fix it, and if possible, what you think the problem was? Thanks, cmɢʟeeτaʟκ 23:02, 6 October 2018 (UTC)
To be honest, I started scripts without thinking: [] Which uses 1)Scour, 2)[] 3)[] 4)Inkscape (--verb=SelectionUnGroup) 5)a self-written-script that repairs librsvgbugs
To be honest, I didn't expect it to work, since this bug seems not to be familiar to me.
I will take a look at it and upload it to File:Test.svg.
 — Johannes Kalliauer - contrib. 07:00, 7 October 2018 (UTC)
@Cmglee: I ungrouped it in Inkscape.  — Johannes Kalliauer - contrib. 08:10, 7 October 2018 (UTC)
Thanks, Johannes Kalliauer. I'll check it again next time I update the diagram. cmɢʟeeτaʟκ 17:18, 7 October 2018 (UTC)


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

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

It seems to be white; when I display it against a dark-coloured background, the background does not show through. --Redrose64 🌹 (talk) 14:36, 12 October 2018 (UTC)
I also can not replicate the issue. @TheBigJagielka:, are you still seeing the transparency? If so, more information about what you are looking at the file with would be helpful. --AntiCompositeNumber (talk) 14:59, 12 October 2018 (UTC)
Apologies, I've been an idiot. The cached image in my browser was still displaying. TheBigJagielka (talk) 19:51, 12 October 2018 (UTC)