はじめに
C++ や Python のプログラミング学習で「Hello World」を終えた後、教科書通りに if 文やループ処理の文法を延々と学ぶのは、少し退屈に感じることがあります。そこで今回は、ファイル操作や外部ライブラリの導入も一切なしで、使い慣れた print（標準出力）の知識だけで「ブラウザで開けるきれいな画像ファイル」を生成する手順をご紹介します。
ステップ 1 では「シンプルな四角形」、ステップ 2 では「プログラミングの力を使った美しいグラデーション」を作ります。
仕組み：標準出力とリダイレクト
プログラムが画面に文字を出す仕組みを「標準出力」と呼びます。通常はコマンドプロンプトやターミナルの画面に文字が流れるだけですが、実行時に > という記号（リダイレクト機能）を使うことで、その文字をそのままファイルに書き込むことができます。
今回は、Web ブラウザが直接解釈して画像として描画できる SVG（Scalable Vector Graphics） フォーマットのテキストデータをプログラムから出力し、それをファイル化します。
仕様を極限までスッキリさせるため、今回は以下の工夫を施しています。
- 属性値の囲みをシングルクォーテーション（
'）にしています - 現代のブラウザは先頭の
<svg>タグだけで自動認識するため、 XML 宣言は省略しています
ステップ 1：まずは基本の図形を描いてみる
最初のステップとして、「スカイブルーの四角形」を1つ描画するシンプルなコードから。
C++ 版のコード
#include <iostream>
int main()
{
// std::cout << "<?xml version='1.0' encoding='UTF-8'?>\n" ;
std::cout << "<svg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>\n" ;
std::cout << " <rect x='20' y='20' width='160' height='100' fill='skyblue' stroke='black' stroke-width='2' />\n" ;
std::cout << " </svg>\n" ;
return 0 ;
}
Python 版のコード
def main():
print("<svg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>")
print(" <rect x='20' y='20' width='160' height='100' fill='skyblue' stroke='black' stroke-width='2' />")
print(" </svg>")
if __name__ == "__main__":
main()
動かし方の解説
実行コマンド：
どちらの言語でも、OS のリダイレクト機能（>）を使えば同じような SVG ファイルが作成されます。
C++ の場合：main.exe > rect.svg
Python の場合：python main.py > rect.svg
生成された rect.svg を、普段使っている Web ブラウザにドラッグ＆ドロップしてみてください。きれいな空色の四角形が表示されます。
ステップ 2：プログラミングの力で「グラデーション」を作る
単一の四角形を出すだけなら、手書きで SVG ファイルを作っても同じです。しかし、プログラミングの本領はここからです。
次は for 文によるループ処理と計算を組み合わせることで、「赤から緑へとなめらかに変化する、美しいグラデーション画像」を生成してみます。
C++ 版のコード（グラデーション）
#include <iostream>
int main ()
{
std::cout << "<svg width='256' height='200' viewBox='0 0 256 200' xmlns='http://www.w3.org/2000/svg'>\n" ;
for (int i = 0 ; i < 256 ; i++) {
int r = 255 - i ; // red
int g = i ; // green
int b = 0 ;
int x = i ;
std::cout << " <line x1='" << x
<< "' y1='0' x2='" << x
<< "' y2='" << 200
<< "' stroke='rgb("
<< r << "," << g << "," << b
<< ")' stroke-width='1' />\n" ;
}
std::cout << " </svg>\n" ;
return 0 ;
}
Python 版のコード（グラデーション）
def main():
print("<svg width='256' height='200' viewBox='0 0 256 200' xmlns='http://www.w3.org/2000/svg'>")
for i in range(256):
r = 255 - i # red
g = i # green
b = 0
x = i
print(f" <line x1='{x}' y1='0' x2='{x}' y2='200' stroke='rgb({r},{g},{b})' stroke-width='1' />")
print(" </svg>")
if __name__ == "__main__":
main()
同じようにリダイレクト機能を使って grad.svg などのファイル名で保存し、ブラウザで開いてみてください。ループカウンタ i の変化に合わせて、線の位置（x）が右に移動しながら、同時に赤（r）が減り、緑（g）が増えていくという動作が確認できます。
おわりに
ファイルの入出力やグラフィックの文法を本格的に学ぶ前でも、アイデア次第でここまで面白い成果物を作ることができます。
さらに深く学びたい方へ（参考リンク）：
-
初心者のためのSVG (Scalable Vector Graphics) 入門 - Qiita
circle（円）やline（直線）など、SVG で使える基本図形の書き方がチートシートとして綺麗にまとまっています。これらも同じようにprintやstd::coutで出力すれば、ループ処理を使って様々な幾何学図形を自動生成できます！
実際にこの標準出力グラフィックのロジックを Synology NAS の CGI 環境や、PHP 環境での動作などについては、以下のブログ記事に記述しています。
※ 本記事の構成および文章の作成には、生成 AI を利用しています。