自作の svg 。

だれかにわたしたり公開しようかなって思ったとき、ちゃんと表示されないとね。


viewBox についてです。

いまひとつつかめていない方がいるのでは？
プロの方は、いつものように無視でおねがいします！


適切でない viewBox は、

データが見切れちゃう！

っていう原因にもなってます。


こんな viewBox だったとき。

viewBox="0 0 810 560"

最初の数値から 基点 x ・ 基点 y ・終点 x ・ 終点 y です。

Illustrator では、
0,0 が基点、オブジェクトのサイズが終点で書き出されます。

なので、終点 x ・ 終点 y の座標が、
オブジェクトの width と height と同じだとみなされます。


あくまで、「みなされる」のよ？
データの作り方によっては、
ボックスと同じ大きさでない場合もあります。


また、ブラウザーは左上が基点 0,0 になりますが・・・。

注意するのは、
ブラウザーの基点 と viewBox の基点 は同じに見えても同じものではないこと。
viewBox の終点はブラウザーの座標ではなく、
viewBox の基点からの距離的な座標だということです。

viewBox は、
この範囲【 基点と終点までの座標内 】でオブジェクトを表示しますよ。
といっているんですね。

オブジェクトの座標が viewBox からはみ出すときれいに表示されません。
また、viewBox がブラウザーからはみ出してもきれいに表示されません。


ここまで読んでくださった方は、
もう、オブジェクトの座標はおわかりだと思います。


では、ここから！


整数でイラストのサイズを決定したのに、
なんで viewBox がはんぱな数値なんだろう？




というのは、線幅分。
はんぱでもなんの問題もありませんが。

絶対に整数にしたい！

という方。

いまさら基本ですけど・・・。



環境設定の【 プレビュー境界を使用 】ですよ！

私のまわりでも、案外、知らなかった方が多い設定でした。
以前、突然こちらがデフォルトになったバージョンがありました。
不評だったので、それ以来、この指定が外れているのがデフォルトです。

ここにきて【 プレビュー境界を使用 】がいかされる時代になるとは！


また、アイコンなどで、それぞれサイズが違うけど、
縮尺も配置も同じにしたいというとき。

画像では余白をもうけて同じサイズにして書き出しますよね。


svg でも余白をとればいいんです。




各オブジェクトを同じ空の矩形に入れちゃいます。
っで、それぞれを矩形ごと書き出してしまうのが有効です。




矩形をそのままにしておいても空だから大丈夫！

「よけいなデータはゆるさないぞ！」

という場合は、データから矩形を消去してね。

viewBox に対する座標値は変わらないのでこっちも大丈夫！！

オブジェクトの入っているボックスのサイズを一定にして、
ボックスのサイズをオブジェクトのサイズと「みなして」
あつかえば、縮尺や配置をそろえることができます。


めんどうなのは、今回のようなやつ・・・。

イラストを書く練習なので、座標はアンカーで 0,0 にしました。

これでは、線幅がマイナスになっちゃいますね。
さらに、額縁も後付けなのでマイナス！

適当に数字を変えていっても表示できるけど、
わけわからなくなっちゃうと後の使い勝手に影響します。


最初にいっちゃうと、一番簡単で確実なのは。
Illustrator で開いて、アートボードをオブジェクトに合わせて書き出すことです。
ただ、Illustrator で開くときには、前回の記事のような注意点があるから気をつけてね。


この記事は、svg で viewBox どうにかして、理解を深めるってのが目的！


ちゃんと表示させるためには、まずオブジェクト全体のサイズを調べます。

このこの場合は額縁をつけたので簡単。

810,560 です。

では一旦、この数値の viewBox で！

viewBox="0 0 810 560"

viewBox の基点は、0,0 で、ブラウザーの基点と同じです。




ぐだぐだです。 ブラウザーの大きさによっても違っちゃいます。


このまま viewBox の数値を大きくしてもうまくいきません。

オブジェクトがマイナス方向に入ってしまってるからです。


なので、基点に額縁分のマイナス座標を指定します。




viewBox="-40 -40 810 560"

ね！ ぴったり！！

これは、viewBox の基点をオブジェクトの分 -40 移動させ、
ブラウザーの基点 0,0 に合わせたということになります。

viewBox とブラウザーの基点は違うもの。
ということがおわかりかと思います。


「viewBox にマイナス値があるのは美学に反する！」

という方はこちら。


viewBox="0 0 810 560"

基点 0,0 からの座標にします。


オブジェクト全体を g でくくって、



＜g id="fish_03" transform="translate(40,40)"＞
＜この中オブジェクト＞
＜/g＞

と、ごっそり移動しちゃいます！

あーもしかしたら、transform は、各パスに指定する方が確実かも？
指定場所は、各パスの最後 【 ＞ 】の前です。


こちらは、オブジェクトを 40 移動して、
基点が 0,0 の viewBox 内に持ってきたということになります。


それぞれの座標を混同しないようになったら大丈夫！



でも・・・この見切れちゃってるデータ。
不定形のイラストは座標がわからないよ？

っていうことがほとんどですよね。


もちろん、Illustrator で開いて書き出し直していいんだけど。

ね？ 問題があるでしょ。

ブラウザーで確認しようにも見切れてるじゃん！

ってときは、とりあえず見えるようにしましょう！！


わかりやすいように、固定サイズにしています。



データが見切れているのが上と左のときは、



基点の数値をマイナスに増やして。




右と下が見切れているときは、



後2つの数値をプラスに増やしてみて。




上と左がおおきく空いていて、
オブジェクトがブラウザーの外に出ちゃってるときは、



見えるようになるまで、基点の数値をプラスにね！




ブラウザーからはみ出るほどすっごい大きなサイズのイラストデータだ！
なんてことがあるかな？
そんなデータはおそらく固定サイズになってるんじゃないかしら。



svg の記述に width・height があったら消去して、レスポンシブにしてみてください。


これのどれかをするか、組み合わせると見えるようになるはずです。

見えるようになったら、適切な viewBox を求めていきます。


では、そのデータに書いてある viewBox の大きさでパスを書いてしまいましょう！

このこを例に。



viewBox="-50 -50 900 600"

という書くために適当に広げた viewBox です。




＜path class="cls-00" d="M-50-50H850V550H-50V-50Z”/＞

動かしやすいように、水平垂直で結びました。

viewBox は、基点からの距離座標。
パスは、データの絶対座標です。

座標値に基点分の加減を忘れないように。


では、この矩形をお魚にじわじわよせていきます！




＜path class="cls-00" d="M-5-6H730V482H-5V-6Z”/＞

このくらいがちょうどいい感じ！


このまま viewBox にするときは。

viewBox="-5 -6 735 488"


基点を 0,0 にするときは。

viewBox="0 0 735 488"

＜g id="fish_03" transform="translate(5,6)"＞




適切な viewBox になりました！！


おかしな表示のデータでお悩みの方は、直してみてね。



さて。

ながながとおつき合いいただいたみなさま。
どのくらいいらっしゃるかわかりませんが！

おつかれさまでございました！！


総論として・・・イラストは素直に Illustrator で！！！


なんですが、

svg のベジェデータが読めるとか書けるとかが、
まったくムダなスキルかというとそうでもないよ。

他の方が他のソフトで作ったデータを扱うとなって、
データの編集が必要になったとき。

っで、Illustrator で開こうとしたら変になっちゃったりしたら？

エディターでとりあえず！

ができちゃいます！！

Illustrator で読めるかたちまでもってくることも可能なはず？！


なによりも、エディターで描けるなんて新鮮です。


すっごくおもしろいので、ベジェマニアの方には、
一度「 書いて 」みることをおすすめします。



おつき合いしていただいたみなさまに。

お魚の外形と完成品のデータをご用意しました。

svg_fish.zip



記事と合わせて、いろいろあそんでいただければと思います！

関連記事

• svg で描いちゃう！書き方おぼえがき vol.01 【 基本 】
• svg で自由に描こう！vol.06 【 お魚を書く！反省会後編 viewBox をととのえる！ 】
• svg で自由に描こう！vol.05 【 お魚を書く！反省会前編 Illustrator で開く！ 】