SVGは画像なのに文字で作れる。1行のコードで640×360ロゴを描画

この記事のポイント

サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。

濃紺の角丸背景、青い円、白いプラス、RyXeon文字をSVG Viewerで描画。サイズは640×360と認識された。

検証環境：2026年10月10日、WindowsのCodex内蔵Chromium。SVG Viewerを無料・未ログインで利用した。

SVGはJPEGやPNGと違い、図形と文字をコードで指定するベクター画像である。今回は640×360の濃紺の角丸長方形に、青い円、白いプラス記号、「RyXeon」の文字を置くSVGを入力した。右側へすぐ描画され、画面には640×360と表示された。

背景はrect、円はcircle、プラスはpath、文字はtextで構成した。画像編集ソフトを開かず、色や位置を数値で直せる。

操作手順

viewBox="0 0 640 360"は、図形を置く座標空間を決める。表示サイズを小さくしても、ブラウザーはこの比率に合わせて図形全体を縮小するため、ロゴやアイコンに向く。

一方、text要素は閲覧環境に指定フォントがなければ代替フォントになる。文字の形を完全に固定したい配布用ロゴでは、最終版だけ文字をパスへ変換する方法が確実である。