SVGタグの使い方

2024年4月17日2024年4月24日

SVGタグの使い方がいまいち分からないと思っていませんか？

なんとなくは使えているけれど、本質的な部分は理解していないままなんてこともありますよね…

そこで今回は、以下の内容を分かりやすく説明します。

SVGの概要
様々なパターンを用いてSVGを操作

この記事を書いた人
yuki

2023年からWeb制作会社でコーダーとして活動。
HTML, CSS, JavaScript, Shopify対応可能。

はじめに

今回紹介するコードはこちらです！

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50">
</svg>

svgタグとは？

svgは、Scalable Vector Graphicsの略です。

svgタグで、よく見かけるのは次の３つです。

xmlns
viewport
viewBox

xmlns

svgはxmlns属性によって提供されています。

タグ内に xmlns=”http://www.w3.org/2000/svg” を記述することで使用できます。

viewport

表示する範囲を指します。
例：キャンバス、フレーム
width(横の表示範囲)、height(縦の表示範囲)を使って表します。

x軸中心から右方向　→　正の数値（例：100）
x軸中心から左方向　→　負の数値（例：-100）
y軸中心から下方向　→　正の数値（例：100）
y軸中心から上方向　→　負の数値（例：-100）

viewBox

viewportの範囲内で位置とサイズ（倍率）を指定して表示します。
例：ルーペ、望遠鏡
min-x、min-y、width、heightを使って表します。

min-x：ビューポートのx座標
- x軸中心から右方向 → 正の数値（例：100）
- x軸中心から左方向 → 負の数値（例：-100）
min-y：ビューポートのy座標
- y軸中心から下方向 → 正の数値（例：100）
- y軸中心から上方向 → 負の数値（例：-100）
width：横の拡大・縮小されたサイズ
- viewportより値が大きい場合は、サイズが縮小
- viewportより値が小さい場合は、サイズが拡大
height：縦の拡大・縮小されたサイズ
- viewportより値が大きい場合は、サイズが縮小
- viewportより値が小さい場合は、サイズが拡大

様々なパターン

今回は、分かりやすいように円(circle要素)を使用していきます。

viewportとviewBoxのwidth, heightの値が同じパターン

<svg 
width="200" height="200" 
viewBox="0 0 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBoxのwidth, heightを変更するパターン

viewBox(width, height) の値が viewport(with, height)より小さい場合

viewBox(width=100, height=100)　＜　viewport(with=200, height=200)

<svg 
width="200" height="200" 
viewBox="0 0 100 100" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBox(width, height) の値が viewport(with, height)より大きい場合

viewBox(width=100, height=100)　＞　viewport(with=200, height=200)

<svg 
width="200" height="200" 
viewBox="0 0 300 300" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBoxのmin-x, min-yを変更するパターン

viewBox(min-x) が正の値のとき

<svg 
width="200" height="200" 
viewBox="100 0 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBox(min-x) が負の値のとき

<svg 
width="200" height="200" 
viewBox="0 0 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBox(min-y) が正の値のとき

<svg 
width="200" height="200" 
viewBox="0 0 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

viewBox(min-y) が負の値のとき

<svg 
width="200" height="200" 
viewBox="0 0 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>

クイズ

下記の画像のようにしたいとき、どのようにコードを書けばいいでしょうか？
※答えはをクリック!

<svg 
width="200" height="200" 
viewBox="100 100 200 200" 
xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100">
</svg>