わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

正五角形を描こう・2021年度バージョン

 いきなりですが問題です.Cでプログラムを書き,以下を出力させました.

<svg xmlns="https://www.w3.org/2000/svg" width="400px" height="400px">
<rect x="0" y="0" width="400" height="400" fill="cyan"/>
<polygon fill="orange" stroke="black" stroke-width="6" points="200.000,20.000 371.190,144.377 305.801,345.623 94.199,345.623 28.810,144.377 "/>
</svg>

 Windowsのメモ帳を開いて上記をコピーし,pentagon.svgという名前にして(pentagon.svg.txtにならないようにして)保存し,ダブルクリックをすると,ブラウザ上で"This XML file does not appear to have any style information associated with it. The document tree is shown below."というメッセージと,このsvgファイルの中身が表示され,画像は出ませんでした.どうすれば,うまくいくんでしょうか?


 解答の前に少し解説です.先週のプログラミングの授業の出来事でした.PowerPointにナレーションを入れた,4つの動画を視聴後(または視聴しながら),プログラミング課題に取り組んでもらいました.SVGの生成は昨年度に引き続きの実施です.機械可読が重要なんだよ,人間の目で見れば「こんなんどーでもえーやん」と言いたくなることが,コンピュータからするとダメだったりするんだよ,といったことも,ナレーションに入れていました.
 上記は,授業中に学生からあった質問をある程度再現したものです(実際には正五角形と異なる図形から取り組んでもらいました).出力は,昨年の記事をもとにしています.

 といったところで解答です.昨年の記事の中のコードや,PowerPoint資料に記載していたSVGの例と見比べると,1行目が違っています.正しいものは:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px">

 冒頭のコードは:

<svg xmlns="https://www.w3.org/2000/svg" width="400px" height="400px">

 ということで,生成プログラムで「https」と書いていたところを「http」にするよう,学生に返答しました.ちなみにhttps://www.w3.org/2000/svgデッドリンクではなく,ブラウザでアクセスするとページが表示されるのですが,本文は"http://www.w3.org/2000/svg is an XML namespace,"で始まっています---httpsではなくhttpです.
 この件に先立ち,他の学生から,「<svg 」の次が「xmins」となっていて,同様のエラー表示が出た,という問い合わせもありました.
 まずは個別に学生に返答し,Teamsのチャネルで全体に呼びかけ,今週,課題の解答を作る中で,「誤答例」を列挙しました.

 実行結果の最初に

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px">

が期待されるところで、以下の出力ではいずれもSVG画像として認められません。

<svg xmins="http://www.w3.org/2000/svg" width="400px" height="400px">
<svg xmlns="https://www.w3.org/2000/svg" width="400px" height="400px">
<svg xmlns="http://www.w3.org/2000/svg"width="400px"height="400px">
<svg xmlns="http://www.w3.org/2000/svg" width="400px"height="400px">
<svg xmins="http://www.w3.org/2000/svg width="400px" height="400px">

 授業日に提出する課題を3つ,次回授業日の前日を締切とする宿題を1つ,設けました.いずれも,SVGを生成するCのソースファイルと,svgファイルを,アップロードにより提出してもらいました.宿題は,自由描画です.昨年度の採点方法*1と同じように,手元のgccやconvertのコマンドで処理していくと,PNG画像まで作られた答案も,途中で脱落した答案もありました.