This page is a translated version of the page Manual:Assets and the translation is 27% complete.
Other languages:

MediaWiki includes some binary assets in its code.

Obrazy PNG

Pliki PNG są potrzebne dla przeglądarek bez kompatybilności z SVG.

All PNG images/icons included in our code are usually optimized with pngcrush or optipng, which offer automatic detection of the method with best results for the target files (and are packaged in several GNU/Linux distributions). For instance:

pngcrush -brute -reduce image.png image.out.png

MediaWiki has built-in support for SVG with fallback to PNG, using the Less code:

    .background-image-svg( '../images/file.svg', '../images/file.png' );

To use this, also add the line at the top of your Less file:

    @import "mediawiki.mixins";

to the top of the file.

Starsze wersje MediaWiki

Wersja MediaWiki:

If you are developing for older versions of MediaWiki (before 1.22), you can use the same technique (from The invisible gradient technique) manually:

    background: transparent url(fallback-image.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(vector-image.svg);
    background-image: linear-gradient(transparent, transparent), url(vector-image.svg);

Pliki SVG

Every image should exist also (or rather, primarily) in SVG format.

SVG files need to be optimized as well. For most core files, svgo was used (git #6e7a6e29), but you need to make sure a compatible prolog is kept, for instance with this snippet:

for i in `find . -name '*.svg'`
    mv $i $i-tmp
    (echo -n '<?xml version="1.0" encoding="UTF-8"?>'; cat $i-tmp) > $i
    rm $i-tmp

If your SVG files are already well-formed and have an XML prolog, you can simply do (for the current folder):

npm install svgo
svgo --pretty \
     --disable=removeXMLProcInst \
     --disable=cleanupIDs \
     --disable=collapseGroups \
     --disable=mergePaths \
     -f .

For a more aggressive optimisation (e.g. if you don't care about reading the SVG source later), remove all the options above.

--enable and --disable flags are removed in svgo v2.0.0 so the above options would need to be specified via a config file. Alternatively, install svgo@1.3.2 to use these flags.