SVG...やるやん

こんにちは！

京都開発研究所受託プロダクトチームのインターン生、村高歩夢です！

今日、前振りのネタをchatGPTに書かせてみようと思って試してみたんです。

そうしましたら、chatGPTが考えるお話が小学校の朝礼の校長先生のお話と同じくらい面白くて、ついログアウトしました。

書かせ方が悪かったんですかね〜。試し続けてみたいと思います。

みなさんSVGご存知ですか？

香川選手がいたクラブ？

あ〜、それドルトムントやね。ロゴのBVBと間違えてるね。違うね、全然。

SVGは画像のファイル形式の一つです。

PNGとかJPEGとかは聞いたことありますよね。それと同じです！

ちなみにSVGの特徴ご存知ですか？

うんうんうん、モットーは「真実の愛」、黄色と黒がトレードマーク、所属はブンデス..だからそれドルトムントやね？？

何が悲しいってこれを一人で書いていること。

はい、気を取り直して、SVGは「画像の大きさを変更できる」という点に最大の特徴を持っています。

そもそも、SVGの正式名称は「Scalable Vector Graphics」、日本語訳すると「大きさを変えられる画像」。そのままですね。

でも、他の画像もcssならwidthとかheightプロパティでサイズ変更できるじゃ〜んって考えている人！

とても鋭いですね〜。

僕ね。言葉足らずでして、SVGの特徴ちゃんと説明できてないないです。

本当は「画像の大きさを変えても美しいまま表示ができる」

これがSVGの特徴です。画像を拡大するとギザギザになりますよね。SVGはこれがありません！

読み込んで表示する他の画像と違い、SVGはブラウザがその場で描画を行うため、ギザギザにならないみたいですね〜。

今日僕がSVGについて書こうと思ったのもこの辺りのことを実感したからでして、

本日のコーディング、SVGファイルを生まれて初めて利用したんです。

コードで見るとわかりやすいんですけれど、SVGファイルってリンクを張らなくていいんです。

他の画像ファイルの場合、htmlファイルのそばにある画像ファイルを読み込むため、htmlファイルに画像ファイルのリンクを書き込むんですね。

でも、svgファイルはそれがない。

なぜなら、SVGファイルはピクセル値ではなく座標や色のデータが収められているから。もっと端的に言うと、SVGはhtml言語で書くことができるから。

何言ってるか分からない人のために簡易図にすると、

○画像がウェブページに出力されるまでの図

1, SVG

htmlファイル→webページ

2, 他の画像

htmlファイル→画像ファイル→webページ

分かります？

これね。→の回数少ないでしょ？

ってことはwebページのレスポンス向上が期待できるってことなんですよ！

SVG..web界のブンデスリーガ1位です。

---------------------------------------------------------------------------------------------

インターン募集ページ: https://guardian.jpn.com/recruit/intern/

メンバー紹介ページ：https://guardian.jpn.com/member/Murataka_Ayumu/

---------------------------------------------------------------------------------------------