文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > CSSで図形 > SVGで多角形

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」を調整してご利用ください。
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン