SVGのアップロードが小さすぎる

Maker Forums では、SVG ファイルのアップロードを許可しています。その理由の一つは、レーザー彫刻機やカッターを利用するユーザーが当フォーラムの主要なユーザー層の一人であるためです。SVG はそのような分野で広く使用されています。そのため、ユーザーが SVG をアップロードできるようにしたいと考えています。他のユーザーがダウンロードできるようにするため、また議論の中でそれらを確認できるようにするためです。これは多くの場合、サポートを求めるリクエストの文脈で行われます。

残念ながら、SVG は非常に小さく描画される傾向があり、時には実質的に見えないほど小さくなることがあります。今夜、あるユーザーが SVG をアップロードしたところ、自動的に12×8ピクセルに設定されました。そのサイズはあまりにも小さく、色付きの線が消失し、雪嵐の中のクマの写真のように描かれてしまいました(カテゴリーモデレーターが、そこにSVGが存在することに気づいたこと自体が驚きです)。これは私たちにとってよくある問題です。

経験豊富なユーザーであれば、例えば 12x8480x320 に変更することで画像を実際に確認できることを学ぶことができるかもしれません。しかし、経験豊富なユーザーはほとんどこの対応を必要としません。SVGを投稿する人の多くは、サポートを求める初心者であり、このDiscourseの癖について知りません。

では、なぜDiscourseはSVGを数ピクセルに制限するのでしょうか?

参考までに、カテゴリーモデレーターから届いた問い合わせはこちらです:

編集:そのスレッドから、このフォーラムが他のフォーラムよりも特にこの影響を受けやすい可能性のある理由を以下に示します:

一般的な「K40」レーザーカッターは、12インチ×8インチのベッドを持ち、メートル法ではなく、正確に1/1000インチのステップで動作します。したがって、これらのSVGファイルではインチを使用することが実際には合理的であり、「ユーザーはメートル法を使用すべき」という問題ではありません。

「いいね!」 2

設定が標準的ではないようです。ここで SVG をアップロードするとどうなりますか?

SVG はセキュリティ上のリスクとなる可能性があるため、投稿内で自由に描画することを許可するのは一般的ではありません。

ありがとうございます!

こちらが、その特定のサンプルグラフィックの表示例です(画面に付いた埃ではありません。レンダリングされたグラフィックそのものです):

e1ff136dadb082718c04bb5aaf0f1395de79ba93

ここでも正確に 12x8 ピクセルのサイズが推定されているのがわかります。このファイルをアップロードした際に生成された、変更を加えていない生の Markdown は以下の通りです:

![e1ff136dadb082718c04bb5aaf0f1395de79ba93|12x8](upload://wffVySQ30j5UczxrY5nifKC0kEP.svg) 

推定サイズを 12x8 から 480x320 に変更すると、画像がほこりのような小さな点ではなく、はっきりと見えるようになります:

![e1ff136dadb082718c04bb5aaf0f1395de79ba93|480x320](upload://wffVySQ30j5UczxrY5nifKC0kEP.svg) 

e1ff136dadb082718c04bb5aaf0f1395de79ba93

どの「設定」のことをおっしゃっていますか?

もちろん、SVG アップロードを許可する必要がありました。私の記憶では、約 2 年前に authorized_extensions 設定に svg を追加する必要がありました。

Discourse 内の SVG 正規化コードは確認しました。ここでは SVG がレンダリングされているのがわかります。Maker Forums の主要なミッションの一つである SVG の価値と、ユーザー層の管理方法の両方を考慮し、私たちは意図的に SVG を表示することを選択しました。人々がレーザーカットや engraving の SVG に問題を抱えている際、会話の文脈内で SVG を確認できることは、理解と診断にとって貴重な助けとなります。

メタでも SVG を表示できたことから、おそらくあなたも同様の判断を下されたのだと思いますが、もちろん理由は異なるでしょう。

「いいね!」 2

素晴らしい、詳細を追加してくれてありがとうございます。@jamie.wilson さんが来週中にその issue を見てくれると嬉しいです。

「いいね!」 5

ありがとうございます!

調査において、Scorch が上記で指摘した通り、「12x8 ピクセル」という値が偶然ではなく、おそらく svg 要素の width 属性と height 属性内の単位(例:\u003csvg ... width="12in" height="8in" ...\u003e)を適切に処理できていないことに起因しているという点を確認したかっただけです。最初に質問を投稿した時には、そのことに気づいていませんでした。:smiling_face:

「いいね!」 4

その通りです。画像サイズを取得するために使用しているライブラリは、SVG ファイル内の width および height 属性の整数値をそのまま取得するだけで、単位タイプを解析しようとはしていません。この問題に対して最もクリーンな解決策を探るために、少し調査を進めます。

いくつかの問題のあるファイルについて、ImageMagicklibrsvg の両方を使って実験しました。ImageMagick はデフォルトで 96 DPI、librsvg はデフォルトで 90 DPI を使用するようです。いずれも、合理的なデフォルト値を選んで一貫して適用すれば問題ないでしょう。

「いいね!」 5

90 または 96 に設定すれば、インチだけでなくミリメートルで幅と高さを指定した SVG も、より適切なサイズで表示されるようになります。現在、ミリメートル単位で幅と高さを指定した SVG は、ブラウザのピクセル 1 個あたり 1mm という表示になっているため、実際には約 3 分の 1 から 4 分の 1 のスケールで表示されてしまいます。以前は「まあ、スケーラブルだからいいか」と肩をすくめていましたが、インチとミリメートルの両方を適切なデフォルト解像度で扱えるようにすれば、どちらの単位でもはるかに良いレンダリング結果が得られるはずです。:tada:

ありがとうございます!

SVG がメールで全くレンダリングされないことが懸念点であり、この機能の実用性は限定的です。

メールの HTML は非常に制限が厳しく(実装も一貫していないことについては Litmus を参照のこと)、Discourse が現代の Web(例えば無限スクロールなど)向けに作られているという点を皆さんが強調していることから、Web で表現できるすべての内容をメールで完全に表現できることが主要な検討事項であったとは思いもしませんでした。これは私にとって理解すべき新たな課題です。(無限のリソースがあれば、SVG を PNG にレンダリングしてメールに含めることも想像できます。それは一般的な HTML メールに必要な多くの無理やりな工夫よりも忠実度が高いでしょうが、SVG がデフォルトで有効になっていない現状では、優先度は非常に低いと感じられます…)

@Neotinker 氏は、以前、three.js を使用した onebox 機能によって、Discourse の会話内でインタラクティブな 3D モデルを埋め込むことを考えていたと伺っています。もしそれが機能として実装された場合、Maker Forums 向けに有効にしたいと考えています。「メールでレンダリングできない」という懸念が、彼や他の誰かが実装した場合の採用の妨げになるでしょうか?(three.js 自身も Discourse を自身のフォーラムに利用していることには注目しています…)

あるいは、これが CDCK がこの問題にどの程度の時間を割くかという優先順位の判断である場合、コードの所在を示していただけると幸いです。ここで負担を強いる意図はありません。私の過去の貢献から、Ruby や RoR の専門家ではないことは皆さんもご存じかと思いますが、検討リストに追加する用意はあります。(このトピックを最初に投稿した頃は、数値が単位を失ってピクセルとして扱われていることに気づいておらず、それがデザイン上の判断だと思っていたため、バグ報告ではなく ux に投稿しました☺)

「いいね!」 1

金曜日の午後、インチ、cm、mm などの単位で寸法が指定された場合の SVG ファイルが極小になるという問題に対処するプルリクエストを作成しました。

このプルリクエストはコードレビュー待ちのため、現時点では利用できませんが、まもなく利用可能になる予定です。

「いいね!」 5

コミットを共有いただき、どこでどのように行われたかを確認できて助かりました!

@codinghorror の発言を誤解していました。彼が「問題が複雑化して手が付けられなくなった」という意味で言ったのだと思い込んでいましたが、ここで多くの作業を生んでしまった意図はありませんでした。

「いいね!」 2

問題ありません!私たちは SVG のファンですが、現実主義者でもあります :wink:

いずれにせよ、小さな改善の提案はいつでも歓迎します!

「いいね!」 4

こちらが鉛筆の SVG です。寸法は 8 インチ x 12 インチです。

変更はマージ済みであり、アップデート後に利用可能になります。

「いいね!」 8

ありがとうございます!Maker Forums にデプロイしました :tada:

「いいね!」 5