知っとかないとたまにミスするよ。
svgってなんぞ
どんだけ拡大しても平気な画像。要するにパスデータ。
通常、画像ファイルは画像なので画像として扱うしかできないんだけど、svgはソースコードが存在するのでsvgファイルとして読み込むほか、ソースコードを直接記述することもできる。要するにhtmlタグなので、部分的に色を変えるとかカスタマイズ性が高い。
jpegとかよりも自由度が高く、しっかりいじるならそれなりにめんどいやつ。
adobeでsvgを書き出すときの注意点
svgはパスデータって言ったけど、アレは嘘。
svgの中に画像を突っ込んだり、文字を突っ込んだりすることもできる。それはそれで問題ない場合もあるんだけど、svgとして使う前提で考えたらパスデータにしてないと意味がない。と思う。
なので、adobeでsvgを作成する場合はその素材をパス化しておく必要がある。
illustratorの場合
印刷データを作成するとき宜しく、あるもの全てをパス化する。
つまり文字データはアウトライン化するし、境界線もアウトライン化してしまう。
シェイプを複数組み合わせて作ったものがあれば合体させる。
コード化したときにシンプルになるように心がけるといいかも。
書き出したsvgの中身にはレイヤー名が入ってたりする。あと、場合によっては無くてもいいグループ化もされてたりするので削除すれば、ちょっぴりだけど軽量化できる。
書き出したsvgの中身は改行されてない。
photoshopの場合
photoshopにアウトライン化は無く、代わりに「シェイプ」という概念がある。
シェイプ化できる前提で素材を組み合わせて、シェイプ化してから書き出す。保存形式のバリエーションにはsvgはない。「書き出し」または「画像アセット」から書き出すことになる。
書き出したらコード内にレイヤー名が入ってるので、邪魔くさいなら消す。
書き出したsvgの中身は改行されてる。
境界線
photoshopには境界線をパス化することができない。レイヤー効果も属性の指定も共通して、photoshop上で設定した境界線はsvg内のstyleで、strokeで扱われる。
これが地味に厄介で、線の基準を指定できない。内側とか外側とかやれない。非常にめんどくさいんで、ベタ塗りのシンプルなものでもない限りは、というかそもそものところ、svgはillustratorで書き出すのが安定。
photoshopで実現したいなら、二重にして下層のやつに線を付与するみたいな感じでやらないといけない。
コメント