SVGメーカーを公開しました
ちょっとしたロゴやバッジ、SNSプロフィール用のアイコンを作りたいとき、デザインツールを起動するのが面倒に感じることはないでしょうか。「SVGメーカー」はブラウザだけでSVGファイルを作成・ダウンロードできるツールです。インストール不要で、操作した結果がリアルタイムにプレビューに反映されます。
5種類のテンプレート
用途に応じた5種類のテンプレートから始められます。
| テンプレート | 特徴 | 向いている用途 |
|---|---|---|
| badge | グラデーション背景のバッジ型 | イベント・称号・ラベル |
| logo | 有機形状アイコン付きロゴ型 | ブランドロゴ・サービスロゴ |
| icon | 丸角正方形のシンプルアイコン | アプリアイコン・SNSアバター |
| from-image | ラスタ画像をSVGに埋め込み | 写真ベースのSVG作成 |
| imported | 外部SVGを読み込んで編集 | 既存SVGのカスタマイズ |
編集できる項目
テンプレートを選んだあと、右パネルから各項目を細かく調整できます。
カラー設定
- 背景色：カラーピッカー＋HEX直接入力
- アクセント色：図形・装飾部分の色
- テキスト色：タイトル・サブタイトルの色
テキストオーバーレイ
- タイトル・サブタイトル：テキスト入力
- フォント：10種類から選択（日本語フォント含む）
- 太字・フォントサイズ：スライダーで調整（タイトル8〜120px・サブタイトル8〜80px）
- テキスト配置：左寄せ・中央・右寄せ
利用できるフォントは以下の通りです。
| 日本語フォント | 欧文フォント |
|---|---|
| Noto Sans JP | Poppins |
| Noto Serif JP | Inter |
| Zen Kaku Gothic New | Roboto |
| M PLUS 1p | Montserrat / Oswald / Playfair Display |
テキスト装飾
ストローク（輪郭線）
- On/Offトグルで切り替え
- ストローク色・太さをスライダーで調整
シャドウ（影）
- On/Offトグルで切り替え
- ぼかし量・透明度をスライダーで調整
SVGインポート・クリーンアップ機能
既存のSVGファイルを読み込んで編集することもできます。インポート時には以下の変換・最適化を自動で行います。
| 機能 | 効果 |
|---|---|
| メタデータ削除 | <metadata>・<desc>・<title> を除去 |
| コメント削除 | SVG内コメントを除去 |
| スタイル最適化 | style 属性をSVG属性に変換 |
| 単色化 | 全要素を currentColor で統一 |
| 透明度調整 | opacity パラメータで一括制御 |
外部ツールで書き出したSVGには不要なメタデータが含まれていることが多く、そのまま使うとファイルサイズが大きくなります。クリーンアップ機能を使えばすっきりした軽量なSVGに変換できます。
また、インポートしたSVGに含まれる <text> 要素は自動で検出され、テキストを直接書き換えることができます。フォントや色だけ変えてブランドに合わせたい場合に便利です。
出力方法
- SVGコードをコピー：クリップボードにコードをコピー。HTMLに直接埋め込む場合などに使用
- SVGファイルをダウンロード：
.svgファイルとして保存 - 別タブでプレビュー：ブラウザで最終確認
SVGはベクター形式のため、どんなサイズに拡大しても劣化しません。ファビコン・アプリアイコン・名刺デザインなど幅広い用途で活用できます。
こんな場面で役立ちます
- 新しいサービスやイベント用の簡易ロゴが必要なとき
- SNSプロフィール用のアイコンをサクッと作りたいとき
- 既存SVGのテキストや色だけ変更したいとき
- アプリのアイコン素材をブラウザだけで作りたいとき