コピペで使える！SVG＋CSSで〇（丸・円）！

「画像を作るの面倒だなぁ…」と感じたことはありませんか？

簡単な画像であれば、svgで済ませてしまいましょう。jpg、 png、 gif 等と違い、属性やcssをテキストで編集するだけで、色などの変更も簡単にできます。

ということで、今回は 〇（丸・円）のsvgソースをご用意しました。コピペしてすぐに使えます。色などを変更したい場合も少し編集するだけでOKです！自由にご利用ください。

スポンサーリンク

svgの属性で書きたい（cssで書かない）人はこちら

枠線ありとなしで少し異なるので、2パターン用意しました。

枠線なし

▼ このソースをコピーしてご利用ください。（ここをクリックするとコピーします）

<svg style="max-width: 100%;" width="500" viewbox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle fill="#00f" cx="1" cy="1" r="1"></circle>
</svg>

※青字は値を調整できるものです（後述）
※赤字は注意点です（後述）

設定できるもの

タグ	属性	値
svg	width	円の大きさを指定する（高さは自動で調整される）。 「200」、「300」など
circle	fill	円の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など

注意点

svgに「style=”max-width: 100%;”」を指定することで、スマホなど画面が小さくなったときに自動で縮小するようにしています（レスポンシブ対応）。
ここでは svg に style属性で 直接書いていますが、外部css などに移しても問題ありません。

枠線あり

▼ このソースをコピーしてご利用ください。（ここをクリックするとコピーします）

<svg style="max-width: 100%;" width="500" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle fill="#00f" stroke="#000" stroke-width="4" cx="50" cy="50" r="48"></circle>
</svg>

※青字は値を調整できるものです（後述）
※ピンク字は他の設定変更に伴って変更が必要なものです（後述）
※赤字は注意点です（後述）

設定できるもの

タグ	属性	値
svg	width	円の大きさを指定する（高さは自動で調整される）。 「200」、「300」など
circle	fill	円の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など
circle	stroke	枠線の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など
circle	stroke-width	枠線の太さを指定する。 「2」、「4」など
circle	r	50 – （stroke-width ÷ 2）を計算し指定する。 「stroke-width＝2」であれば、50-(2÷2）＝49

注意点

svgに「style=”max-width: 100%;”」を指定することで、スマホなど画面が小さくなったときに自動で縮小するようにしています（レスポンシブ対応）。
ここでは svg に style属性で 直接書いていますが、外部css などに移しても問題ありません。

svgのアウトラインは円の外周を中心に描きます。よって、半径が「stroke-width」÷２分増えてしまいます。よって、半径から「stroke-width」÷２を引く必要があります。
詳しく知りたい方は、詳細を記事にしましたので是非ご覧ください。

cssで書きたい人はこちら

枠線ありとなしで少し異なるので、2パターン用意しました。

枠線なし

▼ このソース（svgとcss）をコピーしてご利用ください。

svg（ここをクリックするとコピーします）

<svg class="svg-circle" viewbox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="1" cy="1" r="1"></circle>
</svg>

css（ここをクリックするとコピーします）

.svg-circle {
  max-width: 100%;
  width: 500px;
}
.svg-circle circle {
   fill: #00f;
}

※青字は値を調整できるものです（後述）
※赤字は注意点です（後述）

設定できるもの

対象タグ	属性	値
svg	width	円の大きさを指定する（高さは自動で調整される）。 「100%」、「200px」など
circle	fill	円の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など

注意点

svgに「max-width: 100%;」を指定することで、スマホなど画面が小さくなったときに自動で縮小するようにしています（レスポンシブ対応）。

枠線あり

▼ このソース（svgとcss）をコピーしてご利用ください。

svg（ここをクリックするとコピーします）

<svg class="svg-circle-stroke" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle stroke-width="4" cx="50" cy="50" r="48"></circle>
</svg>

css（ここをクリックするとコピーします）

.svg-circle-stroke {
  max-width: 100%;
  width: 500px;
}
.svg-circle-stroke circle {
   fill: #00f;
   stroke: #000;
}

※青字は値を調整できるものです（後述）
※ピンク字は他の設定変更に伴って変更が必要なものです（後述）
※赤字は注意点です（後述）

設定できるもの

タグ	属性	値
svg	width	円の大きさを指定する（高さは自動で調整される）。 「100%」、「200px」など
circle	fill	円の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など
circle	stroke	枠線の色を指定する。 「#f00」、「#ff0000」、「red」、「rgba(0, 0, 0, 1)」など
circle	stroke-width（属性）	枠線の太さを指定する。 「2」、「4」など
circle	r（属性）	50 – （stroke-width ÷ 2）を計算し指定する。 「stroke-width＝2」であれば、50-(2÷2）＝49

注意点

svgに「style=”max-width: 100%;”」を指定することで、スマホなど画面が小さくなったときに自動で縮小するようにしています（レスポンシブ対応）。

svgのアウトラインは円の外周を中心に描きます。よって、半径が「stroke-width」÷２分増えてしまいます。よって、半径から「stroke-width」÷２を引く必要があります。
詳しく知りたい方は、詳細を記事にしましたので是非ご覧ください。

スポンサーリンク