From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

Inkscape is a vector graphics editor application for graphically editing SVG files. It is an open source, freely downloadable application, released under the terms of the GNU General Public License. It is available on Windows, macOS, and GNU/Linux.

See also Inkscape for more information, commons:Inkscape for related media, and the official site to download.

Saving files in Inkscape

See Help:Vector graphics tutorial#Saving your work for Wikipedia for how to.

Inkscape SVG vs. Plain SVG

As well as the possibility of exporting in various formats, Inkscape allows you to save SVGs mainly in two different ways (since 0.47, you can also save as “Optimized Inkscape SVG” with Scour implemented, which is in most cases more preferred for Commons). At the drop-down box in the save dialogue, you can choose between "Inkscape SVG" and "Plain SVG". You should be aware of how these two options differ, and make an informed decision.

Advantages of uploading Inkscape images to Commons

  • Inkscape’s shape objects, such as ellipses or stars, remain editable as shapes; in plain SVG they become paths (looking the same but losing some of their editing capabilities).
  • If there are multiple objects in the document, they are only grouped if you want them to be. In plain SVG they are all grouped because each layer in an Inkscape document is represented by a group in plain SVG.
  • Other Inkscape-specific data such as the presence of a grid or guides (invisible except in Inkscape), and the option to make elements snap to the grid/guides, are saved with the file.
  • You can name nodes and assign special comments to them via <inkscape:label>, shown in >Object >Object Properties

Advantages of uploading Plain SVGs to Commons

  • No unnecessary software-specific data is saved with the file, making it smaller.
  • Inkscape SVGs created in Inkscape versions prior to 0.46 record the name of the folder in which they are saved. If this is your desktop on Windows XP, this will reveal your Windows log-on name. Plain SVGs strip this sort of personal info. (You could fix that by manually clearing sodipodi:docbase)
  • Inkscape SVGs occasionally trigger rendering bugs when used on Wikimedia projects (Wikimedia renders SVGs using librsvg).

Best practice

If it is important for you, it is possible to embed metadata, including author, full file description, license info and more. Even if someone takes your file and uses it on their website without attribution, the info will always be inside the file itself for anyone who looks at it.

Files saved as SVG by other programs (e.g. Adobe Illustrator) may have the same bugs as Inkscape SVGs. It is therefore often a good idea to open these files in Inkscape and then save them as plain SVG in order to clean out the bugs and other junk.

On the other hand, if you edit an Inkscape SVG file with another application, any Inkscape-specific labels may be lost.

Handling Inkscape SVG

If you think the file will need further editing in Inkscape, then save as an Inkscape SVG. On the other hand, saving as "Plain SVG" may lose information useful to you. You may wish to create a plain version just for uploading and keep a 'fancy' master version for your own purposes, or tag your graphic with {{Created with Inkscape|IMPORTANT=yes}} to tell it is “stored in Inkscape SVG”.

Inkscape Logo.svg
This graphic was created with Inkscapeimportant.

If you edit it with other software, and all Inkscape labels, metadata and other specific information are dismissed, then you could either upload a new version under another name (e.g., using {{AttribSVG}} or the Other versions section of {{Information}}), or you merge labels manually into the source code, such as with diff or a merge program. But that could get time-consuming after major changes have been made to the paths.

Compressed (binary) SVG, SVGZ

When saving files to your own computer, you might also want to consider saving them as Compressed Inkscape SVG (binary SVG, .svgz). Remember, however, that Commons does not support this format.

Embedding raster images

Inkscape is able to embed images (which you imported by >File >Import) in PNG format: >Effects >Images >Embed all Images. If you embed a high-resolution image, then the SVG will get quite big. On the other hand, embedded small low-resolution bitmaps can cause bad quality of the rendered PNGs as they will be scaled as any bitmap. It runs against Commons:Transition to SVG and such files are tagged {{BadSVG}}.

Tagging Inkscape files

Every SVG file uploaded to Wikimedia Commons should show
You should check the appearance and the validity before you upload the file; use the tool SVGcheck
Inkscape Logo.svg
This graphic was created with Inkscape.
for the IMPORTANT=yes option see #Handling Inkscape SVG
This graphic was created with Inkscape.
This W3C-invalid vector image was created with Inkscape.
This vector graphic was created with Inkscape-extract. See Help
Inkscape to text.svg
This vector image was created with Inkscape, and then manually edited.
Inkscape to text.svg
This vector image was created with Inkscape, and then manually edited.
Inkscape to bitmap.png
This bitmap image was downsampled from an Inkscape vectorial image, causing some loss of quality. Try asking the author for the SVG source.
This SVG was created with Inkscape.
This file was uploaded with Commonist.

→ See also: Help:SVG #Tagging SVG files, for an overview how to categorize and mark SVGs


Inkscape directs users to the tutorials included in the program (access via Help > Tutorials).

→ See also the official Inkscape Wiki. Searching for 'Inkscape tutorial' in your preferred Internet search engine, will yield many further tutorials.

Bugs and workarounds

Text font problems

If you find Wikimedia sites render your Inkscape-generated SVGs with incorrect or mangled text, please see Help:SVG #Fonts. The most likely problem is that the Wikimedia site may not support all fonts. You may find that very few fonts provided by Inkscape are in fact supported, or – in some cases – none at all. Look for a list of free fonts here, although your Inkscape may have none of them.

Some Wikimedia-supported fonts available in Inkscape 0.45:

  • Please expand this list, currently no supported free fonts are found

Some fonts available in Inkscape 0.45 that give least problems on Wikimedia sites:

  • Please expand this list with fonts that Wikimedia renders without truncation

The quick-and-dirty workaround is to convert text to paths; this makes the resulting SVG file less editable, but more likely to display correctly.

Mysterious rectangles

Mysterious rectangles (usually black) in Commons rendered PNGs are almost always due to the presence of "flowtext" elements which are not compatible with the software used on Commons. This can be diagnosed at Commons:SVG Check. The solution is to unflow all text, and to delete empty flowed text elements (though it may be difficult to locate and select such within Inkscape). The unflow command can be found under Text on the menu.

Text along a curved arc

Text laid out along a curved arc is simply omitted in Commons rendered PNGs. The quick-and-dirty workaround is to convert text to paths.

Special effects – blurring (fixed)

W3C states that SVG supports blurring effects. Inkscape version 0.46 provides blurring. The rendering program rsvg used on MediaWiki does support blurring correctly since 2016 (phab:T44090).

From invalid to valid SVG: Inkscape files

The most validating errors are not really harmful, they are simply from proprietary Inkscape/Sodipody extensions. But to make Inkscape SVG files anyway valid according to the guidelines of W3C and its validator, these steps are required and work every time:

  1. Load the SVG file into Inkscape
  2. The easiest way is to save the file simply as "Optimized Inkscape SVG" without the option to convert "CSS to XML attributes" and "Keep editor data". (In very few cases there could be other complications).
  3. Otherwise we can do it manually (not really recommended, because it is here rather a very roughly vague way)
    • a) Select all elements and then ungroup all the elements of the picture by pressing the ungroup button several times (or by pressing CTRL+SHIFT+G) till even the words are ungrouped and every object becomes a single element. (no sensible reason yet for this, except of eliminating code) But be aware, this can destroy some important structure in more complex SVG. Also Inkscape can't handle this without some strange bugs.[1]
    • b) Goto File/Vacuum Defs and run it. This will declutter the SVG file. (simply due to eliminated code)
  4. It might be that the file is still not W3C-valid. One reason could be the text in the SVG file.(reasons?) (A quick and dirty solution would be the convert the still selected text to path. But this is will be never a sensible solution from that reasoning.)
    • a) Regroup all the elements of the file by pressing the group button or by pressing CTRL+G.(reasons?)
  5. Save the file as Plain SVG (simply due remove proprietary code, there is no consensus on this). For the pros and cons on this, see section: #Inkscape SVG vs. Plain SVG.

Now you can add the templates: {{ValidSVG}} and {{made with Inkscape}}.

If this still hasn't worked, then you can open the file in a text editor (Inkscape including also an own XML editor). SVG files consist of XML code and this code can be worked upon.

External links

Further information: Help:Text and Inkscape  and Help:SVG #Fonts / text