日日是Oracle APEX: SVGのロゴをメニューに表示する

2023年5月14日日曜日

SVGで提供されているロゴをメニューに表示してみます。今回はOpenAIのロゴを使用します。APEXで作ったアプリにChatGPTのAPIを呼び出す機能を加えたときに、役に立つかもしれません。

SVGのロゴのありかをOpenAIのChatGPT（GPT-3）に聞いてみました。

おそらく2021年までは回答の場所にあったのだと思いますが、現在はhttps://openai.com/brand#logosにありました。Download logosをクリックするとopenai-logos.zipというファイルがダウンロードされます。

SVGのロゴは、openai-logos.zipを展開すると作成されるディレクトリSVGs以下に、openai-logomark.svg（黒）、openai-white-logomark.svg（白）として含まれています。

SVGs % ls -l

total 40

-rw-r--r--@ 1 ********** staff 2946 4 11 06:44 openai-lockup.svg

-rw-r--r--@ 1 ********** staff 1735 4 11 06:45 openai-logomark.svg

-rw-r--r--@ 1 ********** staff 4141 4 11 06:46 openai-white-lockup.svg

-rw-r--r--@ 1 ********** staff 2414 4 11 06:47 openai-white-logomark.svg

SVGs %

APEXアプリケーションの共有コンポーネントの静的ワークスペース・ファイルを開きます。

SVGのデータを使ってCSSクラスを作成するには、２通りの方法があります。

ファイルをアップロードするには、ファイルの作成をクリックします。

コンテンツを指定するためにファイルをドラッグ・アンド・ドロップをクリックして、ファイルを選択します。または、書いてある通りファイルをドラッグ・アンド・ドロップします。

作成をクリックすると、選択したファイルが静的ワークスペース・ファイルとしてアップロードされます。

openai-logomark.svgとopenai-white-logomark.svgをアップロードします。

アップロードしたSVGファイルを参照するCSSクラスを作成します。ファイルのアップロードと同様に、ファイルの作成をクリックします。

ファイル名はvendor-logos.cssとします。コンテンツを選択せずに作成をクリックすると、ファイルが新規作成されます。

ファイルの内容として以下を記述します。ファイルの拡張子がcssであれば、変更の適用時に自動的にミニファイされたCSSファイルも作成されます。参照はAPEXアプリケーションから、このCSSファイルの読み込むために使用します。あらかじめ、コピーしておきます。

	.openai-logomark {
	background-image: url("openai-logomark.svg");
	background-repeat: no-repeat;
	display: block;
	background-position: center center;
	background-size: contain;
	width: 16px;
	height: 16px;
	}

	.openai-white-logomark {
	background-image: url("openai-white-logomark.svg");
	background-repeat: no-repeat;
	display: block;
	background-position: center center;
	background-size: contain;
	width: 16px;
	height: 16px;
	}