ロゴデザインを変更しました

今までも SVG で作ったロゴを使用していましたが、Illustrator の使い方を少し覚えたので、使いつつロゴを作成しました。同じく SVG で書き出しています。

q-az

ロゴの歴史

歴史といっても2つしかないです。前回のロゴが下の感じだったのでかなりの進化ですね。

logo

配色は全く同じです。グリッドをおいてひたすら規則正しく直線を引いていくだけの簡単なお仕事でした。

make-1-1-1-1

アウトライン化せずに直線、つまり line 要素として SVG を作ったので少し文字数の削減が出来ています。

SVG

<svg id="logo" viewBox="0 0 508 284">
    <title>q-Az</title>
    <line stroke="#9FA8DA" stroke-width="27" stroke-linecap="round" x1="141.5" y1="141.5" x2="141.5" y2="269.5"/>
    <line stroke="#F8BBD0" stroke-width="27" stroke-linecap="round" x1="141.5" y1="141.5" x2="109.5" y2="109.5"/>
    <line stroke="#CE93D8" stroke-width="27" stroke-linecap="round" x1="77.5" y1="205.5" x2="141.5" y2="141.5"/>
    <line stroke="#DCE775" stroke-width="27" stroke-linecap="round" x1="13.5" y1="141.5" x2="77.5" y2="205.5"/>
    <line stroke="#64B5F6" stroke-width="27" stroke-linecap="round" x1="181.5" y1="141.5" x2="245.5" y2="141.5"/>
    <line stroke="#FFE082" stroke-width="27" stroke-linecap="round" x1="269.5" y1="205.5" x2="301.5" y2="109.5"/>
    <line stroke="#C5E1A5" stroke-width="27" stroke-linecap="round" x1="301.5" y1="109.5" x2="333.5" y2="13.5"/>
    <line stroke="#80CBC4" stroke-width="27" stroke-linecap="round" x1="333.5" y1="13.5" x2="365.5" y2="109.5"/>
    <line stroke="#FFAB91" stroke-width="27" stroke-linecap="round" x1="365.5" y1="109.5" x2="397.5" y2="205.5"/>
    <line stroke="#80DEEA" stroke-width="27" stroke-linecap="round" x1="301.5" y1="109.5" x2="365.5" y2="109.5"/>
    <line stroke="#FFCC80" stroke-width="27" stroke-linecap="round" x1="429.5" y1="205.5" x2="493.5" y2="141.5"/>
    <line stroke="#F48FB1" stroke-width="27" stroke-linecap="round" x1="493.5" y1="141.5" x2="429.5" y2="141.5"/>
    <line stroke="#80CBC4" stroke-width="27" stroke-linecap="round" x1="429.5" y1="205.5" x2="493.5" y2="205.5"/>
    <line stroke="#EF9A9A" stroke-width="27" stroke-linecap="round" x1="77.5" y1="77.5" x2="13.5" y2="141.5"/>
    <line stroke="#F8BBD0" stroke-width="27" stroke-linecap="round" x1="109.5" y1="109.5" x2="77.5" y2="77.5"/>
    <circle fill="#FFFFFF" cx="77.5" cy="77.5" r="8"/>
    <circle fill="#FFFFFF" cx="13.5" cy="141.5" r="8"/>
    <circle fill="#FFFFFF" cx="77.5" cy="205.5" r="8"/>
    <circle fill="#FFFFFF" cx="141.5" cy="141.5" r="8"/>
    <circle fill="#FFFFFF" cx="301.5" cy="109.5" r="8"/>
    <circle fill="#FFFFFF" cx="365.5" cy="109.5" r="8"/>
    <circle fill="#FFFFFF" cx="333.5" cy="13.5" r="8"/>
    <circle fill="#FFFFFF" cx="493.5" cy="141.5" r="8"/>
    <circle fill="#FFFFFF" cx="429.5" cy="205.5" r="8"/>
</svg>

もう少し削れそうな部分もある気がするのですが、とりあえずこれで完成です。

スポンサーリンク

IE のバグのような SVG の仕様

InternetExplorer だけバグのような仕様で高さを直接指定しないとインライン SVG の高さが 150px を超えたもの全てを 150px にしてしまうというものがあります。以下の画像のような感じ。

ie-svg

ロゴが 150px に無理やりさせられているので小さいです。IE のバグのようにも感じますが仕様です。高さ、height を何らかの形で直接指定すれば解決はするのですが、そうすると今度は SVG がレスポンシブに対応しなくなり、スマホなど狭い画面で見ると SVG 画像がはみ出るということが起きます。

参考:IEのインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法

上記のサイトでは JavaScript で対応していますが、ここでは PHP を使いソースの時点で IE のみユーザーエージェントで判別して SVG ではなく PNG 画像のロゴを表示しています。いろいろな方法を考えてみましたが、おそらくどんな状況でも表示崩れがない方法だと思ったのでこの方法を採用しました。PNG 画像でレスポンシブに CSS で対応しているため、IE と同じユーザーエージェントを持ち、かつモバイルのような狭い画面での来訪でもはみ出さないという対応が出来ました。

ただこの方法は、じゃあ最初から SVG ではなく PNG 画像を使えば良いのでは、という難問の解決にはなってません。SVG 使いたいです。ついでに Edge はこの仕様はないので通常通り 150px 以上の高さの SVG もその大きさで表示できます。

まとめ

なんとなく前回のロゴより完成度が高いきがしますし、ポップな感じになったのでこのロゴに合わせて全体のデザインも少し変更出来たら楽しそうです。

IE のバグは IE を使う人がいなくなれば解決するのですが、その問題こそあと10年ぐらいは解決しなさそうなので悲しいですがこんな感じの対応になりました。