31:[] 2f:{"title":"SVG Introdunction / SVG入門","cells":[{"id":1223,"value":"# SVG Introdunction / SVG入門","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"banner(\"SVG入門\", {\n backgroundColor: \"hsl(220, 40%, 50%)\",\n textColor: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"### SVG入門\n\nSVG（Scalable Vector Graphics）はテキストベースの画像フォーマットです。\nSVGでは、どんな画像を表示するかを、HTMLタグによく似た簡単なマークアップコードの記述で指定します。\n実際、SVGのコードをHTMLドキュメント内に直接記述することができます。\n最近ではWebサイトの画像でもよく使われています。\nたとえば、このページ右上のボタンの小さなアイコンはSVGです。\n\nここでは基本的な要素やスタイルを紹介しています。\nさらに詳しい情報は、次のページにあります。\n\n- [SVG: スケーラブルベクターグラフィック | MDN](https://developer.mozilla.org/ja/docs/Web/SVG)\n- [SVG教本 - SVG: スケーラブルベクターグラフィック | MDN](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial)","pinned":false,"hidden":false,"mode":"md"},{"id":1229,"value":"#### SVG要素の属性\n\nSVGは次のように書きます。\nつぎのいずれかの属性は必ず指定します。\n- width属性とheight属性\n- viewBox属性","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"~~~html\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":921,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":923,"value":"md`\n上は空っぽのSVGです。\n何も見えませんが、上の空白スペース上でマウスを右クリックし、コンテキストメニューから「要素を検証」を選びます。\nWebインスペクタが開き、svg要素があることがわかります。\n反転表示されている行にマウスカーソルを持っていけばブラウザ上の対応する領域がハイライト表示されます。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"- xmlns属性\n\nsvg要素にxmlns属性が指定するサンプルもありますが、HTML内で使用する場合は不要です。\n\n~~~html\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"- viewBox属性\n\nsvg要素に`viewBox`属性を指定すると、表示するビューポートの座標を指定できます。\n\n`min-x, min-y, width, height`の順に、半角スペースかコンマで区切って書きます。\n`min-x, min-y`にはマイナス値も指定できます。","pinned":false,"hidden":false,"mode":"md"},{"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":"","pinned":false,"hidden":false,"mode":"md"},{"id":938,"value":"#### rect\n\n**rect要素で矩形（長方形）**を描きます。\nx と y で矩形の左上の座標を指定し、 width と height でサイズを指定します。\n次の例では、矩形は親要素 svg の領域全体をおおっています。\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":941,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":943,"value":"#### circle\n\n**circle要素で円**を描きます。\ncx と cy で円の中心の座標（ center-x, center-y ）を指定し、r で半径（ radius ）を指定します。\n次の例では、cxに 100を指定しているため、円は 200 ピクセル幅の SVG 領域の中心に位置します。\n\n~~~html\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":951,"value":"#### ellipse\n\n**ellipse要素で楕円**を描きます。\ncircle要素に似ていますが、円と違い、横方向（rx）と縦方向（ry）のそれぞれの半径を指定します。\n\n~~~html\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":955,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":958,"value":"#### line\n\n**line要素で直線**を描きます。\nx1 と y1 で線分の一方の端の座標を指定し、x2 と y2 でもう一方の端の座標を指定します。\n線を表示するためには stroke で線の色を指定しなければなりません。\n\n~~~html\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":964,"value":"#### text\n\n**text要素で文字**を描きます。\nx で文字の左端の座標を指定し、y で文字のベースラインの縦座標を指定します（アセンダライン＝上端の座標でなく、ベースラインの座標であることに注意してください）。\n他のシェイプ要素とは異なり、text 要素は開始タグと終了タグで表示する文字列を囲みます。\n\n~~~html\n超簡単 yey!\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":968,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":972,"value":"とくに指定しない場合、text は CSS で指定された親要素のフォントスタイルを継承します。\n上のサンプルの文字のフォーマットが、地の文のフォーマットと同じである点に注意してください。\nこのフォーマットを上書きするには以下のように指定します。文字色の指定には fill を使います。\n\n~~~html\n超簡単 yey!\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":977,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":979,"value":"要素の位置に注意してください。\nSVG の境界をはみだした部分は切れてしまいます。\nとくに text を使う場合、ディセンダ部分（文字のベースラインより下の部分）が切れないよう注意します。\n下のサンプルのように、ベースラインの座標（y）が SVG の高さ（100）と同じ場合などに発生します。\n\n~~~html\n超簡単 yey!\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":991,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":996,"value":"#### path\n\n**path要素でさまざまな形**を描きます。\nロゴや地図の境界線など、ここで紹介した単純な図形よりも複雑な形状が描けます。\npathのd属性に座標指定が入っています。\nこの内容を手で書くのはむずかしいので、ドローイングソフトのAdobe IllustratorやFigma、[Inkscape](https://inkscape.org/ja/)でSVGを保存して、SVGをテキストエディタで開いて該当部分をコピーペーストすることをすすめます。","pinned":false,"hidden":false,"mode":"md"},{"id":999,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1005,"value":"### 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\n`text` 要素には次の属性も設定可能です。\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~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1009,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1012,"value":"SVGの座標系は左上が原点です。\n画像全体のサイズは50 × 50px。\nその中心座標から半径20pxの円を描きます。\n円の色は `yellow`、線の色は `orange`、線の太さは `2px`です。","pinned":false,"hidden":false,"mode":"md"},{"id":1015,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1018,"value":"#### 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 要素の設定と混乱してしまうことがあります。\n`fill` や `stroke`、`stroke-width` は CSS のプロパティ**にはない**からです（よく似た意味の CSS プロパティに `background-color` や `border`があります）。\nこの場合、セレクタに親要素の名前 svg を入れておくことで、どのルールが SVG 用途なのかが分かりやすくすることができます。\n\n~~~css\nsvg .pumpkin { /* SVG の子のうち pumpkin クラスの要素 */\n /* ... */\n}\n~~~\n\n**［注意］**\n外部CSSにはデメリットがあります。\nSVG要素の内部で定義していないため、SVG画像を書き出す場合にスタイルが失われてしまうことがあります。\nこれを防ぐために、SVG要素の内部にstyle要素を書く方法もあります。","pinned":false,"hidden":false,"mode":"md"},{"id":1025,"value":"### レイヤーと描画の順序\n\nSVG にはレイヤーも深度の概念もありません。\nCSS の z-index プロパティもサポートしていません。\nそのためすべての図形は、1枚の xy 二次元平面上に配置されます。\n\n複数のシェイプを描くと、下図のように重ねて配置されます。\n\n~~~html\n\n\n\n\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1030,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1032,"value":"各図形の深度（重なり順）は、要素のコードを書いた順によって決まります。\n緑色の四角形のコードは一番最初に書いているため、最初に描画されます。\n次に黄緑色の四角形が緑色の「上」に描かれ、その上に黄色とつづきます。\n\nSVG の図形は、キャンバスに描かれる絵と同じように描画されると理解してください。\n後からピクセル描画された図形は、先に描かれた図形を覆いかくし、その結果「手前」に表示されるのです。\n\nある視覚要素を、常にほかの要素の前面に表示したい場合、この描画順序の仕組みが重要になります。\nたとえば散布図に軸や値ラベルなどを描く場合です。軸とラベルを一番最後に SVG に追加することで、他の要素の前面に表示することができます。","pinned":false,"hidden":false,"mode":"md"},{"id":1036,"value":"### 透明度\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~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1041,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1043,"value":"fill と stroke にはそれぞれ個別に透明度を設定できます。\n次の図の円は、fill の透明度を 75%、stroke の透明度を 25% にしています。\nなお、円が三重に見えているのは、stroke-width の太さは円周の外側に 10 ピクセルではなく、円周を中心に外側に 5 ピクセル、内側に 5 ピクセルずつ広がっていて（合計 10 ピクセル )、内側が fill の色と重なっているためです。\n\n~~~html\n\n\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1048,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1050,"value":"同じ円に、順に opacity 0.9、0.5、0.1 を設定します（値が 0.0 に近づくほど透明）。\n\n~~~html\n\n\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1055,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1057,"value":"rgba() 色を設定した要素に、さらに opacity を設定することもできます。\nその場合の透明度は、両者の透明度の掛け合わせ（積）です。\n次の3つの円の fill と stroke の RGBA 値の組み合わせは同一ですが、最初の円には opacity は設定されておらず、残り2つの円には、それぞれ 0.5 と 0.2 の opacity が設定されています。\n\n~~~html\n\n\n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1062,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1064,"value":"3つ目の円の opacity は 0.2、つまり 20% です。\nしかし紫色の fill にはすでにアルファ値として 0.75、つまり 75% が設定されています。\nその結果、最終的な透明度は、0.2 と 0.75 の積で 0.15、すなわち 15% になります。","pinned":false,"hidden":false,"mode":"md"},{"id":1207,"value":"#### SVGのネスト\n\nSVGの内部にSVGを入れることもできます。\n\n下の例では、右の半径4の円が入れ子になったSVGです。\nviewBoxのサイズは、10 x 10 ですが、width属性を100にしているので、10倍に拡大されています。","pinned":false,"hidden":false,"mode":"md"},{"id":1211,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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 \"@sugi2000/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"import { banner } from \"@sugi2000/banner\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"import { bannerTitle, bannerTitleTwoLine } from \"@observablehq/banner\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}