Manual:Assets/yo

MediaWiki includes some binary assets in its code.

PNG images

PNG files are needed for browsers without SVG compatibility.

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.

Older versions of MediaWiki

MediaWiki version:

≤ 1.21

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: linear-gradient(transparent, transparent), url(vector-image.svg);

SVG files

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

Awọn faili SVG nilo lati wa ni iṣapeye daradara. Fun pupọ julọ mojuto ati awọn faili itẹsiwaju, svgo ni a lo. O nilo lati rii daju pe ilana XML ibaramu ti wa ni ipamọ, fun apẹẹrẹ pẹlu snippet yii:

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

Ti awọn faili SVG rẹ ba ti ni idasilẹ daradara ti wọn si ni asọtẹlẹ XML, o le rọrun lo svgo iṣeto ni fun MediaWiki mojuto. For example, from an extension's directory:

npm -g install svgo
svgo --config ../../.svgo.config.js --folder .

Fun iṣapeye ibinu diẹ sii (fun apẹẹrẹ ti o ko ba bikita nipa kika orisun SVG nigbamii), ṣiṣe laisi faili atunto ati pe yoo lo gbogbo awọn aipe aifọwọyi. Note that for MediaWiki use, some of these are unnecessary (e.g. we pretty-print the XML because ResourceLoader will minify it later, and it's nicer to work with it unminified).