【SVG】編集可能なデザインデータをAIに作らせたい！

はじめに
生成AIを使ったデザイン制作の課題
万能なSVGファイル
作ってみる
実行結果！
おわりに

はじめに

みなさんこんにちは。インプルの岩崎です。

最近、生成AIの力もすごい伸びていますよね。学生時代はデザインをやっていたこともあり、デザイン物の制作依頼も社内で受けるわけですが、制作するときに生成AIの力ももちろん借りています。

生成AIを使ったデザイン制作の課題

非デザイナーからすると、文字を入力するだけでチラシを一枚作ってくれる生成AIはとても重宝すると思います。ですが、デザイナーからすると、生成AIって少し使いづらいですよね。

例えば、書き出し形式がPNGやJPEGだった場合、それ以上編集をするのは難しくなります。なので、めっちゃいいんだけど、ここを少し変えたい！という痒いところに手が届かないのです。これはデザイナーの性だと思いますが、最後は自分の手で微調整を完成させていきたいのです。

そうなると、デザイナーがAIを活用するためには、編集可能なファイルである余地が必要です。しかも、デザイナーによって使っている編集ソフトはそれぞれですから、なるべく多様なソフトに対応した形式である必要があります。

そこで注目したのが、SVGファイルです。

万能なSVGファイル

SVGとは、Scalable Vector Graphicsの略で、webに適したベクターファイル形式です。

https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html

普通の画像ファイル（JPEG, PNG）と違い、下記のような形でXMLのテキストデータとして存在しているので、中身を編集することもできます。ちなみに、下記をグラフィカルに表現すると、赤い丸が出てきます。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

XML とは? - 拡張可能なマークアップ言語 (XML) の説明 - AWS

XML とは何か、企業が XML を使用する方法と理由、および AWS で XML を使用する方法。

この形式の最大のメリットは、Illustrator、Figma、Inkscapeなど主要なデザインツールで開くことができます。この形式でAIが出力してくれれば、出した叩き台をそのままデザイナーが調整できるのです！

作ってみる

そこで今回は、作りたいバナーの情報を入れてAIに生成させ、それをSVGで書き出すところまでやってみたいと思います。今回は生成されるものはあまり気にせず、SVGがちゃんとできることに注目していきます。

仕組み

まずは今回のプログラムの仕組みについて紹介します。

バナーの生成はGPTのAPIキーを使用して行います。今回はここがメインではないので、プロンプトも簡単な条件を入れる程度で、作らせてみました。モデルもGPT-4o-miniです。

その際、出力の条件にはSVGで出力するように注意ポイントを入れます。これにより、SVGで出力され、編集可能なデータとして扱えるはずです！

生成されたSVGファイルがIllustratorやエディターで開ければ、成功です！

実行してみる

プログラムはすごく簡単です。

prompt = “”” ~ の部分で、バナーの条件を入れています。また、注意書きでSVGにすることを追記しました。

response = ~ の部分でモデルの設定などをし、svg_code = ~ の部分で、出力した回答結果を取得、output.svgとして出力します。

from openai import OpenAI
import os

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

prompt = """
あなたはSVGデザイナーです。
以下の条件でシンプルなポスター風SVGを生成してください。
- サイズ: 300x250
- 背景色: #FF6600
- 見出し: 秋のセール開催！
- サブコピー: 最大50%OFF、今だけ
- CTA: 今すぐチェック

注意:
- <svg>タグを必ず含める
- テキストは<text>タグで残す
- 出力はSVGコードのみ
"""

response = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": prompt}]
)

svg_code = response.choices[0].message.content

with open("output.svg", "w", encoding="utf-8") as f:
    f.write(svg_code)

print("✅ output.svg を生成しました！")

余計な部分を処分する

しかし、上記ファイルで一度実行してみたところ、エラーが頻発・・・。

調べてみたところ（というか、感覚ですが）、GPTが解答を出力する際に、余計なテキストも含んでいるのではないかと考察しました。

そこで、下記プログラムを追記して余計な部分を削除するようにしました。

svg_code = response.choices[0].message.content

# 1. コードブロックを削除
svg_code = svg_code.strip()
if svg_code.startswith("```"):
    svg_code = "\n".join(line for line in svg_code.splitlines() if not line.startswith("```"))

# 2. xmlnsが無ければ追加
if "<svg" in svg_code and "xmlns" not in svg_code:
    svg_code = svg_code.replace(
        "<svg",
        '<svg xmlns="http://www.w3.org/2000/svg"',
        1
    )

with open("output.svg", "w", encoding="utf-8") as f:
    f.write(svg_code)