View source for Manual:Assets/en

<languages/>
MediaWiki includes some binary '''assets''' in its [[Special:MyLanguage/Manual:Code|code]].

== PNG images ==

PNG files are needed for browsers without SVG compatibility.

All PNG images/icons included in our code are usually optimized with [http://pmt.sourceforge.net/pngcrush/ pngcrush] or [http://optipng.sourceforge.net/ 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:

<pre>
pngcrush -brute -reduce image.png image.out.png
</pre>

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

<syntaxhighlight lang="css">
    .background-image-svg( '../images/file.svg', '../images/file.png' );
</syntaxhighlight>

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

<syntaxhighlight lang="css">
    @import "mediawiki.mixins";
</syntaxhighlight>

to the top of the file.

=== Older versions of MediaWiki ===
{{MW 1.21|and earlier}}
If you are developing for older versions of MediaWiki (before 1.22), you can use the same technique (from [http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique The invisible gradient technique]) manually:

<syntaxhighlight lang="css">
    background: transparent url(fallback-image.png) center center no-repeat;
    background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
</syntaxhighlight>

== SVG files ==

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

SVG files need to be optimized as well. For most core and extension files, [https://github.com/svg/svgo svgo] is used. You need to make sure a compatible XML prolog is kept, for instance with this snippet:

<syntaxhighlight lang="bash">
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
</syntaxhighlight>

If your SVG files are already well-formed and have an XML prolog, you can simply use the svgo [https://gerrit.wikimedia.org/g/mediawiki/core/+/61e003a6129c89dc3b2c36c33dabec5fac98b390/.svgo.config.js configuration] for MediaWiki core.
For example, from an extension's directory:

<syntaxhighlight lang="bash">
npm -g install svgo
svgo --config ../../.svgo.config.js --folder .
</syntaxhighlight>

For a more aggressive optimisation (e.g. if you don't care about reading the SVG source later), run it without the config file and it will apply all default optimisations.
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).

[[Category:MediaWiki code{{#translation:}}]]
[[Category:MediaWiki technical documentation{{#translation:}}]]