Help:SVG

An example of an SVG image

SVG (scalable vector graphics) is an accepted file format on Wikimedia Commons. It is suited to diagrams, maps, and other non-photographic images.

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

What is SVG?

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:

• Scalable Vector Graphics for detailed description
• SVG examples

Creating SVG images for Wikimedia Commons

Origination & editing

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

Using specific features of SVG

Bitmaps

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 SVGs are not necessary, such as for decorative embellishments, and bitmaps are often better converted or redrawn as SVGs. Bitmaps should be included if this is the best solution, but redrawn if this yields a better image. Further, use of bitmaps in SVGs may be labeled as {{BadSVG}}.

Please think carefully about using bitmaps in SVGs, and consider converting it or redrawing it as an SVG 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

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 SVGs for how to mark it animated.

Scripting

MediaWiki does not accept SVG files containing scripts.

External files

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

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

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 allows to save SVGZ (compressed binary SVG), which is not supported on Commons.

Fonts

Only some fonts can be rendered in the <text> tag. You can find a list here. Please do consider using these fonts and not converting fonts to path (the latter will increase file dimension and might complicate the generation of localized version of the image).

Text in Inkscape by default uses a Flowed Text box which can result in problems (it will likely not render at all or render as a large black rectangle). 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">.

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 browser (such as Firefox, Safari, Chrome) under Windows or MacOS (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.

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

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.

Gradients

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.

Validation

You may wish to put the file through the SVG Validator (http://validator.w3.org/) before you upload. This can tell you about possible problems in your SVG. 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 wants a Doctype declaration, which is not a requirement in SVG and may actually cause problems. (The SVG WG (Working Group) has decided not to write one for the upcoming SVG 1.2 standard.)

See Tagging SVGs for how to mark it validated.

Converting to SVG

Further information: Commons:Transition to SVG

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:

• Regenerate it
• Convert it
• 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.

Note that some images are not well-suited to SVG, notably continuous-tone images such as photographs. These generally should instead be stored as JPG.

In detail:

Regenerate it

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

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; 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).

Create a new one

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

Image description pages

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 Software tags section for detailed information on a SVG media.

Categorizing SVGs

[−] SVG [+] SVGs by subject [+] SVG by country [+] SVG by language [+] SVG files with errors [×] SVG marker templates [+] SVGs by creator [×] SVGs demonstrating filter effects [×] Animated SVG [+] SVG graphics by software used [+] SVG examples [×] Invalid SVG [×] Path text SVG [×] Scripted SVG [+] Valid SVG [+] SVG galleries [+] SVG graphs [×] Nuvola SVG apps [+] Nuvola SVG icons [+] Obsolescences by SVG replacement [+] SVG pictograms [×] SVG posters [+] SVG printing art [×] SVGs for cleanup [×] Vector images using elements from other vector images

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

The main tree is Category:SVG, as a part of Category:Images → Category: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 SVGs 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

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 SVGs

See Category:SVG marker templates for all SVG markers available

SVG software tags

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

• {{created with Adobe Illustrator}}, sorts into Category:Created with Adobe Illustrator,

This vector graphics image was created with Adobe Illustrator.

• {{created with CorelDraw}}, sorts into Category:Created with CorelDRAW,

This vector graphics image was created with CorelDRAW.

• {{created with Dia}}, sorts into Category:Created with Dia,

This diagram, document, or vector graphics image was created with Dia.

• {{ElCompLib}}, sorts to Category:Created with electrical symbols library

This SVG electrical schematic was created with the electrical symbols library.svg.

• {{Fig2SVG}}, does not sort by now (May 2008)

This SVG vector image was created with Xfig and a Fig to SVG conversion tool.

• {{gnuplot}}, sorts to Category:Gnuplot diagrams

This vector image was created with gnuplot.

• {{handSVG}}, sorts to Category:Manually coded SVG

This vector image was created with a text editor. Its source code might contain additional information or higher level semantics of the topic.

• {{created with Inkscape}}, sorts into Category:Created with Inkscape, see also {{Inkscape-hand}} (which also sorts into Category:Manually coded SVG)

This vector image was created with Inkscape.

• {{metapost-source}}, sorts to Category:SVG with Metapost source

This vector image was created with MetaPost. For MetaPost source code please see below.

• {{created with OpenOffice.org}}, sorts into Category:Created with OpenOffice.org, pays no attention on SVG or other file formats (May 2008)

This file was created with OpenOffice.org.

• {{created with Sodipodi}}, sorts into Category:Created with Sodipodi

This vector image was created with Sodipodi-Inkscape.

• {{created with Scribus}}, sorts to Category:Made with Scribus, also for typesetting

This typeset document or vector graphics image was created with Scribus.

• For other software, by now categorize as usual, see Commons:Templates#Created with... templates for an summary of software-related templates

See Software section for a list of programs

SVG file type tags

For making use of elements from other SVG images available on Commons, please use {{attribSVG}} – see Category:Vector images using elements from other vector images

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

All validated SVGs should be tagged {{validSVG}}, you will find them automatically sorted at Category:Valid SVG. Please do not categorize directly.

✓ The source code of this SVG is valid.

For animations you can use {{animated SVG}}

SVGs containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{scripted SVG}}

SVG conversion tags

If you find raster images that should be vector graphics -- especially diagrams, charts, graphs and some drawings -- tag them {{convert to SVG}}. Specials: For musical notation {{convertToSVG-MN}}, for Nuvola {{N2+SVG}}.

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

For SVGs using embedded bitmaps causing bad quality, use {{badSVG}} and for rasters that have been superseded by an svg, use {{vector version available|File name.svg}}

SVGs in MediaWiki

How SVGs work in MediaWiki

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 SVGs to PNGs 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 SVGs 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 SVGs via MediaWiki

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

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 supported by rsvg. See also Plain SVG, Compressed SVG above.

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 large should my SVG images be?

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 width is around 600px. When a user views the full size image, a width of 600-800px 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.

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 m:SVG fonts for a list.

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 (http://www.pantone.com/pages/pantone/colorfinder.aspx), 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

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
• using your own program written in programming languages.

In fact, many SVG images are written in text editors. An editor which can highlight the syntax is helpful.

See Software tags section for information about the software, the SVG file was done with, and specific handling hints.

Rendering/viewers

• rsvg, used by MediaWiki
• rsvg-view is a small, simple viewer for UNIX systems to preview how SVGs will look when rendered by MediaWiki.
• Firefox 2.0, Konqueror (of KDE) and Opera support SVG natively. You can open your file in the browser to view how it will look like.

General editors

• SVG can be edited by any text-editor; it is usually stored as XML-type plain-text. An editor that can highlight the syntax is helpful.
• Inkscape: An open source, freely downloadable application for graphically editing SVG files. Available on Windows, Mac OS X, and Linux.

See Commons:Editor's index to Commons#Inkscape for Inkscape-specific resources at Commons.

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

Specific application

• Scour: For tidying up/create a smaller file size. (Unix systems)
• 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.

Validators

• SVG Validator, by W3C

Converters

From raster formats (bitmaps)

See: List of raster to vector conversion software

• Most SVG-editors include a Raster-to-Vector-converter (Tracer)
• Delineate, a free tracer, it is a Java-based interface for Potrace and Autotrace. Potrace is also implemented into Inkscape (>Path >Trace Bitmap)

From other vector formats

• Scribus (with GhostScript) can import EPS (Encapsulated PostScript) files and export them to SVG.
• pdf2svg from PDFTron

Virtual Printers

• PDFCreator Windows only, OpenSource (prints directly from Office to a SVG-file or to a vector-PDF, which can be imported by Inkscape; The Toolbar is considered to be adware; don't forget to disable in the feature-selection dialog.)

Online SVG editors

• SVG-edit.

See also

• Wikipedia:SVG Help
• Wikipedia:Graphic Lab/Resources/SVG
• Category:SVG
• Commons:Graphics village pump
• Commons:Graphic Lab

Technical:

• Commons:File types#SVG - A couple of tips on saving for Commons.
• SVG Check (direct link) - a Toolserver tool which gives a preview of what a SVG will look like on MediaWiki before upload. A development version is also available, which can also optimize them (experimental).
• Commons:Transition to SVG

Specific application:

• Commons:Translation possible/Learn more - Deals with translating SVGs (diagram labels).
• Category:SVG maps – the SVG-branch of the map-project
• m:SVG fonts - A list of supported fonts.

Maintenance:

• Category:Images that should use vector graphics
• Category:Pictures showing a librsvg bug
• Top 200 Non-Icons which have a Vector version available by usage

External links

• SVG Primer
• SVG authoring guidelines

Free sources

• More than 10000 SVG images (public domain) at http://www.openclipart.org/