東京のスタバからの投稿です。

わーわー騒いでいた高速バスは結局いつもより2時間遅延して5時間かかりました。迂回に事故渋滞が重なった感じです。しかも迂回中に本来のルートの通行止が解除されるというね…。

修学旅行ぶりに5時間バス乗りましたが身体がバキバキです…腰が痛い…。

でもいつもと違う景色が見れてちょっと旅行気分でした（東京行くのは旅行に入らない）。雨上がりの富士山は荘厳だった。

バス車内で「災害による遅延のお詫びです」とペットボトルのお茶をいただきました。バス会社悪くないよー！！！

※投稿日は20日（日）ですが内容は18日（金）のものです。

今日やったこと

コーディング

前々回で読み込んだテキストのSVG画像がレスポンシブになってなかったので対応。反映させるまでに結構大変だった。

CSSでレスポンシブ用の記述をしても反映されず。調べてみると解説が。

SVGをwidthやheightで幅と高さを指定してCSSで親要素に%などで幅の可変に対応しようとしても、描画される領域はwidthやheightで指定した数値になりますので幅と高さが足りていないと表示が途切れたりします。これはSVG要素はHTMLの空間とは違い、SVGの空間で描画するためです。

SVGは数値データで描かれているのでCSSで指定しようとしても適用されない。よくよく考えたらそりゃそうか。

上の記事によると、どうやらviewBoxを指定しなければいけないらしい。のでエディターでSVGデータを開いて見てみるとwidthとheightだけ指定されていたのでそれを削除してviewBoxの記述を追加。

viewBox="0 0 315 98"

viewBox属性の記述は「<min-x>, <min-y>, <width>, <height>」の4つの数値で設定します。
min-xは「X座標の最小値」、min-yは「Y座標の最小値」であとは幅と高さの指定となります。座標に関してはSVGで凝ったデザインを作成するときくらいしか設定しないかと思います。普通に画像をSVGコードでHTMLに表示するときは0として大丈夫です。

更新してみると、今度は表示されなくなった。viewBoxを追加したときに一緒に不要そうな記述を消したせい…？

それに、見本で書かれているSVGコードは数字の羅列なのに対して自分のはアルファベットの羅列でおかしいなと気づいたので、Photoshopからの書き出し方から調べ直し。

調べてみると、テキストをただベクターデータ化して書き出すだけでは足りなかったらしい。

※SVGで書き出しが出来るのは「シェイプパス」のみです。ラスタライズ、スマートオブジェクト化されたレイヤーは書き出しが出来ても「画像が配置」されたSVGファイルが生成されるだけで意味がありません。必ずシェイプパスで作成したレイヤーを選択し、書き出して下さい。

どうやら「シェイプに変換」をしてから書き出さなければいけないそう。やってみたら無事表示されてデータの中身も数字になった。

width指定もheight指定もされていないのでCSSでレスポンシブ用の記述をして無事反映。よかったーーー。

実はSVG画像を使用するのが会社としても個人としても今回初めてで、調べながらやったけれどなかなかスムーズにいかなかった。

調べてみてもSVGの書き出し・読み込み方法の記事が全然見つからなかったし、初学者の方が作ったポートフォリオを見ると当然のようにSVG画像が使われているので、当たり前すぎる知識なのかなと思いました。

SVG画像の書き出しから読み込みまでの一連の流れを誰かに見せて欲しい。そもそもそんなに苦労しないところなのか…？？？