User:Sarang/SVG file family systems

Wikimedia has a great number of SVG file family systems – galleries or categories with a sometimes large number of files differing in only small parts of their code.

To such famlies belong e.g.

• Military map symbols, as 19000 files in Quatrefoils in military map symbols
• BSicon with large groups of files with only small differences as in BSicon/railway/narrow/junction
• Simple color rectangles and other shapes where only colors are different
• SVG stripe texture overlays, a category with only a few members
• Plain circles 100%, unused nonsense, 200×200 circles of only different colors
• hundreds of categories for Traffic signs and Highway numbers - SVG signs with just small differences

A remarkable synergy effect can be achieved by merging previously individual files into one SVG file, setting the small differences by means of a switch.

SVG provides the <switch> element which enables to show different shapes depending on a key, specified when the file is displayed.
That <switch> element is well known and wide used for translation of text: a language key is specified with the display order, and causes the selection of parts of the SVG code.
Such code parts are specified with a systemLanguage attribute, and may comprise text, text formatting and any other SVG code.
The key specified by the |lang= parameter of the display matches the key for the systemLanguage attribute; for text translation it normally belongs to the ISO 639-1 keys.
There are some restrictions for this key, but librsvg can handle a wide variety and an unlimited number of.

Compared to the possible parametrizing of e.g. a template, the use of the <switch> element is very limited: only one single systemLanguage of all can be activated, all the others are switched off.

The categories above show many examples where only marginal differences exist. In BSicon/railway/ACC it is only a red stroke, e.g. , , , , and whilst the main part of the image is the wheelchair: .

This is an example of an SVG containing 7 different images

Simple BSicon SVG code

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<title>ACC</title>
<switch stroke="#BE2D2C" stroke-width="2" transform="scale(50)">
 <path systemLanguage="ho" d="m5,0v10"/>
 <path systemLanguage="qu" d="m0,5h10"/>
 <path systemLanguage="he" d="m5,0v5"/>
 <path systemLanguage="qa" d="m5,5h5"/>
 <path systemLanguage="ha" d="m5,5v5"/>
 <path systemLanguage="qe" d="m0,5h5"/>
</switch>
<circle fill="#034EA2" cx="250" cy="250" r="150"/>
<path fill="#FFF" d="M199,294A57.4,57.4 0 1,0 293
235l3-25A79.1,79.1 0 1,1 187,319M275,128a22,22 0 1,0 1,0"/>
<g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" fill="none">
 <path stroke-width="26" d="m277,193-8,60.5H197.5L163,323.5"/>
 <path stroke-width="21" d="m214,215.5h58"/>
</g></svg>

(780 bytes)

File:BSicon railsway ACC.svg has 7 code variations:

• 
  Key: ho
• 
  Key: qu
• 
  Key: he
• 
  Key: qa
• 
  Key: ha
• 
  Key: qe
• 
  Key: wheelchair

When some keys match accidentally ISO 639-1 keys (ha, he, ho, qu) it does not disturb.

To change just colors, switch control is not so well useable: only specific SVG elements (path, circle, ...) are allowed to be switched, but not SVG style attributes (fill, stroke, ...).
To avoid repetition of the whole structure, e.g. <use> should be a workaround — but it is not able with librsvg; see the solution in Color Multicircle.svg.
File:Color Multicircle.svg has 16 code variations:

• 
  Key: none
• 
  Key: bleu
• 
  Key: brown
• 
  Key: white
• 
  Key: blues
• 
  Key: yellow
• 
  Key: black
• 
  Key: red
• 
  Key: aquas
• 
  Key: limes
• 
  Key: fuchsia
• 
  Key: green
• 
  Key: orange
• 
  Key: purple
• 
  Key: dark
• 
  Key: gold

The example User status icon.svg changes not the language but the color:

• 
  Key: rg
• 
  Key: yl
• 
  Key: gr
• 
  Key: xx