SVGマスターへの道

整理整頓と再利用 - <g>, <defs>, <use>, <symbol>, <marker>

SVGで複雑なイラストやアイコンを作っていくと、たくさんの図形要素でコードがごちゃごちゃしてきたり、同じような部品を何度も書いたりすることがありますよね。そんなとき、SVGにはコードをスッキリ整理し、効率的に作業を進めるための便利な仕組みが用意されています。

このページでは、要素をグループ化する <g>、図形を定義して貯めておく <defs>、それを再利用する <use>、テンプレートとして強力な <symbol>、そして線やパスの端に印をつける <marker> について学びます。これらを使いこなせば、SVGの管理がぐっと楽になり、ファイルサイズも小さくできるかもしれませんよ！

<g> 要素 - 要素をグループ化

<g> (groupの略) 要素は、複数のSVG要素をひとまとめにするためのコンテナです。「フォルダ」のようなものだと考えてください。グループ化すると、以下のようなメリットがあります。

<g> グループ化と変形・スタイルデモ

簡単な「顔」を構成する円と四角をグループ化してみましょう。

顔グループ {/* 顔本体 */} {/* 左目 */} {/* 左瞳 */} {/* 右目 */} {/* 右瞳 */} {/* 口 */} 
<svg viewBox="0 0 250 150">
  <g id="faceGroup" transform="translate(0 0) rotate(0)" fill="#cccccc">
    <title>顔グループ</title>
    <circle cx="75" cy="60" r="50" fill="yellow" stroke="orange" stroke-width="2"/>
    <rect x="45" y="40" width="20" height="25" fill="white" stroke="black"/>
    <circle cx="55" cy="52" r="5" fill="black"/>
    <rect x="105" y="40" width="20" height="25" fill="white" stroke="black"/>
    <circle cx="115" cy="52" r="5" fill="black"/>
    <path d="M55 90 Q75 110 95 90" stroke="black" stroke-width="2" fill="none"/>
  </g>
</svg>

グループのfillを変更すると、個別にfillが指定されていない要素（この例ではなし）の色が変わります。また、グループのtransformで全体が動いたり回転したりします。

<defs> と <use> - 定義して再利用

同じ図形やパターンを何度も使いたい場合、毎回コードを書くのは非効率ですよね。そんなとき役立つのが <defs> (definitionsの略) と <use> です。

<defs> と <use> デモ

星形を定義し、それを複数箇所に異なるスタイルで再利用してみましょう。

{/* デフォルトのfillをdefs内で指定しない方が、useで上書きしやすい */}

<symbol> 要素 - 高機能な再利用テンプレート

<symbol> は、<use> で再利用されるためのグラフィックテンプレートを定義する、もう一つの強力な要素です。<g> に似ていますが、以下の特徴があります。

<use> で <symbol> を参照する際、x, y, width, height 属性を指定して、表示位置とサイズを制御します。

<symbol> と <use> アイコンデモ

簡単なアイコンを <symbol> で定義し、異なるサイズと色で再利用してみましょう。

カスタムアイコン

<symbol> の viewBox のおかげで、<use> で指定した width と height に合わせてアイコンが歪まずにスケーリングされます。

<marker> 要素 - 線やパスの端点マーカー

<marker> 要素は、線 (<line>)、折れ線 (<polyline>)、多角形 (<polygon>)、パス (<path>) の端点や中間点に表示するグラフィック（矢印の先端、丸、四角など）を定義します。

<marker> 矢印デモ

豆知識 (English/日本語)

Did you know? The SVG `<use>` element creates what's often referred to as an "instance" of the referenced element, and this behaves somewhat like a Shadow DOM. Styles applied to the original definition can be overridden by styles on the `<use>` element itself or its ancestors, but the internal structure of the used element is not directly part of the main DOM tree in the same way. This encapsulation is key to its reusability.

知っていましたか？SVGの<use>要素は、参照される要素の「インスタンス」としばしば呼ばれるものを生成し、これはシャドウDOMのように振る舞います。元の定義に適用されたスタイルは、<use>要素自身やその祖先のスタイルによって上書きできますが、使用される要素の内部構造は、同じようにはメインDOMツリーの直接的な一部にはなりません。このカプセル化が、その再利用性の鍵です。

まとめ

このページでは、SVGのコードを整理し、図形を効率的に再利用するための重要な要素 <g>, <defs>, <use>, <symbol>, <marker> について学びました。これらのテクニックは、SVGで複雑なグラフィックを作成・管理する上で不可欠です。

これらの要素を使いこなすことで、より構造的でメンテナンスしやすく、そして軽量なSVGファイルを作成できるようになります。次のページ「変幻自在！- 移動・回転・拡大縮小」では、SVG要素を動かしたり、大きさを変えたり、回転させたりする「変形」について詳しく見ていきます。

このページの要約

日本語

SVGでは、<g>要素で複数の図形をグループ化し、まとめてスタイルや変形を適用できます。<defs>要素は、再利用したい図形やグラデーションなどを定義する場所で、ここにあるものは直接描画されません。<use>要素は、<defs>で定義された要素をIDで参照し、SVG上にインスタンスとして表示します。<symbol>要素は、viewBoxを持つ再利用可能なテンプレートで、特にアイコン作成に便利です。<marker>要素は、線やパスの端点・中間点に矢印などの記号を付加するために使われます。これらの機能により、SVGの構造化、再利用性、保守性が向上します。

English

In SVG, the <g> element groups multiple shapes, allowing collective styling and transformations. The <defs> element defines reusable graphics like shapes or gradients, which are not rendered directly. The <use> element instances these definitions by referencing their IDs, displaying them on the SVG canvas. The <symbol> element, a reusable template with its own viewBox, is particularly useful for icons. The <marker> element is used to attach symbols like arrowheads to the vertices of lines and paths. These features enhance the structure, reusability, and maintainability of SVG.

Español

En SVG, el elemento <g> agrupa múltiples formas, permitiendo aplicar estilos y transformaciones colectivas. El elemento <defs> define gráficos reutilizables como formas o degradados, que no se renderizan directamente. El elemento <use> instancia estas definiciones referenciando sus IDs, mostrándolos en el lienzo SVG. El elemento <symbol>, una plantilla reutilizable con su propio viewBox, es particularmente útil para iconos. El elemento <marker> se usa para adjuntar símbolos como puntas de flecha a los vértices de líneas y rutas. Estas características mejoran la estructura, reutilización y mantenibilidad de SVG.

中文

在SVG中，<g>元素用于组合多个形状，允许集体应用样式和变换。<defs>元素定义可重用的图形，如图形或渐变，这些图形不会直接渲染。<use>元素通过引用其ID来实例化这些定义，并将它们显示在SVG画布上。<symbol>元素是一个带有自己的viewBox的可重用模板，特别适用于图标。<marker>元素用于将箭头等符号附加到线条和路径的顶点。这些特性增强了SVG的结构、可重用性和可维护性。