お魚は書けましたが・・・ちょっとさみしいです。

形しかとってませんからね。


では、もっと書きこんで、
作品としてみることができるようにしていきましょう！


もはや、どなたに対して需要があるのかわからなくなってきました。
もっとも、自分のためですけど！



物足りなく思えるのは、それぞれのパーツが 1色ベタだから。

色を変えるにしても、このままでは単純すぎです。

だったら、オブジェクトを分割しちゃう！



手順を簡単に。





まず、分割しやすいように、ボディーの座標をすべて絶対座標に直します。




分割したいアンカーを結ぶベジェを書く。
こちらも、絶対座標で書く方がやりやすいです。

当初から、分割してみる予定でいたので適所にアンカーを打っています。
イラストを描くときは、計画的に構成を考えることも必要ですね。




新しく書いたベジェでそれぞれのパスをクローズさせれば完成。

簡単です！




こんな感じになりました。




ね？ 分割！



ひれは、元のオブジェクトをコピー。
アンカーを減らして作ってます。

こちらも簡単。



うろこは、円弧を座標をずらしながらつなげて折り返し。

すっごく簡単！！


だいぶ作品っぽくなってきました。


でもまだ、平べったいかと・・・。



では、グラデーションをかけて立体感をだしましょう！



グラデーションは、html に css で指定するのと、
基本の考え方は変わりはありません。

html では、ボックス内にかかりますよね。

それと同じ。 ということは。


オブジェクトを囲むボックスの座標を割り出して指定すればいいのです！


結論からいって・・・すっごく面倒で大変です！！

とにかく、それぞれの座標が必要。
相対座標の計算をまちがわないようにしましょう！





ひれ と うろこ を抜粋しました。


グラデーションの例です。

＜inearGradient id="O6" x1="353" y1="130" x2="353" y2="380" gradientUnits="userSpaceOnUse"＞
＜stop offset="0" stop-color="#7a7a7a"/＞
＜stop offset="1" stop-color="#c4ddb5"/＞
＜/linearGradient＞

＜linearGradient＞ は、線形グラデーションですよ。
x・y がグラデーションのかかるボックス。

ちなみに、円形グラデーションはこんな感じ。

＜radialGradient id="E1" cx="135" cy="254" r="10" gradientUnits="userSpaceOnUse”＞
＜stop offset="0" stop-color="#fff"/＞
＜stop offset="1" stop-color="#000"/＞
＜/radialGradient>

中心の座標と半径を指定します。





id をつけて管理です。


【B6】の記述に注目！

＜linearGradient id="B6" data-name="B5" x1="158" y1="208" x2="560" y2="0" xlink:href="#B5" /＞

【B5】と同じグラデーションを使うので、リンクさせています。

このとき、ファイル先頭の svg の記述に、

【xmlns:xlink="http://www.w3.org/1999/xlink" 】

が必要になってきます。




スタイルは、id で指定。



けっこう自由度もあり！

座標の指定で、開始点と終了点・角度が簡単に動かせます。


座標にラインを引いてみましょう。



こんなふうに。

Illustrator のグラデーションツールのようですね。




うろこには全体でグラデーションをかけました。




全体を囲む座標を割り出して、それぞれに指定します。


今回は・・・というか絶対やらないけど。

パターンも同じ方法のようです。
パターンのユニットをつくるんですね？
で、パスに指定するんですよね？？

Illustrator からのデータをみると、
ぜーんぶ記述しているみたいなので、自分で書くのは非現実的だと思う。

図形を利用した幾何柄ならいいかも？

まぁ・・・そんな場面には出くわさないです。
すでにこの記事のシリーズが非現実的ですもの。


じゃん！




いい感じになってきたかな！！


ひれのところ、ブラーがかかっているようにみえるのは、
Illustrator でも使うテクニックです。

ラインをアルファをつけて重ねてます。
それぞれのグラデーションと上手にあわせると、
ぼかしたように感じさせることができます。


シャドウやブラーは、ラスタライズ画像になるから、書くのはムリ。

ぼかし系を使わなくても、やわらかさは表現できますよ！


ごめんなさい。
よく考えたら、 svgフィルターで出来ちゃいますね。



次回は、完成しまーす！！

関連記事

• svg で自由に描こう！vol.04 【 お魚を書く！クリッピングマスクで飾ろう！ 】
• svg で自由に描こう！vol.03 【 お魚を書く！グラデーションで塗ろう！ 】
• svg で自由に描こう！vol.02 【 お魚を書く！できたかな？ 】