Open main menu

Saving files in InkscapeEdit

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

Inkscape SVG vs. Plain SVGEdit

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 CommonsEdit

  • 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 CommonsEdit

  • 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 practiceEdit

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 SVGEdit

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”.

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, SVGZEdit

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 imagesEdit

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 filesEdit

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
This graphic was created with Inkscape.
for the IMPORTANT=yes option see #Handling Inkscape SVG
This vector image was created with Inkscape.
This W3C-invalid vector image was created with Inkscape.
This vector image was extracted with Inkscape
This vector image was created with Inkscape, and then manually edited.
This vector image was created with Inkscape, and then manually edited.
 
This bitmap image was downsampled from an Inkscape vectorial image, causing some loss of quality. Try asking the author for the SVG source.
This drawing was created with Inkscape.
This drawing was uploaded with Commonist.


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

TutorialsEdit

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 workaroundsEdit

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:Commons SVG Checker. 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 filesEdit

The most validating errors are not really harmful, they are simply from proprietary Inkscape/Sodipodi 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 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 linksEdit