Mediawikiの低解像度SVGから高解像度のサムネイルを取得するには？

Question

この質問に正しく言い方をする方法が正確にわからないので、私は試してみます：

this pageのラスタライズされたSVGを参照してください。かなりひずんでいるように見えます。そして、私の言い訳は、むしろ***です。今度はそれをhereと比較しましょう。どちらも同じSVGファイルを持ち、ソースコードはwikitextで同一です。違いは、ラスタライズされた「サムネイル」がどのように生成されるかにあります。

私はMediaWikiのから取得した結果。

意図した結果。

ウィキペディアとウィキアの両方が、SVG用にいくつかのラスタライズされたサムネイルを作成するか、単にページのサイズに応じて必要に応じて生成するだけです。しかし、MediaWikiはデフォルトでは1つのサムネイルしか生成しません。これは、元のSVGと同じ解像度を持つことを暗示しています。小さなSVGを大きな画像にラスタライズすると、ぼやけてしまいます。

サムネイル/ラスタライズする前に、SVGのスケーリング/サイズ変更が行われていないか、またはそうでなければなりません。

$wgFileExtensions = array('png', 'gif', 'jpg', 'jpeg', 
    'xls', 'mpp', 'pdf', 'ppt', 'tiff', 'ogg', 'svg', 
    'woff', 'eot', 'woff2' 
); 
// $wgSVGConverters['ImageMagick'] = '"' . $wgImageMagickConvertCommand . '" -background white -thumbnail $widthx$height^! $input PNG:$output'; 
// $wgSVGConverters['ImageMagick'] = '$path/convert -density $width -geometry $width $input PNG:$output'; 
$wgSVGConverters['ImageMagick'] = '$path/convert -density 1200 -background none -geometry $width $input PNG:$output'; 
$wgSVGConverters['rsvg'] = '/usr/bin/rsvg-convert -w $width -h $height $input -o $output'; 
$wgSVGConverter = 'ImageMagick'; 
// $wgSVGConverter = 'rsvg'; 
$wgSVGMaxSize = 2048; 
$wgMaxImageArea = 1.25e7; 
$wgMaxAnimatedGifArea = 1.0e6; 
$wgUseImageResize = true; 
$wgGenerateThumbnailOnParse = true; 

そう...それらの欠如が問題の原因であるならばどのように私は、複数のサムネイルを持つ有効にする：ちょうどヘッドアップのための

、ここでいくつかは私のLocalSettings.phpから来るのか？これは問題の原因でもありますか？そうでない場合、意図した結果が得られない本当の理由は何ですか？私に何ができる？

編集： ImageMagickからRSVGに切り替えて既に解決済みです。

Answer 1

Imagemagickでは、svgファイルを読み取る前に大きな密度を提供する必要があります。これは私のために働く。

convert -density 600 The_Mystics.svg mystics.png 

Answer 2

ImageMagickからRSVGに切り替えることで既に解決されています。

Answer 3

私を信じて、最善の解決策はただのImageMagickを無効にするとちょうどSVGsが元の完璧な解像度で、SVGsとしてレンダリングさせています。

ここでは、開発中のネイティブSVG機能が表示されていますが、終了していません。 https://phabricator.wikimedia.org/T134482

「ラーソンが書いた：ここhttps://phabricator.wikimedia.org/T5593

は、ベータ機能のオプトインWMFのためのSVGが提案されている。

がクライアントでネイティブにレンダリングされたSVGを持っているのが大好きだそれは2013年ですが、サポートがありますそれにもかかわらず、Brionの4歳のコメントにもかかわらず、ウィキメディアのサイトでそれを有効にしたくない場合は、うまくいきません。私のサイトでは、複数のラスタライズされたリサイズを取り出すよりも、ファイルをダウンロードしてキャッシュしておきたい」

MediawikiのドキュメントはSVGのクライアントレンダリングがウェブサイトの99％で行われているようで、 これは主にドキュメンテーションの更新が必要であり混乱しているため、悪意のある意図がないためです。

ImageMagickにはバグがあるとMediaWikiのGDライブラリは、通常の画像のために代わりに使用されます。

mediawikiのPNGがsvgsをレンダリングする唯一の理由誰も使用していないIE6のような本当に古いブラウザをサポートしたいからです。 Wikipediaのユーザベースは巨大であり、人々のすべての人口統計がそれを使用するため、彼らはそれを行います。

クライアントサイドのブラウザでSVGを表示させるだけです。あなたはサーバーの消費電力を減らし、依存していない巨大な依存関係を気にする必要はありません。

これをインストールします。 https://www.mediawiki.org/wiki/Extension:NativeSvgHandler

$wgFileExtensions[] = 'svg'; 
$wgAllowTitlesInSVG = true; 
$wgUseImageMagick = false; 

//Make sure this variable is false or not there at all: 
$wgSVGConverter = false; 

あなたは（これはしかし下手に書かれたページです）続きを読むたい場合：

編集： は、言及しない理由*** *あなたはSVGを取り込み、それらを動的にラスタライズしますか？最初の場所にpngとしてイメージを保存するだけでもいいかもしれません。 それはSVGの大きな利点をすべて失ってしまいます。

• 高解像度で鮮明な

• は

• フィルタ

• アニメーション

• 完全に編集可能なファイル、単なるテキスト/コードエディタで開き、CSSでスタイルすることができます

• SVGの効率性と複雑さに応じてファイルサイズが小さくなりました。

SVGをSVGOMGまで実行すると、ファイルを多く最適化できます。個人的には、SVGOMGがその仕事をした後に、自分のテクニックで数十バイトのバイトをもっと小さくすることさえ可能です。