SVGの画像・アニメーションを簡単作成／多角形

SVGフォーマットを使用すれば、画像をテキストで表すことができます。簡単なアイコンなどのSVGファイルの作り方は難しくありません。
SVGはテキストで表現されるため、アイコンなど単純な画像の場合は、JPEGやPNG、GIFなどのファイルより画像サイズ（容量）を小さくなります。

当ページでは、マウス操作でSVG画像を作ることで、SVGのHTMLや背景で使用するSVGのCSSが作成されます。
また、色・罫線、透明（透過）や半透明、グラデーション、アニメーションにも対応しています。

すべて簡単に作れます！

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

SVGの画像を作成してみよう

枠線の指定

枠線なし通常丸平面

幅

他▶

透明度

図形の色

透明単色グラデーション

他▶

透明度

サンプル図形

直線
3角
4角
5角
6角
7角
8角
9角
10角
11角
12角

座標表示	なしマーク横一覧
スケール	なしあり

作成したSVG（静止画）をHTMLで使用する場合

作成したSVGの静止画が以下のHTMLとなります。SVGをHTMLで使用する場合は、以下をご利用ください。コピー＆ペーストで画像が表示されます。

<svg xmlns="http://www.w3.org/2000/svg"
     width="160" height="160" viewBox="-5, -5, 160, 160">
  <path d="M75 0 L55 50 L0 50 L40 90 L15 150 L75 115 L135 150 L110 90 L150 50 L95 50 Z"
        fill="#ffff99"
        stroke="#ff4d4d" stroke-width="5">
  </path>
</svg>

このhtmlで表示される画像

ページTOP

作成したアニメーションSVG（動画）をHTMLで使用する場合

作成したSVGのアニメーションが以下のHTMLとCSSとなります。作成したアニメーションSVG画像をHTMLで使用する場合は、以下をご利用ください。コピー＆ペーストで画像が表示されます。
※IEなど一部ブラウザは、SVGアニメに対応していないため動作しません。

<svg xmlns="http://www.w3.org/2000/svg" class="svgLineMove"
     width="160" height="160" viewBox="-5, -5, 160, 160">
  <path d="M75 0 L55 50 L0 50 L40 90 L15 150 L75 115 L135 150 L110 90 L150 50 L95 50 Z"
        fill="#ffff99"
        stroke="#ff4d4d" stroke-width="5">
  </path>
</svg>

/* ================================================== */
/* アニメーションを動かすために以下のCSSも必要です */
/* ================================================== */
.svgLineMove{
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
  fill-opacity:1;
  animation: svgAnime 5s 0s ease-in infinite;
}
@keyframes svgAnime {
  0% {
    stroke-dashoffset: 1800;
    fill-opacity:0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity:1;
  }
}

このhtmlで表示される画像

アニメーションの速度やアニメーション種類は変更してご利用ください。
animation 「アニメーション」

ページTOP

作成したSVGを背景画像として使用する場合

作成したSVG画像のエンコードが以下に生成されています。背景の画像で使用する場合は、以下をご利用ください。
コピー＆ペーストで画像が表示されます。

/* ================================================== */
/* いかのいずれでも同じ画像が表示されます */
/* ================================================== */
/* --- URLエンコードを利用する場合 --- */
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%22-5%2C%20-5%2C%20160%2C%20160%22%3E%3Cpath%20d%3D%22M75%200%20L55%2050%20L0%2050%20L40%2090%20L15%20150%20L75%20115%20L135%20150%20L110%2090%20L150%2050%20L95%2050%20Z%22%20fill%3D%22%23ffff99%22%20stroke%3D%22%23ff4d4d%22%20stroke-width%3D%225%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
/* --- BASE64エンコードを利用する場合 --- */
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSItNSwgLTUsIDE2MCwgMTYwIj48cGF0aCBkPSJNNzUgMCBMNTUgNTAgTDAgNTAgTDQwIDkwIEwxNSAxNTAgTDc1IDExNSBMMTM1IDE1MCBMMTEwIDkwIEwxNTAgNTAgTDk1IDUwIFoiIGZpbGw9IiNmZmZmOTkiIHN0cm9rZT0iI2ZmNGQ0ZCIgc3Ryb2tlLXdpZHRoPSI1Ij48L3BhdGg+PC9zdmc+');

ページTOP

作成したSVGを画像ファイルとして保存する場合

作成したSVG画像をファイルに保存する場合は、以下をメモ帳などのテキストエディタで拡張子「.svg」で保存してください。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="-5, -5, 160, 160">
<path d="M75 0 L55 50 L0 50 L40 90 L15 150 L75 115 L135 150 L110 90 L150 50 L95 50 Z" fill="#ffff99" stroke="#ff4d4d" stroke-width="5">
</path>
</svg>

ページTOP

留意事項

枠線（罫線）が中心線で描かれるため、座標軸を超える場合があります。
生成されるHTMLやCSSは枠線（罫線）も考慮していますが、線画の角度によっては画像が掛ける場合があります。この場合は「svg」タグの「width」「height」「viewBox」を調整してご利用ください。

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？