Help:SVG

From Wikimedia Commons, the free media repository
(Redirected from Commons:SVG)
Jump to: navigation, search
This page in other languages:

English | español | français | português | +/−

Official logo for the SVG file format

SVG (scalable vector graphics) is an accepted file format on Wikimedia Commons. It is suited to diagrams, maps, and other non-photographic images. SVG is highly appreciated on commons because it describes graphical objects with a sourcecode and thus provides the best way to modify and improve content.

SVG files are used quite extensively on Wikimedia Commons. Here are a few tips to get started.

What is SVG?[edit]

An example of an SVG image

Scalable vector graphics (SVG) is an XML specification and file format for describing two-dimensional vector graphics, both static and animated. It is stored plain-text or compressed (binary). It allows embedding of raster graphics (bitmaps) and text.

See:

(…)

Creating SVG images for Wikimedia Commons[edit]

Programs you can use to create SVG images are shown in #General editors hereafter. Alternatively you can edit the SVG code directly with a text editor, or IDE.

The following sections explain specific features of SVG.

SVG document declaration[edit]

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300"
viewBox="0 0 400 300"
>

The source code of every SVG file should begin with the basic information of its dimension and namespace. Document type declaration or DOCTYPE is entirely unnecessary. W3 insists that character encoding declaration is essential, but its validator does not. The validator will only warn (instead of reporting an "error") for its absence and this has little to no consequence even if the SVG file contains any non-English character. The actual important thing of character encoding is that the software which you create or edit the SVG file with should provide the option of choosing character encoding. UTF-8 is highly recommended for internationalization, but avoid "preamble/byte-order mark (BOM)" due to bad compatibility with older applications.

Inside the SVG element, width, height and namespace attributes are required. Add viewBox attribute if you want to change the scale and position of the image. Of all XML namespaces, xmlns="http://www.w3.org/2000/svg" should at least be present, otherwise the SVG will not be rendered at all. If you have used the linking function in your SVG, xmlns:xlink="http://www.w3.org/1999/xlink" must be included too to enable it.

Bitmaps[edit]

There are some valuable uses of bitmap images within SVG files, such as annotating a photograph (e.g., an anatomical photography, labeling parts). However, many uses of bitmaps in SVG files are not necessary, such as for decorative embellishments, and bitmaps are often better converted or redrawn as SVG files. Bitmaps should be included if this is the best solution, but redrawn if this yields a better image. Further, use of bitmaps in SVG files may be labeled as {{BadSVG}}.

Please think carefully about using bitmaps in SVG files, and consider converting it or redrawing it as an SVG file when incorporating it, rather than including a bitmap directly. See talk page for further discussion. If you decide to use a bitmap image, please be sure to embedd and not to link the image; otherwise it won't be rendered.

Animation[edit]

SVG images can have animation built in with SMIL, but because the .svg is converted to .png for use in Wikimedia projects, the animated SVG file is only visible from the image page.

See #Tagging SVG files for how to mark it animated.

Scripting[edit]

MediaWiki does not accept SVG files containing scripts.

External files[edit]

Before saving the final version, make sure you delete any references to other files you used to make the SVG; if these references are left behind, then the render is unlikely to be able to find the external file and will fail.

Tidying up[edit]

It's also a good idea to remove or “vacuum” any unused definitions (defs), as this can result in a smaller file size. Scour is an open source Python script that cleans and optimizes SVG files. There's even an online version (currently, november 2011, not available) so there's nothing to download. It has integrated in Inkscape as of version 0.47; you can use it by saving as “Optimized SVG (*.svg)”.

Plain SVG, compressed SVG, generic specifications[edit]

It is generally better to save in “plain SVG” format. Usually this appears in the program's Save As dialog box as an alternative format (as opposed to just “SVG”, which might be program's own version of SVG). This is for reasons of compatibility, amongst other things.

In Adobe Illustrator or Inkscape (especially Illustrator) the default file format includes information (such as user preferences) that is not needed in uploaded files. This increases the file size unnecessarily and sometimes causes thumbnails to not render properly. (See bugzilla:2888)

On the other hand, saving as “plain SVG” may lose information useful to you. In Inkscape, for example, it removes layer information. You may wish to create a plain version just for uploading and keep a ‘fancy’ master version for your own purposes, or tag with {{Created with Inkscape|IMPORTANT=yes}}. See Help:Inkscape for more.

Inkscape and other programs also allow to save SVGZ (compressed binary SVG), which is not supported on Commons.

Fonts / text[edit]

Only some fonts can be rendered in the <text> tag. You can find a list here. Note that some fonts are not available in Regular style, only Bold and others; consider alternatives like Liberation. Please do consider using these fonts and not converting fonts to path for these reasons:

  • This greatly reduces the file size, particularly when there are large amounts of text. (Which would also reduce the cost of load and rendering time for all.)
  • Any spelling errors etc. can be fixed without having to redraw the entire text.
  • Text can be easily translated, which is important since Commons is a multilingual project. See also Template: Translation possible.
  • Text can be searched with search engines easily, which may not recognise outlines unless with advanced technology.

To hint to a problematic SVG file you can tag this with {{Path text SVG}} or for linking modifiable and non-modifiable versions of an SVG file use {{Vector text versions|…}}.

Flowed Text bug[edit]

Text in Inkscape by default uses a Flowed Text (SVG 1.2) box which can result in problems, it will likely not render at all or render as a (‘large’ full filled ‘black’) rectangle (Bugzilla:41424 – depending on font size and color). To fix this, simply use the ‹Convert To Text› command in the Inkscape Text menu.

Alternatively, before typing the text, first select the text tool and with the mouse click without dragging on the canvas where you wish the text to begin.

Empty Flowed Text Boxes will also appear black, although they are hidden in Inkscape. To remove them, go to the XML Editor in the Edit menu. Delete the elements that are named as following: <svg:flowRoot id="flowRootXXXX">.

Text transform limitations[edit]

Font scaling currently does not work as expected if horizontal and vertical scales (according to the effective transform matrix) are not equal (the horizontal stretch will be ignored: only the font height, computed from the matrix is currently honored); this can prevent the correct rendering in narrow/condensed or width-extended styles from another font, with text taking unexpected width and flowing out of the expected box (the alternative is to select an alternate free font family which is already narrowed/condensed).

Beware also with font metrics differences: an SVG file may look good when rendered directly in a SVG-capable (all modern) browser under Windows or Mac OS (which can use common, but non free fonts such as Courier or Courier New), but will look wrong when restricted to the list of free fonts currently supported by the MediaWiki's SVG-to-PNG renderer or when viewed under OSes like free distributions of Linux.

Writing mode limitation[edit]

A diagram in Chinese which could benefit from the top-to-bottom writing mode but turns out not quite right in librsvg…

Unlike Inkscape and Adobe Illustrator, librsvg used by Wikimedia and some browser fail to support the writing-mode property properly. When this property is given any non-default (left-to-right writing mode) value, all characters will clump together in librsvg (Bugzilla:63236) or the property is simply ignored in Mozilla Firefox. If the alternative writing mode is still desired (e.g. top-to-bottom mode for Asian languages), align all characters separately instead of relying on this property.

Fallback fonts[edit]

When the Arial font is found in an SVG file, the Liberation Sans font is currently (February 10, 2011) being used instead of Arial for generating the PNG files. See the following File: ArialSubstitutionTest.svg for test results. To future proof the SVG file in case Wikimedia changes the Arial substitution font, change all occurrences of ‘font-family: Arial’ to ‘font-family: Liberation Sans, Arial, sans-serif’ (leave out the quotes). Adding Arial and sans-serif as fallback fonts will help the SVG version of the file be displayed properly on machines that do not have the Liberation Sans font installed. Some other fonts are also interpreted, such as the Times New Roman font, which is interpreted as the current default font Liberation Serif.

If you are using non-Western characters, you should define those typefaces preceding Liberation Sans. For example, if your text contains Chinese characters, font-family definition should be: ‘WenQuanYi Zen Hei, SimHei, Liberation Sans, Arial, sans-serif’.

Inkscape v .48 does not support fallback fonts, so the SVG file has to be manually updated in a text editor after it is saved.

Layout with text and tspan elements[edit]

Although you can use only the text element to render simple text in the image, the tspan element can be extremely useful to handle text which requires lot of intricate text layouts.[1] A tspan element must be nested within the text element, all styling defined in the parent text element will be inherited by its child tspan.

The primarily difference with the "g nesting text" structure is that few important text layout behaviors are exclusive to tspan: When multiple text elements are lined up consecutively, they still position themselves independently; if multiple tspan elements are lined up consecutively but the second and subsequent tspan elements are not given absolute x coordinate, text of these tspan elements will line up horizontally right next to the end of the character of prior tspan in the same text element. Even if you are going to give every text item absolute position, it is still recommended to render the text with same or similar style with tspan and group them in the text element, this will give you more control in case relative positioning is needed. You can, however, nest the text and tspan elements with g (but not nesting tspan with g or another text inside text, which does not work) and define the common styling in this g element, the child text and tspan elements will inherit the styling as well. Also a tspan can contain another tspan.

Note that SVG (as of version 1.1) does not provide any form of line wrap (either hard or soft). Any line wrap should be done manually by repositioning new text or tspan elements with the same absolute x coordinate and a new y coordinate. For tspan this can be easier organized by using relative positioning with dy property. Although textPath can handle the similar situation,[2] this element is not supported by librsvg/Wikimedia (Bugzilla:9420).

Line breaks

Another SVG text rendering behavior worth noting is that under the default xml:space definition, any line break (within text or tspan) with an extra trailing white-space is converted to a blank space character automatically.[3] If there happens to be multiple consecutive line breaks, they are treated as one space still. This would not be a problem if the line break is followed by a tspan element with absolute x coordinate. If xml:space is given the 'preserve' value, librsvg will translate the indent to a long white tab character equal to 8 space characters. Because the auto-formatting or re-indentation (indent style) of most XML editors creates indent for every new descendant XML tag automatically, so use re-indentation carefully if your SVG file contains such usage of tspan.

Note: The behaviors in different SVG renderers to this issue varies much and is usually inconsistent to the W3C specification (also the 'preserve' value of xml:space will be deprecated in SVG 2.[4]). The only problem with librsvg is that it never converts the line break alone into space no matter which value of xml:space is given if there is no trailing space or indent before the tspan tag.[5] Except for librsvg, nearly all modern browsers always add the converted space character right after the preceding text, this is the reason why the end or middle values of text-anchor property always align the text 1 space leftward because the new line and/or the trailing tab or space after the closing tspan tag is converted to an unexpected space character.[6]

Re-indentation XML Code Result
Before

<text>
<tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>

One
After

<text>
 <tspan>O</tspan>
 <tspan>n</tspan>
 <tspan>e</tspan>
</text>

O n e

Inkscape is buggy to render tspan, for example, inheriting text-anchor property from the first tspan element incorrectly for the subsequent tspan elements even if the property is specifically given a value in all tspan elements.[7] The only way to redeem it is group tspan with the same text-anchor value within the same text element and refrain from applying text-anchor in tspan. This fix is entirely cosmetic for appearance in Inkscape. Ignore this issue and use tspan as you please if you are not going to open or edit the SVG file in Inkscape.

Font styling class[edit]

To ease the process of updating font family for every text or tspan elements, define the font CSS class(es) within style element and apply the class property in elements like this:

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- General font styling-->
.small {font-size:9px}
.special {fill:#f93500; font-weight:bold}
.title {font-size:14px; font-weight:bold; font-family:Liberation Serif, Times New Roman, serif}
.italic {font-style:italic}
</style>
<text class="title" x="10" y="20">Qridfs</text>
<text x="10" y="30">Rfnkl fgkj qljf fgk gskla</text>
<text class="small">
 <tspan x="15" y="40">Dfj fdmnkl</tspan>
 <tspan x="15" dy="12" class="italic">Akgfld fkdngf mna</tspan>
</text>
<text class="special" x="10" y="60">Tcjgh xlij qpfj</text>

Even if one particularly style is defined once in the SVG, it is still best advised to replace the style with class for a tidier layout of XML codes. All in all, it is also good to use SVG groups instead of CSS classes (these can also produce a smaller code by lesser librsvg limitation).

Note: Bugzilla:41423 – CSS child selectors are not supported by librsvg.

Text with background edge[edit]

Text background edge.svg

Sometimes the text might be unreadable because the background color has low contrast with the font color or the pattern is too complicated that confuses the reader. This can be solved by duplicating the text in the exact same position, but the back text rendered with stroke and the fore text without it like this:

<text style="font-size:12px">
  <tspan x="10" y="20" style="stroke:white; stroke-width:3px; stroke-linejoin:round">Placeholder</tspan>
  <tspan x="10" y="20">Placeholder</tspan>
</text>
  • "stroke-linejoin:round" is defined to avoid sharp corner of the text stroke.

The problem by applying stroke and fill in the same text element is that the stroke will be rendered over the main body of text, making it otherwise unreadable if the font is too small but requires larger stroke to be distinguishable from the background.

If you have lot of text needs to be rendered with stroke background, include the text within <g>, <text> and <tspan> elements. The <g> element which will be rendered underneath, apply the stroke, then <use> the text group of <text> element without stroke and fill the font with contrasting color:

<g style="stroke:white; stroke-width:3px; stroke-linejoin:round">
 <text id="text_group" style="font-size:12px">
  <tspan x="10" y="80">Placeholder 1</tspan>
  <tspan x="10" y="95">Placeholder 2</tspan>
 </text>
</g>
<use xlink:href="#text_group" style="fill:black; stroke:none"/>

W3C confirmed to include paint-order property in SVG 2.0 which allows the order to render the attributes of "fill", "stroke" and "markers" within one element arranged by the user manually, instead of following the default mandatory order.[8] Mozilla Firefox also includes this attribute experimentally but it defaults to disable in the stable release until SVG 2.0 matures. This feature can be enabled in the about:config entries of Firefox.[9]

Gradients[edit]

Users of Inkscape version 0.46 may notice that images with “Fill gradients” display perfectly on Inkscape, but display “messed up” in Opera or Firefox browsers. One possible cause is that the last “stop” on a gradient has opacity set to 0. Inkscape appears to ignore this last stop, but both Firefox 3.0.6 and Opera 9.36 will render it as a white border in the filled object. Solutions are either remove the last stop (because it was probably created in error) or change the opacity (and colour) so that the image renders correctly in browsers.

Users of Adobe Illustrator CS5, CS6, or CC and who also use Firefox may notice that an Illustrator "symbol" containing a gradient will render normally as a Commons PNG file but if the SVG file itself is opened in Firefox these symbols will appear vacant. Other browsers will have no difficulty— Google Chrome, even Internet Explorer will render Illustrator's SVG symbol gradients correctly, but because of a known bug that the designers of Firefox have been aware of since 2005 (Mozilla's Bugzilla #376027 and other reports that lead to it such as #353575) but have so far failed to adequately fix, Firefox will display such symbols as empty shapes (symbol strokes and symbol paths without gradients are unaffected).

Blurring[edit]

Comparison of gaussian blur filter effect between Google Chrome and Wikimedia. (Source SVG file)

Wikimedia's SVG renderer currently supports various filter effects, but some effects such as gaussian blur (feGaussianBlur) behaves differently when the blurred object exceeds the edge of the actual image. The current version of RSVG will treat the cropped edge as the actual edge of the object to apply the effect (as if the object has applied clipPath before applying filter effect), creating undesirable filter effect against the image edge.

Validation[edit]

You may wish to put the file through the SVG validator (validator.w3.org) before you upload. This can tell you about possible problems in your SVG file. Unfortunately this validator cannot handle RDF or other metadata, should you wish to include it, but it can still find errors in your SVG. It also wanted a Doctype declaration, which is not a requirement in SVG and may actually cause problems.[10][11]

See #Tagging SVG files for how to mark it validated.

Converting to SVG[edit]

Given an image file that is in a format other than SVG, there are various ways to convert it to SVG; see #Converters below for programs. See Commons:Transition to SVG for general considerations on transitioning a file to SVG.

Generally, there are 3 ways to produce an SVG file, given an existing image:

  1. Regenerate it
  2. Convert it
  3. Create a new one

If you are unable to convert an image yourself, please add the tag {{convert to SVG}} to flag that the image should be converted. Some images are not well-suited to SVG, notably continuous-tone images such as photographs. These generally should instead be stored as JPG.

Regenerate it[edit]

If the image was generated by a program (rather than drawn by hand) — for example, a chart from a spreadsheet — it may be possible to set the output format to SVG, rather than PNG or other format, and thus produce an SVG image from the same source. If possible, this is generally easiest.

Convert it[edit]

Many vector file formats can be easily be converted to SVG simply by changing the format (repackaging the existing data), by using a converter program. This may be as simple as opening the file in a vector image editor and then saving it in SVG.

For raster (bitmap) graphics, this cannot be done because the image is a set of individual pixel values, not a set of strokes (vectors). For these images (notably PNG images), one can convert to SVG via "vectorization" or “tracing” — automatically generating a vector graphic from a raster image.

Many SVG editors have tracing functions, and dedicated converters exist. In Inkscape, this is done by the potrace program.[12][13] Concretely: open the bitmap (File → Open… (Ctrl-O)), then select Path → Trace Bitmap… (Shift-Alt-B). There are various options; after using, please delete the underlying bitmap, and consider simplifying the path to reduce the number of nodes (Ctrl-L).

Adobe Illustrator also allows for the conversion of bitmap images into vectors via its Image Trace function. Care must be taken when doing so that the resulting vector image is neither ponderously large (often the result of too much conversion fidelity with regard to color and shape) nor so simple that it loses faithfulness to the original image. Converted images almost always require some manual correction after conversion. As in Inkscape, the underlying bitmap should be removed after conversion is complete.

It should also be noted that when Illustrator converts one of its files into an SVG file, it tends to convert a number of shading effects such as "inner glow", "outer glow", and gradients applied along or across a path into undesirable raster images which it then embeds in the SVG image using links. Such embedded images can often be immediately detected by viewing the image in a web browser under high zoom where they will appear cloudy or have visibly jagged edges (neither of which is ever true of a correctly rendered vector image). Adobe does not currently have a solution to this problem.

Create a new one[edit]

If an image cannot be regenerated or converted, the remaining option is to recreate it — draw a new SVG image, using the existing image as a model. This is manual and the most time-consuming option, but may ultimately yield the highest quality.

In all cases, it may prove useful to touch up the resulting image in an SVG editor — perhaps adding details which are hard or impossible to produce in the originating program, or simplifying or refining a complex conversion (such as simplifying a path described by 100 points to one described by 5 points, if extra points add unnecessary detail).

Once you have created an SVG image, upload it (under a new name), and tag the original raster image with {{vector version available}}, but please do not delete the raster image or list it for deletion, as it still serves some purposes — see Commons:Superseded images policy for details.

Uploading & categorizing[edit]

Diamond-caution.svg
Every SVG file uploaded to Wikimedia Commons should show
  • how it was made: use template {{Inkscape}}, {{Adobe}}, {{HandSVG}} or whatsever
  • whether it is W3C valid or invalid: set the appropriate parameter to the template, e.g. {{Inkscape|v}}
You should check the appearance and the validity before you upload the file; use the tool SVGcheck
If you are not sure or want to see first how librsvg will render your file, upload it to Test.svg

Image description pages[edit]

Uploading is described at Commons:First steps/Upload form.

Make sure to fill out the {{information}} box as fully as you can. Often, it's a help when an image has a complete information box as this makes categorization by others easier and allows others to make translations.

If your file has passed the SVG Validator, you can put the {{validSVG}} tag on the image page.

See the #SVG software tags section for detailed information on a SVG media.

Categorizing SVG files[edit]

All SVG graphics should be sorted into the appropriate subcategory or subcategories of Category:SVG. Please do not place images directly in the parent category as it will become overcrowded and useless (we have thousands and thousands of more than 100,000 SVG files).

Sort subcategories which rely not on subject but on technical aspects (“created with…”, “animated”, “valid”, and so on) by '*' to keep them outside the alphabet listing.

The SVG categories tree[edit]

The main tree is Category:SVG, as a part of Category:ImagesCategory:Media types.

Concerning topical subcategories, it is not needful to rebuild the complete hierarchy tree of Category:Topics. Normally, it is enough to gather some topics to one. For instance, Category:SVG colors could contain all color-related SVG files of Category:Colors, its no use to build Category:SVG red, Category:SVG blue and so on. Maybe some subcategories will become useful later, but stay close to our existing topics tree, and do not put any SVG files only into a SVG category: Categories are primarily for finding media, not for hiding them. Do not over-categorize, so do not sort into a category for finding it, and the direct SVG subcategory for classifying, but maybe put your black colour box SVG file into Category:SVG colors and Category:Black.

See Commons:Categories for general information.

Category naming conventions[edit]

Category names start with “SVG” followed by the topic in lowercase (unless it's a proper noun). For example, a category containing SVG files related to chemistry would be called Category:SVG chemistry. There was no naming convention for a long time, thus you may see titles that do not match this format. These will be converted over time.

Tagging SVG files[edit]

See Category:SVG marker templates for all SVG markers available.
Transcluded from Commons:SVG marker templates

SVG software tags[edit]

For the software used (Category:SVG graphics by software used):

Adobe Illustrator Icon (CS6).svg
This vector graphics image was created with Adobe Illustrator.
Bin2svg icon.svg
This matrix was created with bin2svg.
This vector graphics image was created with CorelDRAW.
This diagram, document, or vector graphics image was created with Dia.
BJT NPN symbol (case, unlabelled).svg
This SVG electrical schematic was created with the electrical symbols library.svg.
  • {{Fig2SVG}}, does not sort by now (May 2008)
Gnome-mime-image-x-xfig.png
This SVG vector image was created with Xfig and a Fig to SVG conversion tool.
Lissajous small.svg
This vector image was created with gnuplot.
Notepad icon small.svg
This vector image was created with a text editor. Its source code might contain additional information or higher level semantics of the topic.
Inkscape Logo.svg
This vector image was created with Inkscape.
Inkscape to text.svg
This vector image was created with Inkscape, and then manually edited.
Metapost-icon.svg
This vector image was created with MetaPost. For MetaPost source code please see below.
OpenOffice.org 2 icon.svg
This file was created with OpenOffice.org.
Sodipodi-logo squirrel.svg
This vector image was created with Sodipodi-Inkscape.
Scribus logo.png
This typeset document or vector graphics image was created with Scribus.

See #Software section for a list of programs.

SVG file type tags[edit]

SVG in SVG.svg This vector image includes elements that have been taken or adapted from this: [[:File:|]] .

W3C The source code of this SVG is valid.



Runner-animated-svg.svg This image is an animated SVG file. The animation uses SMIL. The .png preview above created by RSVG is not animated and may be incomplete or incorrect. To see an animation run, open it in an SVG animation capable browser or viewer, such as Opera (8+), Safari (4+), Chrome (2+), or Firefox (4+). Internet Explorer (9+) supports SVG, but not SMIL. Other SVG animations can be found at Category:Animated SVG.

العربية | Boarisch | català | Deutsch | Deutsch (Sie-Form)‎ | English | español | فارسی | suomi | français | עברית | हिन्दी | magyar | Հայերեն | íslenska | italiano | 日本語 | lietuvių | македонски | മലയാളം | Plattdüütsch | Nederlands | occitan | português | português do Brasil | русский | українська | 中文 | 中文(简体)‎ | 中文(繁體)‎ | +/−

.


  • SVG files containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{scripted SVG}}.
Cog-scripted-svg.svg This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities open it in your browser.

العربية | Deutsch | Deutsch (Sie-Form)‎ | English | فارسی | magyar | italiano | македонски | Nederlands | polski | português | русский | 中文(台灣)‎ | +/−

SVG conversion tags[edit]

Converted to SVG.svg All images in this gallery could be recreated using vector graphics as an SVG file. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is already available, please upload it. After uploading an SVG, replace this template with {{vector version available|new image name.svg}}.

  • To indicate that you are currently working on a vector version of a raster image you can tag it with {{Vector wip|1=~~~|time=~~~~~}}.

  • For SVG files using embedded bitmaps causing bad quality, use {{BadSVG}} and for rasters that have been superseded by a SVG file, use {{vector version available|File name.svg}}


The file size of this SVG image is irrationally large because most of its text has been converted to path rather than using the more conventional <text> element. Unless rendering text of the SVG file is incurably unreadable due to technical limitations, it is highly recommended to revert the text from path. By doing so will ease the process for localizing this image to other languages and greatly reduce the file size. Other SVG containing path-based text can be found at Category:Path text SVG. For more information, see SVG: Fonts and Preparing images for upload: Text.

Deutsch | English | magyar | македонски | 中文(简体)‎ | 中文(繁體)‎ | +/−


Mime bmp.png A bitmap version of this image is available.
It should be used in place of this vector image when superior.


File:SVG Gnome-go-next.svg [[:]]

For more information about bitmap & vector graphics, read about Commons transition to SVG.


Boarisch | Česky | Deutsch | English | Español | فارسی | Suomi | Français | עברית | Italiano | Македонски | Plattdüütsch | Nederlands | Português | Русский | Slovenščina | Svenska | Türkçe | +/−


Rendering bug.svg Sorry, MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.

File:SVG Gnome-go-next.svg [[:]]

Deutsch | English | Español | Italiano | 한국어 | Македонски | Русский | 中文 | 中文(简体)‎ | 中文(繁體)‎ | +/−

SVG files in MediaWiki[edit]

How SVG files work in MediaWiki[edit]

When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG thumbnails, embedded in the articles and the description page. If you download the image (usually by right mouse clicking on the image), you will get the PNG image. If you want the SVG file you must save the link to the image instead of the image itself. This works (by right mouse clicking on the link under the image) only on the description page of the image, not on the thumbnail in the category page.

MediaWiki uses librsvg to convert SVG files to PNG files for display (SVG rendering), it has some long and well-known bugs that should be fixed, so you might want to check your file with that program before uploading. The rsvg-view can be used on Unix systems to preview how SVG files will look when rendered by MediaWiki. For accurately testing the display you can also test the SVG on using SVG Check (direct link).

Further information: MediaWiki SVG limitations.

Scaling SVG files via MediaWiki[edit]

What this means: Say you want to produce a large version of your SVG for detailed maps, or using in-bitmap software like gimp, or calligraphy printed out one character per page, or something like that. You need to force MediaWiki to produce a huge PNG thumbnail, by using http://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000 or by doing something like [[Image:Foo.svg|1000px]] in the sandbox or your talk page or somewhere else unimportant. Printing this giant PNG will look much better than if you try to scale up one of the default thumbnails! Of course, you can also use for-printing SVG software like Inkscape but sometimes that shows something other than what's shown on-screen (black background, other fonts, etc.).

Frequently asked questions[edit]

What are reasonable dimensions to choose for my SVG images?
The absolute size of the document does not matter much, since that only affects how it is displayed when viewed by itself. The file size does not depend on the document dimensions. The image can be stretched or compressed as much as a user wants, without changing quality, or file size. With that in mind, the recommended image height is around 400–600 pixels. When a user views the full size image, a width of 600–800 pixels gives them a good close-up view, while still allowing them to fit the entire image on their screen without having to zoom in or out: while 9 × 9 pixels are too tiny, 3000 × 2000 are too large. The width of the PNG rendered from SVG on Wikimedia is capped at 2048 px, so there is no point to upload SVG image which requires that much of resolution to be readable when some of the text will be too tiny after scaling down to preview size. Smallest font in SVG image should be readable in 2000-px width at least, the largest recommended rendering resolution in the image description page. Otherwise, a raster version should be provided alongside the SVG source.
How to convert SVG file to raster format in my computer?
For SVG file which behaves incorrectly in graphic software such as Inkscape, you can simply upload the SVG to Wikimedia then save the link which provides PNG render in other widths in the file description page. You can adjust the number-px in the link to generate the desirable width of the PNG render. For width larger than 2048 px, you may use any conversion tools such as RSVG-Convert with the only difference being the lack of anti-aliasing. If you want the raster image looks smoother, you may convert the SVG to PDF in RSVG-Convert then convert the PDF to raster version in Photoshop (Inkscape still presents some font problem when opening PDF). Another option without uploading SVG source to Wikimedia (due to non-free license) is to use the SVG preview on Toolserver which does not have the maximum width cap, but some non-Western text might be rendered incorrectly such as Simplified Chinese characters.
Why doesn't my image render?
This might be due to a number of reasons. Most often it is due to a reference to an external file, a leftover from tracing a bitmap, perhaps. (The rendering stops as the website tries to find this other file) To solve this problem, in your editor, make sure to remove any references to other files before saving the final version. If it is necessary to use bitmaps you can use in Inkscape the function to embedding all images (Effects menu → Images → Embed All Images). It's also possible that you use special effects like blurring. Unfortunately it's currently not well supported by librsvg. See also #Plain SVG, compressed SVG, generic specifications hereinbefore.
Where can I get extra help with SVG images?
Try Commons:Graphic Lab if you have a problem with an individual image. Commons:Graphics village pump can be useful for SVG discussion (as well as graphics in general). Often SVG enthusiasts will be around on those pages, and are more than willing to help.
How do you change the document size in Inkscape?
The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File → Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the “sizing” rectangle, and move or resize the other elements to fit the space you have created.
My text is appearing as little blocks, or isn't showing up at all after uploading to Commons!
If you use “Flowed Text” in Inkscape, it will render as a (black) rectangle. Flowed text boxes are created when you click and drag to make you text box. To avoid this, just click once to position your cursor and then type your text. To convert a flowed text box to a normal text box, go to the “Text” menu and choose “Convert to Text”.
If this still doesn't work, some text features of Inkscape are not supported by MediaWiki's renderer, such as text-on-path. If you are not using flowed text and still have problem, convert the text to paths. Do this by selecting the command Path → Object to Path. This will convert the text to paths. Save as plain SVG, and reupload your file.
My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!
Some stroke features of Inkscape are not supported by MediaWiki's renderer. Select the offending objects, and select the command Path → Stroke to Path. This will convert the strokes to paths. Save as plain SVG, and reupload your file.
How do I get rid of the transparent background?
Do you really need to? Usually not! MediaWiki's renderer will convert the SVG file to PNG with a transparent white background for display (displays white if your browser doesn't support PNG transparencies). Browsers that natively support SVG transparency will show the background color through the image, white! (or grey if the image is displayed as a thumbnail). Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object → Lower to Bottom. Save your image, and enjoy the solid background color!
My fonts aren't rendering correctly. What fonts are supported by the site's renderer?
See meta:SVG fonts for a list.
I am using the same fonts installed in Wikimedia, but text positioning in my SVG image still looks differently between my local render and the Wikimedia render.
It depends on which rendering library and version your local renderer is using. Text positioning and other SVG aspects (such as "transform") are known to behave differently in different rendering libraries. For closest result to Wikimedia render, you should use whatever renderer which uses librsvg. Opera, Chrome and Safari gives accurate results. Firefox and Internet Explorer 10 are slightly inaccurate. Safari looks neater when certain font smoothing is enabled.
I'm drawing a flag (or some other insignia) and it asks for PANTONE or CMYK colors. What do I do?
First, if you see the words PANTONE or CMYK, try to see if they have something called RGB. Wikimedia Commons images are used a lot on Wikimedia projects such as Wikipedia, etc, and are designed for use on computer screens. If you can find RGB colors, use them in favour of others. If you can't, you can convert the colors using your program's own color picker, or, in the case of PANTONE, Color Finder,[2] from which you can extract RGB values for a color code. Make sure to indicate (perhaps on the talk page or image summary) which method of conversion you used, like “[Some Program] was used to convert CMYK values […] to RGB […]”.

Software[edit]

Many programs can handle SVG files. You may like to try one given below, though these are not the only programs around. Some are available for free download, while others are commercial software.

As SVG is just an XML specification, it is possible to write SVG files manually in a text editor, or with your own programs/scripts.[14] In fact, many SVG images are written in text editors. An editor which can highlight the syntax is helpful. Check your work with the W3C SVG validator.

Viewers[edit]

Converters[edit]

Editors[edit]

  • Inkscape. An open source, freely downloadable application for graphically editing SVG files. Available on Windows, Mac OS X, and Linux.
  • Sodipodi. Also for graphically editing SVG files, available on Windows and Linux. Inkscape is based on the Sodipodi engine.
  • OpenOffice.org/StarOffice Draw, an open source, freely downloadable drawing program that comes as part of the the Open Office suite. Can export to SVG; reads SVG with SVG Plugin.
  • LibreOffice Draw (libreoffice.org) - derivative of OpenOffice Draw, can export to SVG. May be more suitable than Inkscape for some use cases such as flow charts, but in general has fewer features than Inkscape. Runs on Windows, Unix-like with X11, and OS X.
  • Dia. An open source, freely downloadable application for creating diagrams. SVG export optional. Runs on Windows, Mac OS X, and Unix systems. (Currently has some bugs in SVG export.)
  • Adobe Illustrator.
  • CorelDraw.
  • WMF toollabs:svgedit based on the Google code svg-edit project.

Specific applications[edit]

  • Ipe is a free and open source editor with good LaTeX integration, for mathematical and technical diagrams. Includes converter to SVG files.
  • Scour. For tidying up/create a smaller file size (in Python, also included in Inkscape).
  • Graphviz. An open source application for automatic diagram layout.
  • BKchem. A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.
  • Freemind is a free and open source mind mapping application written in Java. FreeMind.
  • GeoGebra is a free and open source multi-platform mathematics software with ability to export SVG. Geogebra.
  • Vector Blocks is a free web-based application for drawing simple electrical circuit schematics.
  • LibreOffice Calc (libreoffice.org), for creating bar charts, pie charts, etc.
  • Gnumeric spreadsheet, saves/exports charts in SVG format, cf. gnumeric.

Cleaning up SVG-files to W3C-valid[edit]

See also[edit]

Maintenance:

References[edit]

  1. W3C: SVG – The ‘tspan’ element
  2. W3C: SVG – The ‘textPath’ element
  3. W3C: SVG – White space handling
  4. W3C: SVG 2 – The ‘xml:lang’ and ‘xml:space’ attributes
  5. Firefox (~v30, Gecko browser) interprets xml:space but with nonconforming opposite behavior; WebKit browser (Chrome) does not interpret xml:space but with the default behavior; IE(~11) does not interpret xml:space and also does not conform to the W3C specification. Retrieved on 2014-04-22
  6. librsvg still preserves this extra space character but during the middle or end text alignments, this space character is ignored.
  7. https://bugs.launchpad.net/inkscape/+bug/168023
  8. Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
  9. paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
  10. W3C - valid DTD list - Optional doctype declarations
  11. Don't include a DOCTYPE declaration
  12. Inkscape tutorial: Tracing
  13. Inkscape wiki: Tools: Vectorize/trace
  14. Image made with C++ code by Claudio Rocchini

External links[edit]