30:[{"id":"6fb395b725bdae4dfcef220f58ba73275ea3d117f90ba3bae3f4bf1cfc0a8e5855f1471b1ca106d2b9ec262e9238211ae3101888c43655e469ffa64994e1f9e8","href":"https://static.observableusercontent.com/files/6fb395b725bdae4dfcef220f58ba73275ea3d117f90ba3bae3f4bf1cfc0a8e5855f1471b1ca106d2b9ec262e9238211ae3101888c43655e469ffa64994e1f9e8","name":"six-rings.png","type":"image/png","lastModified":1636088857048.092,"size":41660}] 2e:{"title":"2021-11-05 SVG入門","cells":[{"id":0,"value":"md`# 2021-11-05 SVG入門`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"bannerTitleTwoLine(\n \"2021年度ネットワーク演習II・実習II\",\n \"SVG入門\",\n \"steelblue\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"md`### SVG入門\n\nSVG（Scalable Vector Graphics）はテキストベースの画像フォーマットです。\nSVGでは、どんな画像を表示するかを、HTMLタグによく似た簡単なマークアップコードの記述で指定します。\n実際、SVGのコードをHTMLドキュメント内に直接記述することができます。\n最近ではWebサイトの画像でもよく使われています。\nたとえば、このページ右上のボタンの小さなアイコンはSVGです。\n\n参考：\n\n- [SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/ja/docs/Web/SVG)\n- [SVG教本 - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial)\n\nSVGは次のように書きます。\nwidth属性とheight属性は必ず指定するようにします。\n\n\\`\\`\\`html\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":923,"value":"md`\n上は空っぽのSVGです。\n何も見えませんが、上の空白スペース上でマウスを右クリックし、コンテキストメニューから「要素を検証」を選びます。\nWebインスペクタが開き、svg要素があることがわかります。\n反転表示されている行にマウスカーソルを持っていけばブラウザ上の対応する領域がハイライト表示されます。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"#### SVGの図形描画\n\nsvg要素のなかには多くの視覚要素を記述できます。\n\n- `rect`　矩形\n- `circle`　正円\n- `ellipse`　楕円\n- `line`　直線\n- `path`　パス\n- `text`　文字\n\nSVGはピクセルベースの座標系で、描画領域の左上が原点`(0, 0)`です。\nコンピュータグラフィックスでは一般的な座標系です。\nX座標は右方向に、Y座標は下方向に移動します。","pinned":false,"hidden":false,"mode":"md"},{"id":935,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md`\n**rect**\n\nrect は長方形を描きます。\nx と y で長方形の左上の座標を指定し、 width と height でサイズを指定します。\n次の例では、長方形は親要素 svg の領域すべてをおおっています。\n\n\\`\\`\\`html\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"md`\n**circle**\n\ncircle は円を描きます。\ncx と cy で円の中心の座標（ center-x, center-y ）を指定し、r で半径（ radius ）を指定します。\n次の例では、cxに 100を指定しているため、円は 200 ピクセル幅の SVG 領域の中心に位置します。\n\n~~~html\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"md`\n**ellipse**\n\nellipse は楕円を描きます。circle に似ていますが、円と違うのは横方向（rx）と縦方向（ry）のそれぞれの半径を指定する必要があることです。\n\n~~~html\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"md`\n**line**\n\nline は線を描きます。\nx1 と y1 で線分の一方の端の座標を指定し、x2 と y2 でもう一方の端の座標を指定します。\n線を表示するためには stroke で線の色を指定しなければなりません。\n\n~~~html\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`\n**text**\n\ntext は文字を描きます。\nx で文字の左端の座標を指定し、y で文字のベースラインの縦座標を指定します（アセンダライン＝上端の座標でなく、ベースラインの座標であることに注意してください）。\n他のシェイプ要素とは異なり、text 要素は開始タグと終了タグで表示する文字列を囲みます。\n\n~~~html\n超簡単 yey!\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":972,"value":"md`特に指定のない限り、text は CSS で指定された親要素のフォントスタイルを継承します。\n上のサンプルの文字のフォーマットが、地の文のフォーマットと同じである点に注意してください。\nこのフォーマットを上書きするには以下のように指定します。文字色の指定には fill を使います。\n\n~~~html\n超簡単 yey!\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"md`要素の位置に注意してください。\nSVG の境界をはみだした部分は切れてしまいます。\nとくに text を使う場合、ディセンダ部分（文字のベースラインより下の部分）が切れないよう注意します。\n下のサンプルのように、ベースラインの座標（y）が SVG の高さ（100）と同じ場合などに発生します。\n\n~~~html\n超簡単 yey!\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":996,"value":"md`\n**path**\n\npath は、ここで紹介した単純な図形よりも複雑な形状を描きます（地図の境界線など）。\nここでは説明を省略します。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"md`### SVG 要素のスタイル設定\n\nデフォルトの SVG のスタイルは、fill が黒、stroke は無しです。\nこれ以外のスタイルに設定したい場合は自分でスタイルを指定します。\n以下、一般的な SVG のプロパティについて解説します。\n\n- fill（塗りつぶしの色）: 色を表す値。CSS と同様、次の表記が可能です。\n - 色名 : orange\n - 16進数値 : #3388aa または #38a\n - RGB値 : rgb(10, 150, 20)\n - RGBA値（A=アルファ値（透明度）） : rgba(10, 150, 20, 0.5)\n - HSL値\n - HSLA値\n- stroke（外形線の色）: 色を表す値（同上）。\n- stroke-width（線の太さ） : 数値（通常はピクセル単位）。\n- opacity（透明度） : 0.0（完全に透明）から 1.0（完全に不透明）の間の数値。\n\ntext 要素には次の属性も設定可能です。\n指定方法は CSS と同じです。\n\n- font-family\n- font-size\n\nHTML 要素も SVG 要素も、どちらも2通りの方法でスタイルを設定できます。\n\n1. 直接（インラインで）要素の属性として設定する方法\n2. CSS スタイルルールを適用する方法\n\n次の例では、circle 要素に属性を直接設定しています。\n\n~~~html\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"md`SVGの座標系は左上が原点です。\n画像全体のサイズは50 × 50px。\nその中心座標から半径20pxの円を描きます。\n円の色はyellow、線の色はorange、線の太さは2pxです。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"md`#### CSSでスタイル設定する\n\nCSS でスタイルを設定するには、まず circle からスタイル属性を取り除いてクラスを割り当てます（通常の HTML 要素と同じ方法です）。\n\n~~~html\n\n~~~\n\n次に CSS で、そのクラスに fill、stroke、stroke-width の各ルールを設定します。\n\n~~~css\n.pumpkin {\n fill: yellow;\n stroke: orange;\n stroke-width: 2;\n}\n~~~\n\n両者の比較では、CSS の方にいくつかメリットがあります。\n\n1. 一度設定したスタイルを複数の要素に適用できる。\n2. 通常、インライン属性より CSS コードの方が読みやすい。\n3. 以上の理由で、メンテナンス性が高く、デザイン変更が容易。\n\nCSS で SVG要素のスタイル設定をしていると、ほかの一般的な HTML 要素の設定と混乱してしまうことがあります。\nfill や stroke、stroke-width が CSS のプロパティ**ではない**からです（よく似た意味の CSS プロパティに background-color や borderがあります）。\nこの場合、セレクタに要素名 svg を入れておけば、どのルールが SVG 用途なのかが分かりやすくなるでしょう。\n\n~~~css\nsvg .pumpkin { /* SVG の子のうち pumpkin クラスの要素 */\n /* ... */\n}\n~~~\n\n**［注意］**\nCSSにはデメリットがあります。\nSVG要素の内部で定義していないため、SVG画像を書き出す場合にスタイルが失われてしまうことがあります。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"md`### レイヤーと描画の順序\n\nSVG にはレイヤーも深度の概念もありません。\nCSS の z-index プロパティもサポートしていません。\nそのためすべての図形は、1枚の xy 二次元平面上に配置されます。\n\n複数のシェイプを描くと、下図のように重ねて配置されます。\n\n~~~html\n\n\n\n\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1032,"value":"md`各図形の深度（重ねられる順）は、要素のコードが書かれた順によって決まります。\n緑色の四角形のコードは一番最初に書かれており、したがって最初に描画されます。\n次に黄緑色の四角形が緑色の「上」に描かれ、その上に黄色と続きます。\n\nSVG の図形は、キャンバスに描かれる絵と同じように描画されると理解してください。\n後からピクセル描画された図形は、先に描かれた図形を覆いかくし、その結果「手前」に表示されるのです。\n\nある視覚要素を、常にほかの要素の前面に表示したい場合、この描画順序の仕組みが重要になります。\nたとえば散布図に軸や値ラベルなどを描く場合です。軸とラベルを一番最後に SVG に追加することで、他の要素の前面に表示することができます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"md`### 透明度\n\n視覚化作業において、要素に透明度をくわえると大変効果を発揮することがあります。\nたとえば重なった要素を見えるようにしておきたい場合や、ある要素を強調し、他の要素を弱めたい場合などです。\n\n透明度を設定するには、以下の2つの方法があります。\n\n1. アルファつきの RGB/HSL 色を使う方法\n2. opacity に値を設定する方法\n\nfill や stroke などの色は rgba() や hsla() を使って指定することができます。\nrgba() では、赤、緑、青それぞれに 0 から 255 の間の値、アルファ値（透明度）に 0.0 から 1.0 の間の値を指定します。\n\n~~~html\n\n\n\n\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1043,"value":"md`fill と stroke にはそれぞれ個別に透明度を設定できます。\n次の図の円は、fill の透明度を 75%、stroke の透明度を 25% にしています。\nなお、円が三重に見えているのは、stroke-width の太さは円周の外側に 10 ピクセルではなく、円周を中心に外側に 5 ピクセル、内側に 5 ピクセルずつ広がっていて（合計 10 ピクセル )、内側が fill の色と重なっているためです。\n\n~~~html\n\n\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"md`同じ円に、順に opacity 0.9、0.5、0.1 を設定します（値が 0.0 に近づくほど透明）。\n\n~~~html\n\n\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md`rgba() 色を設定した要素に、さらに opacity を設定することもできます。\nその場合の透明度は、両者の透明度の掛け合わせ（積）です。\n次の3つの円の fill と stroke の RGBA 値の組み合わせは同一ですが、最初の円には opacity は設定されておらず、残り2つの円には、それぞれ 0.5 と 0.2 の opacity が設定されています。\n\n~~~html\n\n\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"md`3つ目の円の opacity は 0.2、つまり 20% です。\nしかし紫色の fill にはすでにアルファ値として 0.75、つまり 75% が設定されています。\nその結果、最終的な透明度は、0.2 と 0.75 の積で 0.15、すなわち 15% になります。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"### 練習問題\n\n__第1問__ \n次のイメージのSVGをObservableで作成してください。座標や色などは厳密に一致させる必要はありません。\nできあがったら、自分なりにアレンジしてください。","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"FileAttachment(\"six-rings.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md`### 完成報告\n\n練習ノートブックを公開し、URLをこのセルにコメントしてください。\n\n締切：11月12日（金）14:40まで\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"import { bannerTitle, bannerTitleTwoLine } from \"@observablehq/banner\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}