SVG

「SVG」とは?(Scalable Vector Graphics) プログラミング

「SVG」とは?(Scalable Vector Graphics)

「SVG」は拡大縮小しても画質が変わらないベクター形式の画像です。SVGファイルはテキスト形式でXMLで書かれており、メモ帳などで編集できます。ウェブサイトのロゴやアイコン、様々な画面サイズに対応する必要があるデザインに適しています。SVGは、テキスト形式の画像なので、生成AIとの相性もよいです。SVGとは(拡大できる図形の設計図)スマートフォンで画面を大きく拡大したとき、画像がぼやけてしまうことがあります。だけど、ウェブサイトのロゴやアイコンの中には、どれだけ拡大してもくっ...
生成AIで説明スライド作るためのプロンプトを作った(SVG) AIの話題

生成AIで説明スライド作るためのプロンプトを作った(SVG)

説明スライドを効率的に作成するためのSVGプロンプト開発過程を紹介します。スタイル一元管理やテキスト配置の最適化により、視認性の高いデザインが実現できます。反復的な改善プロセスを通じて、情報伝達と視覚的魅力を両立させたプロンプトを開発できました。生成AIで情報をスライドに変換する生成AIは、文章だけでなくスライドも作ることができます。Claude 3.7 Sonnet にプロンプトを与え文章を送信すると、約45秒ほどで SVG(ベクター画像)を生成してくれました。プロンプトで...
[Inkscape] ロゴをSVGで作り直した とりあえずのメモ

[Inkscape] ロゴをSVGで作り直した

InkscapeというベクターグラフィックソフトウェアでSVG形式のロゴを制作する方法を解説します。図形ツールやテキストツールを使用して基本的な要素を配置し、整列機能やグループ化で効率的にデザインを調整できます。色の設定においては、RGB値を正しく指定することでSVGエクスポート時の色の変化を防ぐことができます。SVGのよいところは、拡大縮小で劣化しないことと、あとから色を変更できることです。「新規ドキュメント」を作成これまでPowerPointで作ってPNG形式にしていたロ...
Inkscapeでエクスポートしたsvgが表示されない?(viewBoxの異常値) とりあえずのメモ

Inkscapeでエクスポートしたsvgが表示されない?(viewBoxの異常値)

InkscapeでエクスポートしたSVGファイルの表示されない場合、viewBoxの値や transformの設定がおかしいのかもしれません。「ドキュメントのプロパティ」でページサイズを適切に設定してから、エクスポートし直すと正しい SVGファイルになります。エクスポートしたsvgが表示されない?InkscapeでエクスポートしたSVGが表示されないことがあります。何が原因ですか?問題のSVGファイルのXMLを見ると、viewBoxやtranslate の値が異常に大きな値に...
WordPressにSVG画像をアップロードできるようにした(functions.php) とりあえずのメモ

WordPressにSVG画像をアップロードできるようにした(functions.php)

WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。「このファイルタイプ(SVG)をアップロードする権限がありません」WordPressにSVGファイルをアップロードしようとしたらエラーになりました。このファイルタイプをアップロードする権限がありません。fun...
テキストから図解を生成するNapkin AI AIの話題

テキストから図解を生成するNapkin AI

「Napkin AI」は、入力された文章から図解を自動生成するAIツールです。生成された図解は編集可能で、画像やSVGファイルとしても保存したり、クリップボードにコピーしたりできます。現時点ではひな型の数が限られていますが、高機能なSmartArtのような便利なツールとして利用できます。「Napkin AI」と「Auto Spark」ボタン「Napkin AI」は、入力した文章を元に図解を作ってくれる生成AIです。(参考)基本的な編集画面は、「白紙のノート」のような感じです。...