# Icons and Images

Fvwm can load .xbm, .xpm, .png and .svg images. XBM images are monochrome. Fvwm can always display XBM files. XPM and PNG formats are color images. SVG is a vector graphics image format. Compile-time options determine whether fvwm can display XPM, PNG or SVG icons and images. See the INSTALL.fvwm file for more information.

The related SHAPE compile-time option can make fvwm display spiffy shaped icons.

## SVG rendering options

SVG images are generated from (XML) text files. A really simple SVG file might look something like this:

    <svg width="120" height="80">
    	<rect fill="red"     width="40" height="40"  x="0"   y="0"  />
    	<rect fill="lime"    width="40" height="40"  x="40"  y="0"  />
    	<rect fill="blue"    width="40" height="40"  x="80"  y="0"  />
    	<rect fill="cyan"    width="40" height="40"  x="0"   y="40" />
    	<rect fill="magenta" width="40" height="40"  x="40"  y="40" />
    	<rect fill="yellow"  width="40" height="40"  x="80"  y="40" />
    </svg>

`image.svg`

By default, SVG images are rendered as the image creator intended them to. But since SVG is a vector graphics format, the images can be rendered at any chosen size and rotation, e.g. making it possible to use the same icon file rendered at different sizes for the and styles.

The rendering options are specified as a string appended to the SVG filename as follows:

`image.svg``:``!`size position rotation scale `-`width `x``-`height`-+`xpos`-+`ypos`@``-`angle`*/``-`factor `xy`

The option string always starts with a colon ('`:`') to separate it from the filename. An empty option string can skip this colon, but it might still be a good idea to include it to prevent ambiguity if the filename contains any colon.

    filename_without_colon.svg
    filename:with:colon.svg:

An exclamation point ('`!`') transposes the entire final image (including the rendering area), i.e. all the horizontal and all the vertical coordinates are swapped with each other.

    image.svg:!

`image.svg:!`

width and height specifies the dimensions of the rendering area in pixels, i.e. the dimensions of the resulting image. The actual image is fitted to fill the entire rendering area.

    image.svg:60x60

`image.svg:60x60`

Use a width or height value of 0 to keep the aspect ratio.

    image.svg:0x60
    image.svg:60x0

`image.svg:0x60`

`image.svg:60x0`

A '`-`' before width mirrors the rendering area horizontally.

    image.svg:-0x0

A '`-`' before height mirrors the rendering area vertically.

    image.svg:0x-0

`image.svg:0x-0`

xpos and ypos specifies a translation of the image in pixels. A positive xpos value moves the image to the right. A positive ypos value moves it down. Moving it partially outside of the rendering area results in a cropped image.

    image.svg:-30-0
    image.svg:-0+10
    image.svg:-30+10

`image.svg:-30+10`

angle specifies a rotation around the actual image center in degrees. This might result in a cropped image. A positive value rotates the image clockwise. Floating point values are recognized.

    image.svg:@180
    image.svg:@-90
    image.svg:@30
    image.svg:@57.3

`image.svg:@30`

factor specifes a scaling of the actual image (not the rendering area). Scaling it up results in a cropped image. Floating point values are recognized. Division by zero is ignored. If factor is directly followed by a '`x`' or a '`y`', the scaling is horizontal or vertical respectively. Otherwise the scaling is uniform.

    image.svg:*2
    image.svg:/2
    image.svg:/3x
    image.svg:/2y

`image.svg:*2`

`image.svg:/2`

`image.svg:/2y`

Scaling down a translated or rotated image can prevent cropping.

    image.svg:@30*0.6

`image.svg:@30*0.6`

Repeated usage of translation, rotation, and scaling is allowed. Translation and rotation are additive. Scaling is multiplicative.

    image.svg:*2/3
    image.svg:/3x/2y

`image.svg:/3x/2y`

When combining affine transformations, the scaling is always done first, then the rotation, and finally the translation.

    image.svg:-30+10@30/3x/2y

`image.svg:-30+10@30/3x/2y`

Use a negative scale factor to mirror the actual image.

    image.svg:-30+10@30/-3x/2y

`image.svg:-30+10@30/-3x/2y`

Mirroring of the rendering area is done after any scaling, rotation or translation of the image.

    image.svg:-0x0-30+10@30/3x/2y

`image.svg:-0x0-30+10@30/3x/2y`

Transposing is done last of all, after everything else.

    image.svg:!-0x0-30+10@30/3x/2y

`image.svg:!-0x0-30+10@30/3x/2y`