今日もお疲れ様です！めろすけです！
今日は、地図を使ったアプリを作りたくてSVGファイルについて調べた疑問を整理しました。
SVGファイルが必要になった背景
都道府県、または世界地図に色をつけて遊ぶ地図系のアプリを作りたい！と思った時に、SVGファイルの存在を知りました。
でも使い方が全くわからない、、、となったので、同じような方に向けて、私なりに本ブログ記事で整理しようと思いました。
SVGファイルについてChatGPTに聞いた内容をGeminiで要約した画像です。Geminiすご。SVGファイルとは
SVGファイルについて、ChatGPTに聞いてみると、以下の回答をもらえました。
SVGは一言でいうと、「画像を“点の集まり（ピクセル）”ではなく、“図形の設計図”として保存する形式」です。
拡大しても荒れにくく、プログラムで形や色をいじれるのが強み。拡大しても荒れにくく、プログラムで形や色をいじれるのが強み。
なるほど、一瞬で分かりましたね。
PNG/JPEG：写真みたいに、画像は「小さい四角（ピクセル）」の集合
→ 拡大すると四角が見えてガビガビになるSVG：画像は「円・線・四角・曲線」などの数式/座標で書かれた図形
→ どれだけ拡大しても、表示時に描き直すのでクッキリ
他の物に例えるなら以下のようなものだそうです。
PNG/JPEG = 「印刷した写真」
SVG = 「設計図」
ChatGPTは本当にすごいですね。
ここからは、どのように活用できるのか知りたいと思い、参考にした動画です。
参考動画①SVGファイルの基礎的な理解ができた動画
そもそもSVGファイルって何？という状態は、以下の動画で何となく理解できました！
【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】
参考動画②SwiftUIに直接的に役立った海外動画
英語になりますが、以下の動画は非常に参考になりました。
How I Control SVG Vector Images Like a Pro in SwiftUI! | Quiz Coloring App walkthrough
実装画面を見ながらやらないとコーディングが捗らない私にとっては、英語であっても関係なくコーディングできます。
今後、日本語で動画がないものは、どんどん翻訳してオリジナル動画を作ると需要があるのかな？と思いますが、どうなんでしょうね。
N=1（自分）は確実に存在するので、やってみたほうがいいのかなと思いますね。
やりたいことリストがどんどん増えていく一方です…！
結論、SVGファイルは通常の画像と違って一手間必要という内容でした。
ではまた！
