QooQのカスタマイズ；SVGファイルのロゴを表示する

サイトタイトルロゴをSVGファイルに変更しました。GIFやPNGなどラスタ形式の画像ファイルからがんばって置き換える必要はないのではなかったかもですが、拡大縮小しても画質に支障がないというベクタ形式の画像がどういったものかを体験したかったので、今回もリモスキさんの情報をたよりにトライしてみました。

スタイルシートで指定して図の大きさや色を可変でき、大きくしてもぼけたりすることなく表示できるのが魅力です。

手順としては以下の通りです。

1. SVGファイルを用意；illustratorで作成。
2. SVGファイルを最適化；svgoptimizer.comを利用させてもらいました。
3. BloggerのテンプレートにSVGファイルの情報を書き込み。

PhotshopでのSVG書き出しには注意

SVGファイル初心者の自分がやってしまった間違いに既存のロゴをPhotoshopでSVGファイルに書き出せばよいと思ったことです。これは大間違い。

実際、SVGファイルは生成可能ですが、元画像をSVG 文書内に画像として入れているだけで、スタイル指定で色などの変更はできません。出力されたファイル内記述を確認すると<image>で始まる画像ファイルの情報が記載されています。これでもスタイル指定でサイズだけは変更可能ですが、元画像を拡大縮小するだけなので、ボケが出たりしますし、なによりもファイルサイズが大きくなります。ここはPhotoshopでの加工はあきらめ、illustratorでパスを切ってベクター画像を用意することにしました。