🏠
🌡️ 📆 令和5年12月7日

SVG

SVGは、 ベクトルグラフィックスを記述するXMLです。 地図や線図などを表現するのに適しています。


表   1 SVG ( XML)の要素と属性
要素 属性
svg viewBoxで、ワールド座標系を設定します。 width, heightで、html内のboxを設定しますが、 レスポンシブデザインの場合は、省略するのがおすすめです。
g
symbol
clipPath idを設定して、クリッピング領域を設定します。 ネストすることもできます。 その場合、fill-ruleを設定します。
path dコマンドで図形を描画できます。 ベジェ曲線 “M”は基点、開始点を示し、”C”は三次ベジェ曲線を描画する。 二次ベジェ曲線 :コーナーを丸めるとき使う。 三次ベジェ曲線 :先端を丸めるとき使う。
polygon pointsでワールド座標系の座標を設定します。 fillでRGBを設定します。 styleで設定もできます。
05 情報処理概論 XML-SVG SVG 図形 グラフ 素材

canvasとsvg

表   2 ベクター・グラフィックスとしての canvas と svg
項目 canvas svg
画像としてダウンロード JavaScriptで、 ビットマップに描画するので、 png形式 で可。 xmlの記述を ブラウザがレンダリングするので直接は不可。 svgをファイルにして、パワーポイントに読み込み、png形式で保存することで可能。
クローラ/読み上げ クローラには何が書いてあるかわらない。 Google Lensなら少しわかるかも。 xmlの記述なので、マシンリーダブル。読み上げも可能かも。
―蝙蝠山卿の暗黒學問塾― Canvas APIの基礎

表   3 色
種類 RGB HSB /HSL CMYK
概念 加法混色 光源色 色相環 通信 減法混色 物体色(表面色、透過色)
蛍光色、金属光沢を除く
表現 Red ff0000
green 00ff00
blue 0000ff
cyan 00ffff
magenta ff00ff
yellow ffff00
用途 ディスプレイ HTML、CSS、 SVG 通信 印刷 プリンター、カメラ
ジャンル エネルギー 情報 材料
図形 配色 12 無機工業化学 05 情報処理概論 色度座標 スペクトル

米沢市市街

松川 米沢駅 南米沢駅 上杉神社 米沢キャンパス
図   1 ◇ 米沢市市街
gmaps

太陽エネルギー 二酸化炭素 蓄電池 ソーラーパネル 電気自動車
図   2 低炭素住宅 と V2H

V2Hとは、 電気自動車の電池を、 住宅の電池(ESS)にリユース することです。 電気自動車の 電池容量は、 40kWh程度とすれば、住宅の電池10kWhの4世帯分に相当します。

しかし安全に リユース するには、バッテリーのインスペクションが欠かせません。


表   4 表現のためのファイル形式の例
表現
◇バイナリ形式

任意のビット列

◇テキスト形式

文字コードのみ

ネイティブ 圧縮テキスト テキスト ◇ XML
文書 doc docx ◇html,html5 xhtml
表計算 xls xlsx ◇csv
図形 ◇MWF,EMF vml ◇ svg
チャート UML
地図 ◇G-XML,GML
数式 マセマティカ ◇TEX ◇ MathML
化学式 SMILES CML
楽譜 MIDI MML MusicXML
3D VRML X3D
画像 (image) jpg,png
音楽 (audio) wav,mp3,wma
ビデオ (video) mp4,mov
アプリ exe,dll vb,js,asp