🏠 🔋C1 Laboratory
令和8年10月4日 (日)

👨‍🏫svg

svg形式は、google スライドに読み込むことができません。 powerpointで読み込むことはできますが、 ベクトル形式で吐き出すことができません。 よってあらかじめ全てをsvg形式で作成する必要があります。 2024現在 Wordで読み込むことができ、pdfで吐き出すことができます。

図   1 . 
© 2026 S.Akiba
test

A4レイアウト

図   2 .  A4レイアウト
縦横比(アスペクト)は、 白銀比です。 幅210mm(8.2インチ)
高さ297mm(11.6インチ)
余白7mm〜15mm 有効幅180mm(7インチ) 10 ポイント アスペクト

外形線は、2pt(0.7mm)、 その他の線は、1pt(0.4mm)ぐらいが適当でしょう。

SVGでは、 viewBoxで、幅と高さを指定します。座標系なので数値は相対単位です。 A4版を想定するなら、210mm、297mmを単位なしで指定し、要素はmmで表現するがいいでしょう。 絶対指定のwidthとheightは指定せず、figureのstyleで指定すると レスポンシブでも表示しやすいです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0, 0, 210, 297">
<!--viewBoxは単位指定なし-->
<!--!widthとheightは指定せず親要素のstyleで-->
<g fill="#FF4433" stroke="#BB1111" stroke-width="10" >
</g>
<path d="M 5 10 h 30 q 10 5 -0 10 h -30 q -10 -5 0 -10 z" fill="white" />
</svg>

python で、 matplotlib .pyplotでは、図のサイズやアスペクト比は、 インチで指定します。 * 1インチは72ptです。 *

plt.rcParams['lines.linewidth'] = 1.5 #ポイント
plt.rcParams['font.size'] = 10 #ポイント
plt.rcParams['figure.figsize'] = [15, 10]
#fig, axes = plt.subplots(figsize=(7,4)) #プロットエリアをインチで指定(全幅)
#fig, axes = plt.figure(dpi=100, figsize=(4,3)) #dpiをインチで指定

化学プラント配管図面記号

表   1 .  化学プラント配管図面記号
名称 図記号
バルブ 1 ) 2 )
垂直 容器 ( 塔)
水平 容器 ( 槽、 タンク )
サイクロン
熱交換器
加熱炉 ( furnance )
液量調節計 FC
F:液量、 L:液位、 P:圧力、 T:温度、 A:成分
C:調節、R:記録計

化学工場では、 機械や 装置が使われます。 それらは、プラント記号として表現されます。 プロセスを 流れ図の形式で図面にしたものをプロセスフローシート プロセスフロー図( PFD:プロセスフローダイアグラム)と言います。 プロセスのフロー、制御、計装、設備、配管などを プラント記号 で書き込んで図面にしたものを 配管計装図(P&ID:Piping&Instrument Diagram)と言います。

pid-legend * * * 👨‍🏫 化学プラント用配管図記号

図   3 . 

図   4 .  svgの clipPath要素を使って 山形大学ロゴで、 写真を切り抜いた。

卒業論文、修士論文、博士論文、学術論文、特許明細書などでは、 図面、図表、 図形 の表現が併用されます。 グラフ、 回路図、 フローチャート、 写真、 イラスト(ロゴ、アイコン、アバター)、 地図などがあります。 3Dも図面です。 数式、 化学式、反応式などの 式も図面として、本文とは別に扱われます。

学術的な性質を有する 図面、 図表、 図形、音楽、 講演、 映画、 写真、建築、プログラムは、 著作権法 に定められた著作物です。 引用する場合は、慣例に従い、転載する場合は、転載許諾をとりましょう。 法令順守は研究 倫理 です。

表   2 .  著作物 *
分類
文芸 小説、脚本、 論文 、 講演 その他の言語の著作物。 編集の創作性がある場合、編集著作物として保護されます。新聞,雑誌,百科事典等。 講演 は、言語の著作物として保護され口述権が保護されます。 映画の著作物は、固定されることが求められますが、 講演は、口述のみで保護されます。
学術 地図 又は学術的な性質を有する図面、 図表、 模型その他の 図形の著作物
美術 絵画、版画、彫刻
写真 写真。 記録された画像は、著作物です。
建築 建築
音楽 楽譜、演奏。 記録された 音声は、著作物です。
舞踊又は無言劇の著作物 舞踊又は無言劇の著作物
映画 映画の著作物。 映画の著作物は、固定(記録)されることが求められます。 動画は、映画の著作物です。
プログラム プログラム の著作物
03.技術者倫理 01.化学英語Ⅱ 05.情報処理概論 参考文献 出版物

    (著作物の例示)

    第十条 この法律にいう著作物を例示すると、おおむね次のとおりである。

  • 一 小説、脚本、論文、講演その他の言語の著作物
  • 二 音楽の著作物
  • 三 舞踊又は無言劇の著作物
  • 四 絵画、版画、彫刻その他の美術の著作物
  • 五 建築の著作物
  • 六 地図 又は学術的な性質を有する図面、図表、模型その他の図形の著作物
  • 七 映画の著作物
  • 八 写真の著作物
  • 九 プログラムの著作物
著作権法より

思想又は感情は含まれていますか? 単なるデータは、ダメです。 表現したモノです。考えているだけ、感じただけ、アイデアだけ、ではダメです。 創作的なので、模倣はだめです。もちろん 盗用は、もってのほかです。 工業製品等は、文芸、音楽、美術、学術ではないのでダメです。 工業製品等の知的財産権は、特許を申請して、政府の保護を受けます。

著作権は、 知的財産権 です。 著作権は、著作者に帰属します。 著作権のうち、著作財産権を、出版社に許諾することができます。 出版社が、 出版権 を設定した場合、出版社は、著作者を含む他の許諾に対する損害請求できます。 この場合、出版社による 排他的独占的著作財産権の占有となります。

表面技術協会の例

表   3 .  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 図形 グラフ 素材

2dグラフィクス

表   4 .  2dグラフィクス
言語 形式
java script canvas png インタラクティブ、 アニメーションが可能。 Webアプリ向け。 3次ベジェ曲線 実装。
svg svg htmlに埋め込み可能。 ベクトルグラフィックスに関する機能が豊富。 3次ベジェ曲線 実装。 viewBox=を設定することで、ワールド座標系でグラフィクス可能。 一旦、svgファイルにしてpptにインポートすれば、pngに変換可能。 asp(Basic、サーバーサイド)で記述することも可能。
python matplotlib png

ワールド座標系でグラフィクス可能。ビュー座標系 / スクリーン座標系への煩わしい変換から解放されます。 ベジェ曲線とか、コーディングが必要かも。 縦軸、横軸にTeXが使えるので超便利。

svg matplotlibから svgに出力するには、
plt.savefig('fig1.SVG')
files.download("fig1.SVG")
plt.show()
のようにする。 *
PIL png Colaboからでは、img.show()ではなく、IPython.display のdisplay(img)を使うなど、ちょっと変則的。
OpenCV png グラフィックスというより画像処理向け。 Colaboからは、 matplotlib を使った出力になるので、ベクトルグラフィックスならば、matplotlib.patchesを使うのとあまり変わらないかも。

図面の線

表   5 .  図面の線
線の種類 線 用途
太い実線 外形線
細い実線 寸法線、引出線、 ハッチング
細い破線 かくれ線
細い一点鎖線 中心線、基準線
細い二点鎖線 想像線

製図(drawing)は工学部の基本。 外形線は太く0.7mm≒2pt以上で書きます(1.5ptぐらい)。 あいまいな線は描いてはいけません。 ほかの線は、0.5ptぐらいです。 Z8317-1:2008 によると矢印の末端記号は30°塗りつぶし矢,30°白抜き矢,30° 開き矢,90°開き矢,斜線(45°傾斜)と規定されており, 寸法数字の記述スペースから90°開き矢に近似される矢印記号に修正をしました. また,寸法数字ですが,最近の機械製図の教科書 3 ) や Z8317-1:2008 の例をみると,寸法数字はローマン体なので,イタリック体(斜体)からローマン体(立体) に修正しています.直径記号φは斜体のようです. html で描くときには svgなどのベクター形式を使います。 (工業技術基礎)


面取りされた図形


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

グラジュエーションとタイル


図表の縦横比

表   8 .  図表のアスペクト(縦横比)
縦横比
1:1 正方形、 コールコールプロット、アイコン、家紋など
白銀比 √2:1(1.4) ルート長方形、 A版、B版 ランドスケープ、ポートレートいずれも。 たとえば A4版は(210×297mm)です。 2段組みで75mm(2.9インチ)程度、 1段全幅で170(6.6インチ)mm程度です。 論文、要旨、 グラフ * 製図など。
発表番号 タイトル
図   5 .  ポスター
4:3(1.3) VGAディスプレイ(640px×480px)、 35mmフィルム powerpoint(25.4cm×19.05cm)
16:9(1.7) 4K ,8Kディスプレイ スライドなど。 powerpoint(33.867cm×19.05cm) ランドスケープで使うと臨場感がある。
黄金比 約5:8(1.6) 91mm×55mm
名刺、クレジットカードなど。 山形大学 准教授 伊藤智博 山形大学 大学院 理工学研究科 C1ラボラトリー 〒992-8510 山形県 米沢市 城南4丁目3-16 3号館( 化学・バイオ工学科) 3-3301 Tel: 0238-26-3753 URL: http://c1.yz.yamagata-u.ac.jp/ ランドスケープ、ポートレートいずれも。 mybridge
svg

python で、 matplotlib .pyplotでは、図のサイズやアスペクト比は、 インチで指定します。 * 1インチは72ptです。

#A4
plt.rcParams['figure.figsize'] = [8.35 ,5.91 ] #[21.21cm, 15.00cm]
plt.rcParams['font.size'] = 24
plt.rcParams['lines.linewidth'] = 1.5

plt.rcParams['figure.figsize'] = [15, 10]
fig, axes = plt.subplots(figsize=(7,4))
*

図形の要素

表   9 .  図形
名称 形式 グラフ 説明
星形
(多角形)
👨‍🏫 svg

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0, 0, 200, 200'>
<polygon points='100,0 158,180 4,69 195, 69 41,180'
 stroke='black' stroke-width='1' fill='none' />
</svg>
python + matplotlib patches. Polygon
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.patches as patches
import math

xy = [ (math.sin(p), math.cos(p))  for p in \
      np.arange(start = 0, stop = 4 * math.pi, step = 4 * math.pi/5)]

fig, ax = plt.subplots(figsize=(5.8, 4.2))
plt.axis("off")
ax.set_aspect('equal');ax.set_xlim([-1,1]);ax.set_ylim([-1,1])
ax.add_patch(patches.Polygon(xy, \
closed=True,facecolor="b",edgecolor="none"))

plt.show()
円
線分
👨‍🏫 svg
<line x1="10" y1="30" x2="180" y2="130"/>
直線
👨‍🏫

凝集 絡み合い 分子配向 (ラメラ構造) 共有結合  ゲル化のメカニズム
図   6 .  ゲル形成のメカニズム
ひょうぎ144講演大会より
4 )

山形大学のロゴ


クリッピングの例

図   8 .  svgの clipPath要素を使って 山形大学ロゴで、 写真を切り抜いた。

化学プラント配管図面記号

二酸化硫黄から硫酸までの製造プロセス

転化器
図   9 .  二酸化硫黄から硫酸までの製造プロセス
熱交換器 転化器 冷却器 吸収塔

石油精製の 脱硫装置から出た硫黄を燃焼し、二酸化硫黄にし、それを原料に 硫酸を製造する 。 転化器 では、 触媒を使っている。 転化器から発生した熱を巧みに原料ガスの予熱に使っている 5 ) 。 6 ) 。

かつては 鉛室法によっていた。

肥料(硫安)、 染料中間体、洗浄剤、 中和剤、酸触媒などに使われます。


化学プラント配管図面記号

表   10 .  化学プラント配管図面記号
名称 図記号
バルブ 7 ) 8 )
垂直 容器 ( 塔)
水平 容器 ( 槽、 タンク )
サイクロン
熱交換器
加熱炉 ( furnance )
液量調節計 FC
F:液量、 L:液位、 P:圧力、 T:温度、 A:成分
C:調節、R:記録計

化学工場では、 機械や 装置が使われます。 それらは、プラント記号として表現されます。 プロセスを 流れ図の形式で図面にしたものをプロセスフローシート プロセスフロー図( PFD:プロセスフローダイアグラム)と言います。 プロセスのフロー、制御、計装、設備、配管などを プラント記号 で書き込んで図面にしたものを 配管計装図(P&ID:Piping&Instrument Diagram)と言います。

pid-legend * * * 👨‍🏫 化学プラント用配管図記号

電気用図記号

表   11 .  電気用図記号
名称 図記号 摘要 用途
抵抗器 電気抵抗 9 )
コンデンサ 静電容量
1次電池
2次電池
計器 * アスタリスクは、種類を表す文字または図記号に置き換える。 A、V、Wなど。 回路計
半導体ダイオード
発光ダイオード 🚂 照明 バックライト 通信 レーザープリンタ
pnpトランジスタ
npnトランジスタ
機器または装置 IC、LSI
オペアンプ 演算増幅器とも呼ばれる 10 ) 。
NAND
モーター M
発電機 G 構内電気設備の配線用記号と共通 JIS C 0303
JIS C 617

JIS C による 11 )

✍ 73 電気用図記号や配線用図記号を描いてみよう

米沢市市街

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

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

LCCM住宅(ライフ・サイクル・カーボン・マイナス住宅)とは、ZEH(ネット・ゼロ・エネルギー・ハウス)よりさらに省CO2化を進めた先導的な脱炭素化住宅で、建設時、運用時、廃棄時において出来るだけ省CO2に取り組み、さらに太陽光発電などを利用した再生可能エネルギーの創出により、住宅建設時のCO2排出量も含めライフサイクルを通じてのCO2の収支をマイナスにする住宅です。 ※

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

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


実用電池での活物質の組み合わせと起電力

" -3.5" " -3.0" " -2.5" " -2.0" " -1.5" " -1.0" " -0.5" " 0.0" " 0.5" " 1.0" " 1.5" " 2.0" 電位 E / V vs. NHE " Zn 中性 " Cu " ダニエル電池 " Ag|AgCl " Li " Al " Zn アルカリ性 " MnO2 " マンガン電池 " Zn " NiOOH " ニッケル亜鉛 " Pb " PbO2 " 鉛電池 " H2 " O2 " 燃料電池 " Li " LiCoO2 " LIB
図   12 .  実用電池 での電極の組み合わせと起電力
© K.Tachibana * , C1 Lab.
⑦ ⑬ 079 エネルギー化学 ⑬ 無機工業化学 応用物理化学特論 svg 現代の電気化学p.68 無機工業化学p.46 11円電池

イオン化傾向の大きな物質(還元体、燃料、負極)と、小さな物質の組み合わせ(酸化体、酸化剤、正極)です。

電池から電流を取り出すことを放電と言います。 充電できる電池を二次電池または蓄電池と言います。 12 )

エネルギーは、電圧×電気量で、電気量は電池に詰め込む物質量で決まるので、エネルギー密度を上げようと思ったら、 電池の起電力 を大きくするしかありません。

今日、実用電池と呼ばれるもののほとんどが、 正極活物質には金属酸化物を、 負極活物質 に亜鉛を用いていること、電解液には アルカリ溶液(KOH)を用いること、 電池の名称に正極活物質の金属名を利用していることなどがわかる。 13 )

鉛電池(Pb酸)はこれまで二次電池の主役を果たしてきた。その最大の理由は電池構成材料コストの低廉さにある。 14 )


プリント配線基板の製造工程

架橋不溶化(露光- パターニング)
⬇
現像
⬇
⬇
⬇
図   13 .  プリント配線基板の製造工程
svg

15 ) 16 )

プリント基板