SVGにCSSで乗算をかける。

SVGの図形などに対して透明な効果をかけるには、fill-opacityを使っていましたが、これは半透明が扱えるだけ。完全な透明である0から完全な不透明である1までを扱えるだけ。半透明な画像を重ねていくと1に近づいて行くだけ。 現在制作しているサイトでは色数…

iOSやMacのSafariで、 SVGにCSS filterが適用されない?

現在制作中のサイトでは、SVGを多用しているのですが、ある時Safariでサイトを確認するとCSSのfilterが効いていないことに気が付きました。 本来は、照明の下の図をぼかすことで、照明がついているような図になるのですが、 Safariではボケずに表示されてし…

IllustratorでSVGを書き出すときの設定を極める。

ここのところ年末進行がキツく、このブログも制作中のサイトも停滞しています。さて今回は、久々にSVGの変換をしようとしたら、すっかり設定方法を忘れていたので備忘録。 Illustratorでは、SVGを書き出すときにオプション設定が細かくあります。これを調整…

3DデータからSVGを出力する。

現在、個人制作しているWEBサイトは、図解をメインにしたサイトを目指しているので、SVG画像を多様しています。複雑な図ではなく、簡単な説明図なのであえてSVGにしています。基本的には、Illustratorで描きSVG出力するのですが、3DデータのSVG化ってどうな…

WordPressの公開前にしておきたいこと。

「サイトの公開前にすること」と検索し、Faviconを作ったり、いろいろやったつもりで公開しましたが、いざ公開してみるといくつか気になる部分が出てきた。 公開前にしておきたいこと その1PageSpeed Insightsのスコアをできるだけ改善しておく プラグインSi…