どうも。
WEBおじさんです。
最近、SVGを使うケースが増えていたりします。
個人的にはまだよくわからないのですがねｗ
なんかいろいろとメリットがありそうなので使っております。
というか、取引先のデザイナーとかコーダーとかがSVGを使ってくるだけですねｗ
自分はほとんどSVGの書き出しをしたこともありません。
使いこなしたいところですけどね。
ということで、なんかよくわからないのですが、ベクトルなんちゃらとかそんな感じで画像の容量を節約できるとか、おかげでページの読み込みが早くなるとかなんとか。
そんなページをクライアントが確認していると、
「ここ、なんかフォントが渋くない？ｗ」
と突っ込まれました。
見てみると、確かに渋いｗ
どういうことかというと、クライアントはスマホ（iPhone）で確認中、指摘した場所はSVGの場所でした。
「確かに渋いねｗ」
ということで、恒例のGoogle先生へお尋ね申しました。
すると、解決策がいくつか出てきました。
前回の事象とは違い、解決策を出してきてくれましたｗ
いつもこんな風に解決策がすぐに出てきてくれるといいのにな。
と思いつつ、いくつかのページをクロールすることにしました。
ちなみに、私はいつも分からないことがあって調べる際、一つのページで終わることはありません。
なぜなら、最初に見た改善策が最善の解決策とは限らないからです。
色々と調べ、検証し、サイトへ与える影響や表示スピードなど、いろんな角度から最善な解決策を選ぶようにしております。
そのため、解決させるまでにある程度時間を使います。
もちろん、緊急の場合はとりあえずの解決策を施した後、再度検証し、最善策を施すようにしております。
ということで、今回の改善策を2点紹介します。
まず1つ目は、「画像を加工する」ことです。
どうやって加工するかというと、これにはAdobeのイラストレーターが必要になります。
まぁ、イラレじゃなくてもできるのかもしれないですけど。
ドロー系といわれる画像加工ソフトなら恐らく加工可能です。
そのソフトで該当のSVGを開くと、テキスト部分はテキストで編集できるようになっています。
通常画像をWEB用に出力する場合、jpegやgif、pngといったような形式で1枚の画像として書き出すため、その画像内に書き込まれている文章はテキストとして編集することができません。
そういった画像の文章を編集する場合は新たにレイヤーを追加したり文章を消すための加工をしたり、というような作業が通常工程となります。
ですが、SVGの場合は文章が編集できるようなものになっているので、画像内の文章の編集にはとても都合がよい形式の画像となっています。
SVG画像は文章編集ができるということは、その部分はテキストであると認識されております。
この場合、そのSVGファイルには「フォント」が自動的に指定されており、閲覧する端末側にSVGファイル内で指定されているフォントがない場合は「その端末のデフォルトフォントが自動的に指定される」ようになります。
これが、iOSの場合は明朝体がデフォルトで表示されるフォントのようで、SVG画像内のテキストは何も加工しない場合は明朝体になるようです。
お待たせしました。
色々と蘊蓄を書きましたが、一つ目の解決策はSVG画像をドロー系のソフトで開き、テキスト部分を「アウトライン化」して書き出し、サーバー上のファイルを上書きすることで解決できます。
しかし、「アウトライン化」してしまうと文章の編集はできなくなってしまうので、注意が必要です。念のため、バックアップを取っておいた方がいいですね。
ただ、これをすることでファイルの容量が少し重くなります。
まぁ、大した容量ではないのですが、軽いに越したことはないので、もう少しいい感じの解決策を探してみると、今度はSVGファイルの中を編集する、という解決策を見つけました。
これはどういうことかというと、SVGファイルをエディターで開くと、中はXMLファイルのような感じでテキストが書いてありました。
その中に「font-family=」という感じで、明らかにフォントを指定しているような記述があるので、そこを「”sans-serif”」とすればゴシックで表示されます。
試していないですが、WEBフォントを指定すればそれが表示されるかもしれないです。
ということで、この2つ目の施策が容量も変わらず、いい感じにできたので、こちらを採用することにしました。
なんか、色々と余計なことも書いてしまったかもしれませんが、私としてはSVGファイルをエディターで開いてフォントを指定することが現時点で最善と判断しました。
という感じで、今回は終わりにしたいと思います。
お疲れさまでしたｗ
