例のエンブレムをSVGで描いてみる

コード

  <svg width="100" height="100" viewBox="0 0 600 600">
    <!-- 白背景 -->
    <use xlink:href="#base"></use>

    <!-- 要素の配置 -->
    <use xlink:href="#element-rect-black" x="200" y="0"></use>
    <use xlink:href="#element-rect-black" x="0" y="400"></use>
    <use xlink:href="#element-rect-black" x="400" y="400"></use>

    <use xlink:href="#element-rect-gold" x="0" y="0" mask="url(#mask-a)"></use>
    <use xlink:href="#element-rect-gold" x="400" y="0" mask="url(#mask-b)"></use>

    <use xlink:href="#element-rect-silver" x="0" y="200" mask="url(#mask-d)"></use>
    <use xlink:href="#element-rect-silver" x="400" y="200" mask="url(#mask-c)"></use>

    <use xlink:href="#element-circle" x="200" y="200"></use>

    <!-- マスク・要素の定義 -->
    <defs>
      <mask id="mask-a">
        <rect fill="#FFF" x="0" y="0" width="600" height="600"></rect>
        <circle fill="#000" cx="-100" cy="-100" r="316.22776"></circle>
      </mask>

      <mask id="mask-b">
        <rect fill="#FFF" x="0" y="0" width="600" height="600"></rect>
        <circle fill="#000" cx="300" cy="-100" r="316.22776"></circle>
      </mask>

      <mask id="mask-c">
        <rect fill="#FFF" x="0" y="0" width="600" height="600"></rect>
        <circle fill="#000" cx="-100" cy="300" r="316.22776"></circle>
      </mask>

      <mask id="mask-d">
        <rect fill="#FFF" x="0" y="0" width="600" height="600"></rect>
        <circle fill="#000" cx="300" cy="300" r="316.22776"></circle>
      </mask>

      <symbol id="base">
        <rect fill="#FFF" stroke="#FFF" x="0" y="0" width="600" height="600"></rect>
      </symbol>

      <symbol id="element-rect-gold">
        <rect fill="#B18E47" stroke="#B18E47" width="200" height="200"></rect>
      </symbol>

      <symbol id="element-rect-silver">
        <rect fill="#B4B3B4" stroke="#B4B3B4" width="200" height="200"></rect>
      </symbol>

      <symbol id="element-rect-black">
        <rect fill="#353637" stroke="#353637" width="200" height="200"></rect>
      </symbol>

      <symbol id="element-circle">
        <circle fill="#D61519" stroke="#D61519" cx="100" cy="100" r="100"></circle>
      </symbol>
    </defs>
  </svg>

使用タグ

• <svg>: SVG定義タグ。
  • width: 描画される幅。
  • height: 描画される高さ。
  • viewBox: 疑似サイズ（svg内のpathやrectで使用する）を指定する。
• use: defs内に定義したテンプレートを使用する。
  • xlink:href: 使用するテンプレートを指定する。
  • x: viewBox内のx座標を指定する。
  • y: viewBox内のy座標を指定する。
  • mask: 使用するマスクを指定する。
• defs: useで再利用するテンプレートを定義する。
• mask: アルファチャンネルマスクを定義する。#000に近いほど透明に、#FFFに近いほど不透明になる。
• symbol: シンボルを定義する。
• rect: 長方形を作成する。
  • fill: 塗りつぶし色を指定する。
  • stroke: 外枠色を指定する。
  • x: viewBox内の、rectの左上頂点となるx座標を指定する。
  • y: viewBox内の、rectの左上頂点となるy座標を指定する。
  • width: viewBox内の、rectの幅を指定する。
  • height: viewBox内の、rectの高さを指定する。
• circle: 円を作成する。
  • fill: 塗りつぶし色を指定する。
  • stroke: 外枠色を指定する。
  • cx: viewBox内の、circleの中心となるx座標を指定する。
  • cy: viewBox内の、circleの中心となるy座標を指定する。
  • r: viewBox内の、circleの半径を指定する。

感想

• 要素と要素の間に境界線ができる。原因不明。
• defsの外部化はできなかった。
• 一騒動あって取り下げられたけど使い勝手のいいコンセプトだなと思った。
• 発表されたときはダサく見えたけどいろいろいじくりまわしてみるとそこまでダサくないように見えてくる。慣れの問題かなあ。
• svgめっちゃ便利。