Help:SVG

From Wikimedia Commons, the free media repository

Jump to: navigation, search

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

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

Contents

[edit] SVG how-to

[edit] 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:

[edit] Creating the image

Info on starting off a blank image, tracing, whitespace elimination, etc

For use in Commons, you are not recommended to import bitmap images into SVG files. It is tempting to import, say, a map into SVG, add some text labels and save it as an SVG. Another case is a diagram created in SVG, which is then embellished by importing a bitmap emblem or logo. Incorporating bitmaps runs counter to the ideas at Commons:Transition to SVG and any such uploaded file is liable to be automatically tagged as BadSVG by the SVGbot, a bot currently under development. Many bitmaps are suitable for conversion to SVG for incorporation.

Before saving the final version, make sure you delete any references to other files you used to make the SVG; if these external references are left behind, then the renderer is likely to stall if it is unable find the external file.

It's also a good idea to remove or "vacuum" any unused definitions (defs), as this can result in a smaller file size.

[edit] Plain SVG, compressed SVG

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

[edit] 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.

See Tagging SVGs for how to mark it validated.

[edit] Uploading & 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, its 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.

[edit] SVGs in MediaWiki

[edit] How SVGs work in MediaWiki

When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG thumbnails, both embedded in articles and the image at the description page. The reader will only ever access your raw SVG if one clicks on the image name link that appears below the description page's thumbnail, on the Image: page. (Got that? You can also access it directly through a Media: link.) The rest of the time, they are only seeing a PNG produced from the SVG.

MediaWiki uses rsvg to convert SVGs to PNGs for display (SVG-rendering), 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.

See the SVG image support page on Meta for more.

[edit] Categorizing SVGs

[–] SVG
[+] SVG marker templates
[+] Animated SVG
[+] Pictures showing a librsvg bug
[+] SVG graphics by software used
[+] SVG examples
[+] Valid SVG
[+] SVG astronomy
[+] SVG — biology
[+] SVG Calibre
[+] SVG cartography
[+] SVG chemistry
[+] SVG coats of arms
[+] SVG colors
[+] SVG — Control theory
[+] SVG — Earthing
[+] SVG — ecology
[+] SVG — Economics
[+] SVG — Electricity
[+] SVG energy
[+] SVG flags
[+] SVG football kit templates
[+] SVG geology
[+] SVG health
[+] SVG maps
[+] SVG Materials science
[+] SVG mathematics
[+] Mechanics (svg)
[+] SVG meteorology
[+] SVG Microtechnology
[+] SVG music
[+] SVG — network
[+] SVG patterns
[+] SVG — Periodic table
[+] SVG — Physics
[+] SVG pictograms
[+] SVG signs
[+] SVG sports
[+] SVG transportation

By now, all SVG graphics should be sorted into Category:SVG, but please do not sort directly there, it will become overcrowded and useless. Try some of the thematical subcategories.

Please sort categories, which rely not on subject but on technical aspects ("created with..", "animated", "valid", and so on) by «*» to keep them outside the alphabet

[edit] The SVG categories tree

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

Concerning thematical 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 overcategorize, 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.

[edit] Naming conventions

There are no naming conventions by now (Mai 2008), besides beginning with “SVG ”. Just do what is reasonable and coherent to our existing categories.

[edit] Tagging SVGs

See Category:SVG marker templates for all SVG markers available

[edit] SVG Software tags

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

This vector image was created with Inkscape.
This vector image was created with Sodipodi.
This file was created with OpenOffice.org.
  • {{Fig2SVG}}, does not sort by now (May 2008)
This SVG vector image was created with Xfig and a Fig to SVG conversion tool.
  • {{gnuplot}}, does not sort by now (May 2008)
This vector image was created with gnuplot.
This typeset document or vector graphics image was created with Scribus.
This SVG electrical schematic was created using the electrical symbols library.svg (and is also listed in this category).

See Software section for a list of programs

[edit] 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: [[Image:{{{1}}}|20px|Source SVG image]] [[:Image:{{{1}}}|{{{1}}}]] .


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

W3C ✓ The source code of this SVG is valid.

For animations use {{animated SVG}}

This is an animated SVG file. The preview above may be incomplete or incorrect. To use the interactive possibilities open media:SVG in an SVG Animation aware browser or viewer, e.g., Opera or Internet Explorer with Adobe SVG plugin.

العربية | Deutsch | English | Español | Français | Italiano | Nederlands | Polski | Português | Русский | +/-

SVGs containing JavaScript shall be marked {{scripted 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 an SVG Scripting aware browser or viewer, e.g., Firefox 1.5, Opera or Internet Explorer with Adobe SVG plugin.

العربية | Deutsch | English | Español | Français | Italiano | Nederlands | Polski | Português | Русский | +/-


[edit] 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}}

For SVGs using embedded bitmaps causing bad quality, use {{badSVG}}

[edit] Scaling SVGs via MediaWiki

What this means... say you want to produce a large version of your SVG for detailed map s, 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! Off course you can also use for printing SVG software like Inkscape but sometimes the shows something others than on the screen (black backround, other fonts, ...).

[edit] 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). 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!
Some text features of Inkscape are not supported by MediaWiki's renderer. Select the text objects, and select 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! 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'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.

[edit] Software

Many programs are around which 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 in a text editor. 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.

[edit] Rendering

  • rsvg, used by MediaWiki
  • rsvg-view can be used on UNIX systems to preview how SVGs will look when rendered by MediaWiki.
  • Firefox 2.0, Konqueror (of KDE) and Opera support SVG natively.

[edit] General editors

  • SVG can be edited by any text-editor, it is usually stored XML-type plain-text. An editor which 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.
  • 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 which 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

[edit] Specific application

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

[edit] Validators

[edit] Converters

  • Most SVG-editors include a Raster-to-Vector-converter (Tracer)
  • Delineate, a free tracer, it is an Java-based interface for Potrace and Autotrace. Potrace is also implemented into Inkscape (<Path >Trace Bitmap)
  • Vector magic: An online free raster to svg converter.
  • FreeSVG can convert PDFs to SVG via a web interface

[edit] See also

Meta has a page about this at:

Technical:

Specific application:

Maintenance:

[edit] External links

[edit] Free sources

Retrieved from "http://commons.wikimedia.org/wiki/Help:SVG"
Personal tools