Help:Inkscape

From Wikimedia Commons, the free media repository
(Redirected from Help:SVG/basic3)
Jump to navigation Jump to search
Translate this page
Other languages:

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 on Wikipedia for more information, commons:Inkscape for related media, and the official site to download.

Saving files in Inkscape

[edit]

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

Inkscape SVG vs. Plain SVG

[edit]

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

[edit]
  • Inkscape's shape objects, such as ellipses or stars, remain editable as shapes; in plain SVG they become paths (looking the same but losing their special 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

[edit]
  • No unnecessary software-specific data is saved with the file, making it smaller.
  • Inkscape SVGs occasionally trigger rendering bugs when used on Wikimedia projects (Wikimedia renders SVGs using librsvg).

Best practice

[edit]

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

[edit]

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 }} or {{ Image generation | Im | + | s =   }} to tell it is "stored in Inkscape SVG".

 
This …important was created with Inkscape…important .


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 {{Attrib}} or the Other versions section of {{Information}}), or you merge labels manually into the source code, such as with diff utility or a merge program. But that could get time-consuming after major changes have been made to the paths.

Compressed (binary) SVG, SVGZ

[edit]

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

[edit]

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

Enabling inline attributes

[edit]

Inkscape is able to configured to put all attribute on the same line as the element tag, you can enable it by checking "Inline attributes" from its Preferences (>Edit >Preferences >Input/Output >SVG output). This option will effectively reduce file size for some complex files even if you save as Inkscape SVG.


Tagging Inkscape files

[edit]
Every SVG file uploaded to Wikimedia Commons should show
set the appropriate parameter of the template, e.g. {{Image generation}} (short: {{Igen}}) or {{Fgd}}
You should check the appearance and the validity before you upload a new file: use the tool Commons SVG Checker.
Further detailled information can be found at Commons talk:SVG marker templates and Commons:SVG marker templates.
 
This image was created with Inkscape .


for the IMPORTANT=yes option see Handling Inkscape SVG
 
This vector image was created with Inkscape by v .


 
This W3C-invalid vector image was created with Inkscape .


 
This vector image was extracted with Inkscape by v.


 
This vector image was created with Inkscape, and then manually edited
.


W3CiThe source code of this SVG is valid.
 
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

Tutorials

[edit]

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

[edit]

Text font problems

[edit]

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

[edit]

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

[edit]

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.

From invalid to valid SVG: Inkscape files

[edit]

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 below is an outline of the approach rather than a complete step-by-step solution).
    • 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]
    • Go to 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 to 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 this section.

Now you can add the template {{ValidSVG}}.

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

[edit]
Further information: Help:Text and Inkscape and Help:SVG#Fonts, text
Retrieved from "https://commons.wikimedia.org/w/index.php?title=Help:Inkscape&oldid=949552980#From_invalid_to_valid_SVG:_Inkscape-files"