From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Babel user information
Users by language

This is my user page. I am Johannes Rössel, a software engineer at yWorks GmbH in Tübingen. I studied computer science at the University of Rostock, Germany.

Here at Commons I mostly do vectorizations as my time and boredom permits. I have a deviantART page where many of the pictures are licensed under Creative Commons; if some fit the nature of the project feel free to upload them here (most are present there in full resolution). I won't do it, however, as others have probably a better understanding of the images needed and are less biased.



I am using a text editor for most of my SVGs, instead of Inkscape, Design, Illustrator or whatnot. In fact, the only program to have SVG as its native format is Inkscape (which means it's the only program that might handle the resulting SVG in a readable and pretty manner).

But Inkscape sucks.

On Windows at least.

Some people are able to do impressive artwork with it but I am not an artist and I found myself incapable of doing what I intended with Inkscape. So I switched to using a text editor. This also means I might write SVGs which do not display correctly or at all in Inkscape, Firefox or WebKit. I do, however try to work around the shortcomings and various bugs of rsvg, except for shadow effects which usually fit at least somehow even if misrendered. Personally I use Firefox for testing which has pretty impressive SVG capabilities by now.

There are some things, however, like joining paths, editing complex bézier curves, etc. I will use Inkscape, though grudgingly and I usally just copy the path data out of there instead of saving the SVG (Inkscape embeds too much junk for my taste).

A plea to those people who change colors in images[edit]

Please take a look at the file size first. If it's below 1 KiB then it's very likely a hand-written image and not done with Inkscape. Using Inkscape to change colors in such images results in severely less readable and maintainable code. So please just use a text editor in those cases.


Inkscape can render grids but the code is abysmal. The easiest way I devised to render a grid is the following:

  <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10">
    <rect width="10" height="10" fill="none" stroke="#000" stroke-width=".5"/>
<rect fill="url(#grid)" width="100" height="100"/>

Simple and elegant, without 400 KiB of path data in there.

The same grid can be drawn with dasharray

<path stroke="#000" stroke-width="100" stroke-dasharray=".5,9.5" d="M-.25,50H100M50-.25V100"/>

May be not so elegant but much shorter. sarang사랑 15:20, 5 September 2012 (UTC)

Wavy lines[edit]

A small Windows PowerShell function which generates path data for wavy lines which are used in many flags. This assumes a proper ViewBox set in the SVG. Examples below the code. This uses the Using-Culture function by Keith Hill which can be found here.

function New-SvgWave([int]$HalfWaves, [double]$Amplitude, [switch]$Upwards) {
    Using-Culture en-US {
        "<path d='M0,0q0.5,{0} 1,0{1}v1q-0.5,{2} -1,0{3}z'/>" -f (
            $(if ($Upwards) {-$Amplitude} else {$Amplitude}),
            ("t1,0" * ($HalfWaves - 1)),
            $(if ($Upwards -xor ($HalfWaves % 2 -eq 0)) {-$Amplitude} else {$Amplitude}),
            ("t-1,0" * ($HalfWaves - 1))

Flag colors[edit]

Colors taken from here. Mainly here so I will find the colors when I look for them

Flag colors
X-- X- X X+ X++
Red R #E66166 #E03940 #DA121A #A40D13 #6D090D
Orange O #F2A772 #EB7711
Yellow Y #FEEE7E #FDE642 #FCDD09 #FBBB00
Green V #0DEF54 #0ABC42 #078930 #056624 #034418
Blue B #89C5E3 #4D87CA #0F47AF #0B3583 #072357
Purple P #7C7796 #86507F #742C64 #56204A #3A1632
Black N #000000
Grey G #CCCCCC #999999 #666666 #333333
Brown M #704D25 #442D16
Gold Au #CAB313
Silver Ag #E7E7E7